CSS Tutorial
CSS Units (px, %, em, rem, vw, vh)
CSS uses different types of units to define sizes, spacing, fonts, and layouts. These units can be absolute (fixed) or relative (depending on the parent or viewport).
1. px — Pixels (Absolute Unit)
- A fixed unit that does not scale with screen size.
- Commonly used for borders, small spacing, and precise control.
- Not recommended for responsive text.
Example
.box { width: 200px; }
2. % — Percentage (Relative to Parent)
- Size is calculated based on the parent element’s size.
- Useful for fluid, responsive layouts.
Example
.box { width: 50%; }
3. em — Relative to Parent Font Size
- 1em = font size of the parent.
- Stacks when nested (can become difficult to control).
Example
.parent { font-size: 20px; }
.child { font-size: 2em; } /* 40px */
4. rem — Relative to Root Font Size (html element)
- 1rem = font-size of the html element.
- More predictable than em because it ignores nesting.
Example
html { font-size: 16px; }
.box { padding: 2rem; } /* 32px */
5. vw — Viewport Width
- 1vw = 1% of the browser window’s width.
- Useful for responsive text and full-screen elements.
Example
.hero { font-size: 5vw; }
6. vh — Viewport Height
- 1vh = 1% of the viewport height.
- Great for fullscreen sections.
Example
.section { height: 100vh; }HTML Table for CSS Units
| Unit | Type | Description | Example |
|---|---|---|---|
px |
Absolute | Fixed size, does not scale | width: 100px; |
% |
Relative | Relative to parent size | width: 50%; |
em |
Relative | Relative to parent font size | font-size: 2em; |
rem |
Relative | Relative to root (html) font size |
padding: 1.5rem; |
vw |
Relative | 1% of viewport width | font-size: 5vw; |
vh |
Relative | 1% of viewport height | height: 100vh; |