CSS units define the size, spacing, position, and dimensions of elements.
Units are commonly used for:
CSS units are divided into:
A CSS value consists of a number and a unit.
Example:
width: 300px;
300 → Value
px → Unit
Absolute units always have a fixed size.
They do not depend on the parent element or screen size.
px)The most commonly used CSS unit.
h1 {
font-size: 32px;
}
Example:
.card {
width: 300px;
}
Advantages:
Disadvantages:
cm)width: 10cm;
Represents physical centimeters.
Rarely used on websites.
mm)width: 50mm;
Rarely used in web design.
in)width: 2in;
Mostly used for printing.
pt)Common in printed documents.
font-size: 12pt;
pc)font-size: 1pc;
1pc = 12pt
Rarely used.
| Unit | Meaning |
|---|---|
px |
Pixels |
cm |
Centimeters |
mm |
Millimeters |
in |
Inches |
pt |
Points |
pc |
Picas |
Relative units depend on another value.
They are widely used in responsive web design.
%)Relative to the parent element.
.container {
width: 100%;
}
Example:
.card {
width: 50%;
}
If the parent is 1000px wide:
50% = 500px
Relative to the font size of the parent element.
Example:
.parent {
font-size: 20px;
}
.child {
font-size: 2em;
}
Result:
40px
Spacing example:
padding: 2em;
Relative to the root (html) font size.
Example:
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
Result:
32px
Unlike em, rem always uses the root font size.
Common values:
1rem = 16px
1.5rem = 24px
2rem = 32px
3rem = 48px
Relative to the browser width.
width: 50vw;
Example:
.hero {
width: 100vw;
}
Creates a full-width section.
Relative to the browser height.
height: 100vh;
Example:
.hero {
height: 100vh;
}
Commonly used for hero sections.
Uses the smaller viewport dimension.
width: 20vmin;
Uses the larger viewport dimension.
width: 20vmax;
Relative to the width of the character 0.
Useful for readable text containers.
width: 60ch;
Example:
.article {
max-width: 70ch;
}
| Unit | Relative To |
|---|---|
% |
Parent Element |
em |
Parent Font Size |
rem |
Root Font Size |
vw |
Viewport Width |
vh |
Viewport Height |
vmin |
Smaller Viewport Dimension |
vmax |
Larger Viewport Dimension |
ch |
Character Width |
Absolute:
width: 300px;
Always:
300px
Relative:
width: 50%;
Depends on the parent element.
| Absolute | Relative |
|---|---|
| Fixed | Flexible |
| Less Responsive | Responsive |
| Easier Initially | Better Long-Term |
px |
rem, %, vw, vh |
CSS functions perform calculations and create dynamic values.
calc()Performs mathematical calculations.
width: calc(100% - 50px);
Example:
height: calc(100vh - 80px);
Common use:
Viewport Height
− Navbar Height
min()Returns the smaller value.
width: min(100%, 1200px);
Meaning:
Use whichever is smaller.
max()Returns the larger value.
width: max(50%, 500px);
Meaning:
Always at least 500px.
clamp()Defines:
Syntax:
clamp(min, preferred, max)
Example:
font-size:
clamp(
16px,
4vw,
40px
);
Meaning:
Minimum → 16px
Responsive Scaling
Maximum → 40px
Responsive typography:
h1 {
font-size:
clamp(
2rem,
5vw,
4rem
);
}
var()Accesses CSS variables.
Define:
:root {
--primary:
#2563EB;
}
Use:
button {
background:
var(--primary);
}
url()Loads external resources.
background-image:
url("hero.jpg");
| Function | Purpose |
|---|---|
calc() |
Perform calculations |
min() |
Smallest value |
max() |
Largest value |
clamp() |
Responsive sizing |
var() |
CSS variables |
url() |
Load resources |
Responsive typography:
h1 {
font-size:
clamp(
2rem,
5vw,
4rem
);
}
Responsive container:
.container {
width:
min(
100%,
1200px
);
}
Layout calculation:
.main {
height:
calc(
100vh - 80px
);
}
Typography:
font-size: 1rem;
Layout width:
width: 100%;
max-width: 1200px;
Full-screen sections:
height: 100vh;
Responsive text:
font-size:
clamp(
1rem,
4vw,
3rem
);
Modern CSS primarily uses responsive units and functions.
font-size: 1rem;
width: 100%;
height: 100vh;
font-size:
clamp(
1rem,
4vw,
3rem
);
width:
calc(
100% - 2rem
);
For modern responsive websites:
rem for typography.% for widths.vh and vw for viewport sizing.clamp() for responsive text.calc() for dynamic layouts.