In this tutorial you will learn about the CSS Units and its application with practical example.
Every property in the CSS has a specific value for the selector, the value for that property depends on the type of property. For many CSS Properties type of value needs to be defined in length unit, so the value comprising of a numeric/number value with a unit, The numeric value can be either an integer or a real number.The units can be either relative or absolute, if the physical properties of the output medium are known then absolute unit is better option.
Relative Units in CSS
| Unit | Description |
| em | the current font size |
| ex | height of letter x of the current font |
| px | pixels |
Absolute Units in CSS
| Unit | Description |
| mm | millimeters |
| cm | centimeters |
| in | inches |
| pt | points – 1 pt = 1/72 in |
| pc | picas – 1 pc = 12 pt |
Example :
| CSS Declaration | Output |
| p {font-size:9px;} |
Font Size 9px. |
| p {font-size:3em;} |
Font Size 3em. |
| p {font-size:3ex;} |
Font Size 3ex. |
| p {font-size:0.2in;} |
Font Size 0.2 inch. |
| p {font-size:0.5cm;} |
Font Size 0.5 cm. |
| p {font-size:12mm;} |
Font Size 12 mm. |
| p {font-size:24pt;} |
Font Size 24 pt. |
| p {font-size:2pc;} |
Font Size 2 pc. |
Percentage unit in CSS
Length values can also be defined in percentage too , percentage value can be defined as an integer, or a decimal number with a percentage character (%).
Example:
|
1 |
#content{ width: 50%;} |
A percentage value can be defined relative to or in reference to something .
