Font Size
The font-size property is used to control the size of text on a web page.
Font size can be specified using units such as px, em, rem, and percentages.
How Font Size Works
Example 1: Font Size in Pixels
The px unit defines a specific font size in pixels.
CSS Code
h2 {
font-size: 30px;
}Output
Welcome to CIIT Training Institute
Example 2: Font Size Using em
The em unit is relative to the font size of the parent element.
CSS Code
p {
font-size: 1.5em;
}Output
Learn CSS at CIIT Training Institute.
Example 3: Font Size Using rem
The rem unit is relative to the root HTML font size.
CSS Code
p {
font-size: 1.25rem;
}Output
CIIT Training Institute
Example 4: Different Font Sizes
Different HTML elements can use different font sizes.
CSS Code
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
p {
font-size: 18px;
}Output
CIIT Training Institute
CSS Training
Learn CSS step by step.
Common Font Size Units
| Unit | Example | Description |
|---|---|---|
px
|
20px
|
Fixed pixel size |
em
|
1.5em
|
Relative to the parent font size |
rem
|
1.25rem
|
Relative to the root font size |
%
|
120%
|
Percentage-based size |
Simple Explanation
30px → Sets the text size to 30 pixels.
1.5em → Sets the size relative to the parent element.
1.25rem → Sets the size relative to the root element.
Choosing the right unit helps create readable and responsive web pages.
Summary
The font-size property controls the
size of text. Common units include
px, em,
rem, and percentages.