Type of CSS Measurement Units: %, em, rem, cm, ch, ex, in, mm, px, vh, vw, pt, pc

CSS support following type of CSS measurement unit like pixels, percentage, inches etc.

CSS measurement two type absolute measurement and relative measurement.

CSS Absolute Measurement

Browser relatively measures percentage, em and rem units.

Percentage (%)

Percentage (%) measurement relative to browser or other element. Use for make website responsive design for set image pr content height width.

.heading {
  width: 30%;
  line-height: 150%;


em unit relatively measure use for typography font faces and element related properties set margin, padding etc.

.heading {
   font-size: 2em;


rem unit relatively measure same as em but its relatively to :root selector. Not support Safari or IE browser.

:root {
  font-size: 3rem;   // font size 3x of default paragraph font

Run it...   »

CSS Relative Measurement

Other all measurement are absolute measures work independently. let's check this,

Centimeters (cm)

Centimeter (cm) unit is another one CSS unit for physical measurement. Use for "print" media type style sheet. Centimeters (cm) depends on the resolution and the size of the monitor.

:root {
  font-size:1cm;   // 1cm = 37.79px

Character (ch)

Character (ch) unit is use for adjusting mono type font face. especially for changing a font-family. Not support all browsers.


em unit is measure base on x-height of font. x-height is determine for lowercase font. low priority for using this em unit.

Inches (in)

Inches (in) unit is same as centimeters (cm) and use for "print" media type style sheet.

:root {
  font-size: 1in;   // 1in = 96px

Millimeters (mm)

Millimeters (mm) define measure in millimeters unit. Use for "screen" media type style sheet.

:root {
  font-size: 1mm;   // 1mm = 3.77px and 10mm = 1cm

Pixel (px)

Pixel (px) most usable and measure browser screen pixel. Pixel (px) unit normalize measure for all devices and displays true measure.

:root {
  font-size: 20px;   // 20px = 0.52cm

Viewport (vh & vw)

vh and vw unit define for responsive typography font for deferent type of view port. Not support all browser.

Points (pt)

Point (pt) unit is use for measure physical measurement. Use for set "print" type media style sheet.

p {

Pica (pc)

Pica (pc) unit is same as Point (pt) unit just 12pt is same as 1pc.

p {

Color Value

CSS support following various type color code support like Hexadecimal color, RGB Color, color name etc..

Value Description
#XXXXXXX Hexa decimal code
color_name color name (e.g. orange)
rgb(x%, x%, x%) Red, Green, Blue value in percentage.
rgb(x,x,x) Red, Green, Blue value.