CSS Size

We’ve seen various units in CSS so far used for many different purposes; we did hit and trial to find the correct dimensions of that unit for our website. 

 

But now let’s understand how units work in CSS. 

 

Absolute Units.

1. cm - centimetres (1 cm = 37.8 px)
2. mm - millimetres
3. in - inches (1 in = 96 px = 2.54cm)
4. pt - points (1pt = 1/72th of 1 in)
5. pc - picas (1pc = 1/6th of 1 in)
6. px - pixel (1px = 1/96th of 1 in)

Generally we only use pixels to set dimensions of an element.

 

Relative Units

1. em - Relative to the font size of the parent element. Eg: 5em means the size would be 5 times the current font size.
2. ex - Relative to X height of the existing font
3. ch - Relative to the width/ radius of the character “0”.
4. rem - Relative to the font size of the root element.
5. vw - Relative to 1% of the width of the viewport. (Viewport is the area of the website visible to the user.)
6. vh -  Relative to 1% of the height of the viewport
7. % - Relative to the parent element’s size.

 

Apart from this some of the other metrics used in CSS are- 

1. Opacity: Ranges from 0 to 1
2. RGB & RGBA values: 0 to 255
3. HSL & HSLA values: 0 to 360