Dimensions

To make pages that look nice and balanced.

Pixels are used as a measuring unit to control the dimensions of elements.

When you hear of screen resolutions like 4K, this means a display width of approximately 4,000 pixels.

In most web browsers, the default size for text in paragraphs, buttons, lists, and tables is 16px.

small 13px
medium 16px
large 18px

Modern websites are built to look great on screens of different sizes and resolutions. This approach is known as…responsive web design.

Using pixels as a measurement unit is not a best practice when it comes to responsive web design.

Screens of different sizes and resolutions have different numbers of pixels and…pixels are fixed size units.

To ensure the design of your page looks great on any screen, percentages (%) are used to set relative dimensions. This ensures consistent design across different screen sizes.

When styling an element using percentages (%), 100% would be the full size of its parent element.

All the elements in a webpage that are seen inside the browser are nested inside the <body>

By default, the width of the body of a page matches the width of the device screen. This is very helpful to design responsive sites.

You can also use percentages to set the font size. Font sizes will be calculated using the parent's font size as reference.

The default font size for the body of a page in most browsers is 16px.