CSS Units

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Units

CSS consists of different units for expressing a length.

Many CSS properties uses “length” values, such as width, margin, padding, font size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

Use different length values,   px (pixels).

pixels (1px = 1/96th of 1in)(px*)

CSS
				
					h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

Absolute Lengths

The absolute length units are fixed and the length expressed in any of these will appear as exactly that size.

Absolute length units are not advisable to use on screen, as screen sizes vary. It is also used if the output medium is known, such as for print layout.

Centimetres(cm)

CSS
				
					h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
  font-size: 0.5cm;
  line-height: 1cm;
}

inches (1in = 96px = 2.54cm)(in)

CSS
				
					h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
  font-size: 0.2in;
  line-height: 0.5in;
}

points (1pt = 1/72 of 1in)(pt)

CSS
				
					h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
  font-size: 15pt;
  line-height: 25pt;
}

picas (1pc = 12 pt)(pc)

CSS
				
					h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
  font-size: 1.5pc;
  line-height: 3pc;
}