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.
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.