07. Lengths

When specifying a length, we must include one of the many different unit systems offered by CSS. The three categories of lengths - relative, absolute, and percentages.

1) Relative Lengths

Relative lengths are relative to their containing element, or a certain property. This is useful because it allows your content to scale according to the surrounding elements' settings.

ex
The ex unit is related to the current font size. Specifically, it is the height of a lowercase letter 'x' of the current font.
ch
The ch is similar to an ex-unit, but it's the width of a zero character.
em
An emis a unit that measure the width of the capital letter 'M'.
Em units allow you to specify a length that is relative to text. So 2em would be twice the size of the current font.
rem
These are similar to em's, but they're relative to the root element.
ex, ch and em relative unit lengths

2) Percentages and the Viewport Units

Note: The viewport is the length and width of the current viewing size of one's browser window.

%
Percentages (%) are based on the parent element, so specifying that the body has a width of 90% would mean that it takes up 90% of its containing element.
If it has no parent containing element, then it's the browser window.
This is useful when designing fluid layouts, as we'll see later in this tutorial series.
vw, vh
The vw and vh shows the viewport width and height, respectively. 5vw would be equal to 5% of the user's viewport.
vmax, vmin
vmax specifies whichever is larger: the viewport width or height. vmin specifices whichever is smaller.

3) Absolute Lengths

Absolute lengths do not depend on any other elements.

These give web designers the ability to give a precise length to any element.

px

The most popular absolute length is the pixel, which is a single dot on the computer screen.

For example, screens with a 1280x720 resolution means it has 921600 small pixels that show the display. Each dot changes color depending on what you're viewing. Specifying a length in pixels (px) allow for designers to be very precise in how much space their text makes up.

Print Lengths

Additionally, there are print lengths that can be used, but rarely are. These include points, inches, centimers, millimeters and picas. These are mainly used in print media, and web developers rarely use them.

Congratulations!

Congratulations! You have just finished CSS Fundamentals. Get up, take a stretch and pat yourself on the back. Now let's move onto CSS Text section! :-)

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Ad