CSS units explained
introduction:
We use units in our daily life to express the value of anything , Kilograms or pounds for measuring the mass of an object , centimeters or inches to measure length and seconds to measure time.
But where do these units come from ?
The truth is all these units we use in our daily life , in physics , math , chemistry all these are made up nothing make them special , someone just decided one day to call the (1/86400)or(1.57407407*10^-5) of a solar day a second or a piece of platinum and iridium “IPK” (“International Prototype kilogram”) a kilogram.
What does this have to do with css ?!!!!
Units in css are the same thing , if you have had a bad experience with them you may think they are more complex , illogical , but once you think of them that way things start to get clear.
Units in css :
There are currently 15 CSS UNITS supported by browsers and they can be split into two categories absolute units and relative units.
Absolute Lengths:
Absolute lengths as you probably guessed from their name have absolute values they do not depend or inherit their size from the parent element or anything else , you should try to avoid using them as possible because screen sizes vary so much they are preferable in printing more than web design.
1-Pixels:
Pixels are the main units used in computers even most of the units you will be using will be rendered in pixels , but you should think before using them because the screen space that a pixel takes will differ depending on the screen your client is using , so maybe your website looks awesome on your very big low density computer screen but when it is rendered and viewed on the new retina iphones or the new 4k phone displays everything will be tiny so unless you are planning to make another version of your website specifically for smartphones you should be trying to avoid them and use relative units which we will be talking about later in this blog post.
2-cm, mm , in , pt ,pc:
You should already be familiar with most of these units as they are widely used in the real life , all you need to know about them is :
inches (1in = 96px = 2.54cm)
points (1pt = 1/72 of 1in)
picas (1pc = 12 pt)
click the link below to have a look on a demo showcasing every unit we have talked about till now.
Relative Lengths:
Relative lengths don’t have absolute values like in absolute lengths instead they get their dimensions based on something else and they can be split into 3 categories which are units that are based on:
- The Parents dimensions (%)
- The currently declared font properties(em , rem , ex ,ch)
- The viewport dimensions (vw ,vh , vmin , vmax).
First percentages:
Percentages are relative only to their parents dimensions so if we have a parent div with height of 500px and width of 500px and nested inside it another div with both height and width set to 50% , the child div will be equal to 250px x 250px.
Second ems and rems:
Ems and rems are probably what you will end up using in your projects most of the time.
Both units em and rem are based on the font size attribute the only difference is from where they inherit their values.
Let’s start first with ems , ems inherit their value from the font size of the parent element so if you set the parent div element to font size of 50px then added a child div inside that parent div and set it’s font size attribute to 0.5 em , it will get the font size of the parent element which is currently 50px and then multiply it with the value of ems you applied so you will end up with 50*0.5 which is equal to 25px and and they also cascade so if you added a new child to that 25px div and set it’s font size attribute to 0.5 em it will inherit it’s value from the nearest parent then multiply it by 0.5 so you will end up with 0.5*25 = 12.5px.
Rems on the other hand inherit their value from the root element , which is a variable that is set by default in most browsers to 16px and the user can change it to control the font size of the website.
If you are using chrome go to the setting under the web content section choose Customize fonts and you will see this pop up to inform you with the current root font and enable you to change it.
Third Character size based CSS units (ex & ch):
To be honest with you i never used used these units ever and i tried to figure any reason i may need them but i cant anyway they exist and they are relatively easy to understand so there is no harm in knowing them.
ex is based on the height of the letter “X” in the font family you are using .
while the ch is based on the width of the zero in the in the font family you are using.
as you see in the following example changing the font family from serif to sans serif while keeping the font size constant changed the resulted font size dramatically.
Fourth Viewport based CSS units:
There are four units that are based on the dimensions of the viewport and they are
1. vw (Viewport Width)
2. vh (Viewport Height)
3. vmin (Viewport Minimum)
4. vmax (Viewport Maximum)
We can split the above units into to groups first
vw and vh:
Both those units divide the view port into a 100x100 units , each unit represents one percent.
vw stands for viewport width and vh stands for viewport height .
so if you declared the width of an object to 50vw it will take 50 percent of the viewport the same applies also to vh if you set the height of an object to 50vh it will take 50 percent of the viewport height.
vmin and vmax:
Both vmin and vmax use the same 100x100 units grid system i mentioned while talking about vw and vh , the only difference is that you do not specify whether you want to inherit the value from the height or the width of the view port it is specified from the unit you used for example:
if you created a div and declared it’s heigth = 5ovmin the browser will use the shorted dimension and set your height to half of it while if you used vmax the browser will pick the length of the longest dimension and set your height to half of it.
To get access to the material used in this blog post click the link below to go to the repo that contain all this source code .
