CSS | HTML - Units of Measurements

on 05 March 2011

Various units are used used for web development in languages such as HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet) etc. Let us understand different types of measurement units in details.

There are two types of units:

  1. Relative
  2. Absolute

Relative Units

Relative units give a length relative to another length property, and are preferred since they will better adjust to different media.
Example: Pixel (px), em, percentage (%) etc..

Absolute Units

Absolute length units depends on the output medium, and so are less useful than relative units.
Example: Inch (in), Point (pt) etc..

Units of Measurements in CSS can also be divided into:

  1. Length Units
  2. Color Units

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit.

There are no spaces in a length value.For e.g. 5 pt is not a valid length value, but 5pt is valid.

When a value is set to zero there's no need to state a unit.

Units of Measurement
Unit Name Abbreviation Explanation Relative
Em Em The height of a font Yes
Ex Ex Height of the letter x in a font Yes
Point Pt 1/72 of an inch No
Pica Pc 1 pica is 12 points No
Pixel Px One dot on a screen Yes
Millimeter Mm Printing Unit No
Centimeter Cm Printing Unit (1cm=10mm) No
Inch In Printing Unit (1in=2.54cm) No
Percentage % Best Relative Measurement Yes

Color Units

In computers RBG(Red, blue, Green) and CMYK(Cyan, Magenta, Yellow, Black) are both formats are used. But in CSS and HTML only RGB is used as the format.

A color value is a keyword or a numerical RGB specification.

RGB colors are given in one of four ways:

  1. #rrggbb (e.g., #00cc00) i.e Hexadecimal values.
  2. #rgb (e.g., #0c0).
  3. rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0)).
  4. rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g.,rgb(0%,80%,0%)).

Here is a list of Hexadecimal Color Codes.


web design company said...

Thanks for ur post on simple measurement techniques for CSS,HTML.It would really a great help for newbies.

Post a Comment