10 Jul CSS Units
Before moving further, it’s good to first work with the units used in CSS. Since, we will be using properties such as width, margin, padding, etc, so we should know what length units are available in CSS. Let’s start with CSS units.
For example, set the font size for the heading, with the unit px,
|
1 2 3 4 5 |
h1 { font-size: 14px } |
We used the CSS units in Begin with CSS lesson also. Other examples are listed below,
Here, using the units ex and px,
|
1 2 3 4 5 6 |
p { line-height: 2ex; padding: 10px; } |
Using the unit in,
|
1 2 3 4 5 |
h1 { font-size: 0.5in; } |
Generally, there are two types of length units in CSS,
Absolute Units
Here are the absolute units we’ll use in CSS,
| Absolute Unit | Name | Description |
|---|---|---|
| cm | Centimeters | Measurement in centimeters |
| mm | Millimeters | Measurement in millimeters |
| in | Inches | Measurement in inches (1in = 96px) |
| px | Pixels | Measurement in screen pixels |
| pt | Points | Measurement in points (1pt = 1/72 of 1in) |
| pc | Picas | Measurement in picas (1 pica = 12 points) |
Relative Units
Here are the relative units we’ll use in CSS,
| Relative Unit | Description |
|---|---|
| em | Font-size in em spaces. |
| ex | defines a measurement relative to a font's x-height. |
| vw | 1% of the width of the viewport |
| vh | 1% of the height of the viewport |
| vmin | 1% of viewport's* smaller dimension |
| vvmax | 1% of viewport's* larger dimension |
In this lesson, we learned about Absolute and Relative Units in CSS such as ex, px, pt, etc.
No Comments