Understanding the Dynamics of CSS Units.

Photo by KOBU Agency on Unsplash

Understanding the Dynamics of CSS Units.

Apportioning measurements in CSS is an integral part of using the stylesheet language and getting the most desirable outcomes for our website designs. However, to adequately make website styling responsive, one has to understand the various ways in which measurements can be apportioned and where or when to use what, at the appropriate point. In this article, I would be taking you on a journey of understanding the various units of measurement and when to appropriately use them.

CSS units are the values we give to our element properties in order to determine their size. Although there are loads of units available to us, these 3 major ones are the most commonly used and probably the ones you’d come across the most;

The Absolute Units, The Relative Units and the Percentages. Now, let's take a deeper dive.

The Absolute Units

These are values given to elements that are “fixed” in nature. This means that they are rigid and immutable. No matter the length or height of the website, these values would be constant and never change.

There are different measures to give elements an absolute value and they are:

  • Pixels

  • Points

  • Millimeters

  • Centimeters

  • Inches

Despite the above mentioned, Pixels is the most commonly used in website development. The others are only advisable if you’re designing to print, otherwise, pixels are the most appropriate.

Pixels (px)

Pixel units allow you to apportion values as you go, which means you decide how you want your elements to look by just giving them values in numbers, for example if you have 2 paragraphs and you give paragraph1 a font size of 20px, but you want paragraph 2 to be twice the size of paragraph1, you simply just give it a font size of 40px and that would do the job.

The Relative Units

Relative units just like the name implies are relative in nature. This means that they’re dependent on another value. Unlike the absolute units, they’re not fixed, and as the values of their dependent change, their values also change.

There are 2 types of Relative Units:

  1. Relative to the Font Sizes

    Relative font sizes are measured in many different ways but the two most common are:

    i. EMs

    Font sizes measured in EMs are relative to the parent of that element. For example, if you have a paragraph inside of a div, and the div has a font size of 15px, if the paragraph is given a font size of 1em, it means it also has 15px, if it’s given 2ems, this means it has double of the div value which is 30px, et cetera.

    ii. REMs

    REM means “Root EM”, this in essence means that the value given is relative to the Root element which is the HTML. Take for instance, the root element is assigned a font size of 10px, as you code along, whatever rems value you give to the other elements is going to be calculated by the root element value e.g, a section is given 3rems, it would be three times the root value which is 30px. What makes REM unique from EM is that you can change the outlook of the whole page by simply changing the root element’s value.

    Also notable is that if the root element is not given a specific font size value, it automatically takes the default value which is 16px.

Relative to the Viewport

Values relative to the viewport are dependent on the behavior of the window/page. They change based on the value of the window at a time. Major units to measure viewport values are:

i. Viewport Height(vh) - the height of the window

ii. Viewport Width(vw) - the width of the window

iii. Viewport Minimum(vmin)- depending on how smaller the window is.

iv. Viewport Maximum(vmax)- depending on how larger the window is.

These are rarely used except for the first two which are still considerably common.

Percentages

Percentages are third on our list of units used in web dev. Percentages are mainly used to set the width of an element. Ideally, when you set the width of an element to a certain percentage, the value is relative to the parent of that element.

It could also be used to set the height of an element but sometimes this causes unforeseen weird behavior in the dom hence, it's not very advisable.

Percentages make it easier to get precision in setting the actual dimension of elements rather than calculating using pixels

Conclusion

Absolute units are static and independent where one value does not affect the other, while relative units are calculative and dependent, a change in one value may affect the others dependent on it. Relative units make it easier to build a responsive layout than absolute units.

Bottom line is that there are no generally accepted units that are wrong or right, or good and bad. They are largely dependent on personal preference, the type of results to be achieved and the level of expertise/understanding.