CSS UNITS
- CSS has several different units for expressing a length.
- Many CSS properties take "length" values, such as width,margin,padding,font-size,etc.
- Length is a number followed by a length unit, such as 10px,
2em, etc.
There are two types of css units:
- Absolute Length
- Relative Length
Absolute Length:
- It is not good for use on-screen, cause screen size varies so much depending on the device used for that page it is recommended to use for print layout and where the output medium is known.
Absolute Length Units:
- cm: centimeter
Syntax:
font-size: 0.5cm;
line-height: 0.1cm;
Relative Length:
- It is good for use on-screen, if screen size varies so much depending on the device then these relative length units are perfect because it changes with the different rendering mediums.
Relative Length Units:
em: Relative to the font size of that element.
Syntax:
font-size: 8px;
line-height: 2em;
EXAMPLE:
<!DOCTYPE html>
<html> <head> <style> h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
output
This is heading 1
This is heading 2
This is a paragraph.
This is another paragraph.
