CSS Units

Prev
Next

CSS Units

CSS Units contains different units which are ways to express the length.

The properties like width, height, font-size, margin, padding, border, color, background-size etc must have a valid unit to describe its length.

On a higher level, Units can have –

  1. Numeric Values – Length has a number followed by a unit like 10px, 5mm, 8in etc. There must not be any space between the number and the unit i.e. 4 px is wrong because there is a space between 4 & px
  2. Percentages – Value will be in percent like 70%, 30% etc

On a lower level, units consists of –

  1. Absolute length – Fixed Length value
  2. Relative length – Length relative to the device

Let us understand both of these in detail.

CSS UNITS

1. Absolute Length

Absolute lengths are those length units whose value is fixed across all the devices.

These lengths are not good for low-resolution display screens like computers as most of the computers have low-resolution comparatively and ideally you should avoid using them on your website(except “px” which is a decent length unit)

The widely used absolute length units are –

  1. px – Stands for Pixels
  2. pt –  Full form is Points
  3. pc – Shorthand for Picas
  4. in –  Stands for Inches
  5. cm – Full form for Centimeters
  6. mm – Shorthand for millimeters
  7. q   – Stands for Quarter millimeters (Rarely used in websites)

Pixels(px) length

The px stands for pixels. This is mostly designed for CSS and it is one of the most used absolute length.

Although it comes under absolute lengths it’s length vary relative to the device types and that is the reason, even W3C recommends to use the pixel unit for display screen. On a few occasions, you can also use it for print devices like printers as well.

96px = 1in

The Syntax of ‘px’ length:
property_type: mpx ;

Where “m” can be any numeric value with decimal or without decimal.

For example:
width: 5px;
height:10px;
margin:3px;

Example of length in pixels(px)

.p-px {
 font-size: 15px;
 color:green;
}
Run the Code

Length in (Points)pt

The pt stands for points. 

W3C does not recommend the Points length unit for display screen but recommend this for print devices like printers.

12pt = 1pc

The Syntax of ‘pt’ length:
property_type: xpt ;

Where “x” can be any numeric value with decimal or without decimal.

For example:
width: 72pt;
height:12pt;

Example of length in points(pt)

.p-pt {
 font-size: 20pt;
 color:green;
}
Run the Code

Length in Pica(pc)

The pc stands for pica or picas.

W3C does not recommend the Pica/s length unit for display screen but recommend this for print devices like printers.

1pc = 12pt
6pc = 2.54cm
6pc = 1in

The Syntax of ‘pc’ length:
property_type: npc ;

Where “n” can be any numeric value with decimal or without decimal.

For example:
width: 6pc;
height:1pc;

Example of length in Pica(pc)

.p-pica {
 font-size: 3pc;
 color:green;
}
Run the Code

Centimeter(cm) length

The cm stands for centimeter. It is widely used for daily use purposes but is used less in website development.

W3C does not recommend the Centimeter length unit for display screen but recommend this for print devices like printers.

1cm = 10mm
2.54cm = 1in

The Syntax of ‘cm’ length:
property_type: acm ;

Where “a” can be any numeric value with decimal or without decimal.

For example:
width: 3cm;
height:2.5cm;

Example of length in centimeter(cm)

.p-cm {
 font-size: 1cm;
 color:green;
}
Run the Code

Length in millimeter(mm)

The mm stands for millimeter. It is 1/10th of a centimeter

W3C does not recommend the millimeter length unit for display screen but recommend this for print devices like printers.

10mm = 1cm
25.5mm = 1in

The Syntax of length in mm:
property_type: bmm ;

Where “b” can be any numeric value with decimal or without decimal.

For example:
width: 20mm;
height:15mm;

Example of length in millimeter(mm)

.p-mm {
 font-size: 4mm;
 color:green;
}
Run the Code

Length in Inches(in)

The in stands for inches. 

W3C does not recommend the Inch unit for display screen but recommend this for print devices like printers.

1in = 96px
1in = 2.54cm

The Syntax of ‘in’ length:
property_type: zin ;

Where “z“ can be any numeric value with decimal or without decimal.

For example:
width: 0.5in;
border-width: 0.1in

Example of Length in Inches(in)

.p-in {
 font-size: 0.5in;
 color:green;
}
Run the Code

Relation between in, cm, mm, pt, pt and px

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

2. Relative Length

As the name suggests, Relative length units are those lengths which are relative to another length.

Relative lengths are those length units whose values are NOT fixed across all the devices.

Relative lengths are good for low-resolution display screens like computers screens.

The widely used relative length units are –

  1. em – Relative to the font-size of the current element
  2. ex –  Relative to the font’s x-height
  3. % – Relative to the enclosing parent element in percent
  4. ch – Relative to the width of the digit “0”
  5. rem – Break it like r+em i.e. Root em. Relative to the font-size of the root element of the HTML document
  6. vw – Relative to 1% of the width of the viewport (Size of the browser)
  7. vh – Relative to 1% of the height of the viewport (Size of the browser)
  8. vmin – Relative to 1% of the width or height of the viewport whichever is smaller between vw & vh
  9. vmax – Relative to 1% of the width or height of the viewport whichever is bigger between vw & vh

CSS em unit

The em does not have a full form. It is the unit which is relative to the font-size of the current element so this may be different for each element of the HTML document.

Suppose, you have an element with font-size as 2cm, then 1em for this element will be 2cm. Similarly, if you have another element with font-size of 3in, then 1em for this element will be 3in.

For bigger screens, the font-size will look bigger while for smaller screens, the font-size will be relatively smaller.

This is the only unit which W3C recommends for display screen as well as print devices like printers.

The em unit is commonly used with padding, margin, text-indent etc.

The Syntax of ’em’ unit:
property_type: aem ;

Where “a“ can be any numeric value with decimal or without decimal.

For example:
text-indent: 3em;
margin: 2in

Example of 'em' unit

div {
 font-size: 40px;
 background: red;
}
.a { 
 font-size: 1em;
 width: 8em;
 background: yellow;
}
.b {
 font-size: 0.5em;
 background: blue;
}
Run the Code

Example of 'em' unit when font-size of the current element is not set

.p-cm {
 font-size: 1cm;
 color:green;
}      
.p-em {
 font-size: 2.37em;
 color:green;
}
.p-px {
 font-size: 37.92px; /*2.37 * 16px */
 color:green;
}
Run the Code

CSS ex length

The ex unit is relative to the x-height of a font.

The x-height is like the height of lowercase letters like x, a, c, m, or o which are of the same size.

This is rarely used and W3C does not recommend this for display screens as well as for printers.

The Syntax of ‘ex’ length:
property_type: bex ;

Where “b“ can be any numeric value with decimal or without decimal.

For example:
width: 2ex;

Example of 'ex' length

p { 
 line-height:16px;
 font-size: 40px;
 margin: 15px;
}

mark {
 font-size: 1ex;	  
}  
   
span { 
 font-size: 2ex;	 
}
Run the Code

Length in Percentage(%)

The % unit is relative to the enclosing parent element in percent.

Suppose, the width of the parent element of the current element is 100px. Now, if you define the width of the current element as 80%, then the value of the width will be 0.8*100px = 80px.

you can use this unit in multiple CSS properties as there is no fixed rule but one place where it is used excessively is %keyframes of animations.

The Syntax of ‘%’ length:
property_type: x% ;

Where “x” can be any numeric value with decimal or without decimal.

For example:
width: 20%;

Example of '%' length

.parent {
 font-size: 50px;
 background: yellow;	  
} 

.child { 
 font-size: 60%;
 background: green;		 
}
Run the Code

CSS ch Unit

The ch unit is relative to the width of the number “0”.

The Syntax of ‘ch’ length:
property_type: ych ;

Where “y“ can be any numeric value with decimal or without decimal.

For example:
width: 2ch;

Example of 'ch' Unit

body {
 font-size:40px;
 background: gray;
}

.a {
 font-size:1ch;
 background: green;
}

.b {
 font-size:2ch;
 background: blue;
}

.c {
 font-size:3ch;
 background: orange;
}
Run the Code

CSS rem

The rem unit is the root em. It is relative to the default font-size of the root element of the HTML document.

So, if the font size of the root element is 18px, then 1rem = 18px which will be same for all the elements which are defined with rem unit.

It became a part of CSS in 2013 and is even better than em but some older browsers do not support this.

In coming years, this will be the most popular unit of measurement as it directly depends on the base font-size.

The Syntax of ‘rem’ unit:
property_type: krem ;

Where “k“ can be any numeric value with decimal or without decimal.

For example:
width: 5rem;

Example of 'rem' unit

html {
 font-size:18px;
 background: yellow;
}

.a {
 font-size:1rem;
 background: green;
}

.b {
 font-size:2rem;
 background: blue;
}

.c {
 font-size:3rem;
 background: orange;
}
Run the Code

Example of 'rem' when font-size of the root is not set

.a {
 font-size:1rem;
} 

.b {
 font-size:16px;
}

.c {
 font-size:2rem;
}

.d {
 font-size:3rem;
}
Run the Code

CSS vw length

The vw unit is the relative unit which is 1% of the width of the viewport and the viewport is the size of the browser window. It differs from browsers to browsers.

In simple terms, it is 1/100th of the width of the viewport.

This means that vw unit value will keep on changing once you keep changing the width of the browser window.

The Syntax of ‘vw’ length:
property_type: xvw ;

Where “x“ can be any numeric value with decimal or without decimal.

For example:
width: 10vw;

Example of 'vw' length

.p-vw {
 font-size: 8vw;
 color:green;
}
Run the Code

vh length

The vh unit is the relative unit which is 1% of the height of the viewport (size of the browser window).

In simple terms, it is 1/100th of the height of the viewport.

vh is not supported in some old browsers.

The Syntax of ‘vh’ length:
property_type: xvh ;

Where “x“ can be any numeric value with decimal or without decimal.

For example:
width: 10vh;

Example of 'vh' length

.p-vh {
 font-size: 14vh;
 color:green;
}
Run the Code

vmin & vmax length

The vmin is a relative length which will be the minimum of  vw & vh so it will be 1% of the width of the viewport (vw) if vw is smaller than vh else it will be 1% of the height of the viewport (vh).

Similarly, the vmax is a relative length which will be the maximum of  vw & vh so it will be 1% of the width of the viewport (vw) if vw is larger than vh else it will be 1% of the height of the viewport (vh).

The Syntax of ‘vmin’ length:
property_type: avmin ;

The Syntax of ‘vmax’ length:
property_type: bvmax ;

Where “a“ & “b” can be any numeric values with decimal or without decimal.

For example:
width: 10vmin;
height: 10vmax;

Example of 'vmin' & 'vmax' length

.vmin {
 font-size: 6vmin;
 color:green;
}	

.vmax {
 font-size: 6vmax;
 line-height:12px;
}
Run the Code

unitless length

You can skip the unit if the length can be unit-less.

For Example:
If you want to set the padding as 0px or 0cm etc, then you can skip the unit and directly set as 0 like padding: 0 or margin: 0.

Similarly, for line-height:1.8 means that the height of the text will be 1.8 times the font-size i.e. 1.8*font-size.

A note about which unit to use

There is no fix rule that you must use absolute units or relative units but W3C does recommend below-

  • For Display Screens – W3c recommends using em or px or %. You can also use ex occasionally.
  • For Print Devices – W3c recommends using em, cm, mm, in, pt, pc, %. Occasionally, you can also use px, ex.
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!