CSS Units


Unit Example Description
% width : 50%; Percentage value to define sizes in terms of parent objects
px font-size : 12px; Relative length of the unit, such as screen resolution 1024 * 768 is 1024 pixels of unit.
em line-height: 2em; Relative length units, relative to the current size, if the current text is not set, then default to the browser
ex font-size : 1.2ex; Relative length units. Relative to the height of the "x", this height is usually half the size of the font, if the current text is not set, then default to the browser
pt font-size : 1.2pt; Absolute length unit, Point
pc font-size : 20pc; Absolute length unit, Pica
in word-spacing : 0.1in; Absolute length unit, Inch
mm Absolute length unit, Millimeter
cm Absolute length unit, Centimeter


The color unit has three representations

1. Color name

Use the color name to represent the corresponding color, such as red for "red", gray for "gray" and so on.

p { color: red; }

2. RGB

Format : rgb(R,G,B)

  • R:Red, Positive integer | Percentage
  • G:Green, Positive integer | Percentage
  • B:Blue, Positive integer | Percentage

The positive integer value ranges from 0 to 255 and the percentage value ranges from 0.0% to 100.0%. The value outside the range is rounded to its nearest limit.

p { color: red; }
p { color: rgb(255,0,0); }

The above two are red color.

3. Hexadecimal

Format : #RRGGBB

  • R:Red, 00-FF hexadecimal positive integer
  • G:Green, 00-FF hexadecimal positive integer
  • B:Blue, 00-FF hexadecimal positive integer

Parameters must be two-digit.

If each parameter has the same number in both digits, the unit can abbreviated to #RGB.
For example: #FF8800 can be abbreviated as #F80.

Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.