Welcome to the CSS tutorial, and today we will discuss CSS units. CSS units are nothing but a way to express length. A CSS units have provided options to a web developer to use.

learn css units

CSS units – Definition

The units in which length is measured, either absolute or relative units.

Points to remember

  • Never forget to specify CSS units, if you will, then ready to face error.
  • The value “zero” means 0 in any case.
  • Units have nothing to do with the properties, that means, any property can use any unit.

Types of CSS Units

  • Relative length units
  • Absolute length units


Relative Length units

Relative length units, describe the physical dimensions relative to another length property. Let’s see the relative units and their descriptions:

Units                                              Description

em                                The height of the element’s font.

ex                                  it is the height of the letter – X.

px                                  pixels ( 1px = 1/96 X 1 in)

rem                                it allows font size and other properties to be                                                                                     specified against the root element

There are other relative CSS units, like ch,vh,vmin etc. It is not that much important and that is why we have not covered them as well.

Absolute length units

Absolute length units describe fixed physical dimensions. These units are useful when the parameters of the medium are known to the developer.

Note: It is not recommended for use on screen, because screen sizes vary.

Now let’s see the Absolute CSS units and its descriptions:
Units                                       Descriptions

cm                                               Centimeters

in                                                  inches

mm                                               millimeters

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

pc                                                  picas (1 picas is equal to 12 points)

Implement CSS units

Now we will try to apply both relative and absolute CSS units in our example. You can clearly see, we have used cm (absolute length unit) and px( relative length unit).

<html>

<head>

<style>

h2 {font-size: 1.5cm;}

h3 {font-size: 84px;}

</style>

</head>

<body>

<h2>Sharp lesson heading 1</h2>

<h3>Sharp lesson heading 2</h3>

</body>

</html>

Above example clearly shows the use of CSS units for the same property, we have set h2 tag’s font-size to 1.5 centimeters and h3 tag’s font-size to 84 pixels.

When you will run this program, then you will clear with two things.

  • CSS properties can use any CSS units, which we did in the above example.
  • How easy is CSS units to understand and apply to web pages.

Browser Support

Let’s see browsers who support length units, this is report is for the desktop
Length Unit        IE        Chrome           Opera               Safari

Em                           Y             Y                       Y                          Y

Ex                             Y             Y                       Y                          Y

Rem                   N(IE7,8)        Y                       Y                          Y

Ch                       N(IE7,8)        N*                     N**                      Y

Cm                           Y              Y                       Y                           Y

In                             Y              Y                       Y                           Y

Mm                          Y              Y                       Y                           Y

Pc                             Y              Y                       Y                           Y

Pt                              Y              Y                       Y                           Y           

N(25win, 25mac)

** N(12.14Mac,win)

Conclusion

Now you must have understood what CSS units are, and why they are used for? Just practice above said CSS units and to perfectly implement it with CSS properties.


What next? Next is CSS colors, which is important to make your web document more presentable.


If you liked our content on CSS units, then share it with your friends, like us, on Facebook or you can link to us as well.