When you start working with CSS you'll quickly notice that there are numerous size units that you can use within CSS. pixels, view heights root em, and percentages. If you are confused why they are all needed, or, when you should use one over the other, then you are in the right place.</p>
First, let's start with some boring theory about how a browser renders elements with associated size declarations. Most developers start with trying to hack out a design before spending any time understanding the theory of how units work in the background, this is what I did when I learned CSS; don't do this.
When you fail to understand the theory you are doing yourself a disservice. Not understanding how something works is like giving a handyman a tool that he doesn't know how to use. Next thing you know he's trying to bang a nail into a wall, using a spanner.
If you don't spend the time to learn the theory, then you'll likely go through life hacking your way through your styles until something works. I'm happy to admit this is how I learned CSS and I wrote some pretty bad code for the first few years (probably still do now :)).
I started a contract and the designer left, so I was responsible for doing all the CSS for the company for 4 months. I didn't read anything but hacked my way through it. Looking back now, I would have saved so much more time if I have spent a week learning the theory, so here goes...
This is an easy one but an important concept to understand. When a page is loaded, if no CSS styles have been defined on an element, then the browser, in the background, will assign default values to certain properties. For example, the default root font-size will be 16px. All initial padding will be 0.
Knowing that these initial values are set, regardless if you explicitly do it, is important to understand how relative units are converted.
When you use certain units, like declaring a font-size of 1.2em, the browser will look-up the CSS hierarchy (cascade) to get the parent font-size. Using the parent font-size it will then be able to figure out the child elements relative size.
How Are CSS Values Processed?
Now you know that certain values like font-size will always have a value, regardless if you set it or not, the next thing to discuss is how are things like font sizes and widths calculated?
To render an element the browser has determined the CSS rules to apply to it, using the cascade order and inheritance. In CSS we have different types of units, pixels are absolute units, e.g. a browser knows exactly how to render 1p pixel. There are also relative units, like 10%. A browser does not know what 10% is without doing some maths in the background.
Before a page can be rendered the page needs to calculate all the specific absolute values for all the elements. To calculate the width of a div for example with a width of 50%, the browser will figure out the absolute width of the parent element and then use that value to figure out an absolute width for the child element, so it knows how to display it.
Obviously, the width is not the only measurement the browser cares about. After an initial width is figured out, the browser will also try to figure out padding required for each element as each element on a page needs to have a padding value.
Remember, you don't explicitly need to set every value in CSS, the browser will add default initial values if they do not exist. Any element without explicit padding will be set with a default value of 0.
How Are Units Converted From Relative To Absolute?
When a browser renders a page, no matter what relative unit you use, like a percentage, before the element is rendered it is converted to an absolute value (pixel).
Let's say we have a font-size of 150%. This means it will have a size 150% bigger than the font-size declared in the parent element, whatever that might be. So let's imagine a parent div has a font size of 16px. The child element has a font-size of 150%. The browser will take these two values in the background to figure out it will need to render the font in the child as 24px, as 150% of 16px is 24. This is an important thing to understand. Relative widths use the parent. Let's take another example, so an element has a decoration of padding 10%. For the browser to calculate the length of the element, it uses its parents computed width. If say the parent element has a width of 1000px, the child element with a padding of 10% will be 100px.
A pixel is the smallest unit possible that represents a dot on your computer monitor. Pixels are absolute values, e.g. it represents a unit the browser can use to display something.
TIP: A browser cannot render a fraction of a pixel and in the background will automagically round a value up or down before it is rendered, so you are better off using whole numbers.
EM can be used to determine font-size and length. In order for a browser to figure out how to render an element with a declared EM, it will use the parent, or, current element font-size for the reference for its calculation.
You might be thinking if EM just uses the current/parent font-size, what's the point of using it? The benefit of using an EM is that it makes your life a hell of a lot easier when you write responsive websites. If you specify all your units in absolute values, you have to write a lot of media queries for all your different breakpoints. When you use relative units, you can simply write a handful of media queries that change the root font-size and the browser will automatically resize the size and length of the whole site. This makes writing CSS that works with mobile and desktop easier :)
NOTE: EM and REM is only supporting IE 9 and above
WHEN TO USE: ems ARE the best unit to use for media queries
Rem works the same way for font-sizes and length. REM uses the root element for the reference for its calculation.
View Height and View Width
VH is the viewport height. An element with 1% VH will have a height of 1% of the height of the current device. As a designer, you will not know this, as the browser will figure it out on the user's device.
View Width works exactly the same but for the width of a device. Some examples of when you use VH and VW might be for a hero image on the homepage, where you want a banner to take up the whole of a user's screen.
A good example of usage of VH might be
Percentages are not technically a CSS unit, but, in this tutorial let's pretend they are to help you get clear on the process. Before an element that has an associated % with it can be rendered, the browser will need to convert that relative percentage to an actual pixel value.
The way percentages works are slightly different for fonts, length, and distance.