Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to change the font size using CSS?
CSS font-size property is used to control the size of text in HTML elements. You can specify font sizes using various units like pixels, percentages, keywords, or relative units like em and rem.
Syntax
selector {
font-size: value;
}
Possible Values
| Value Type | Description | Example |
|---|---|---|
| Pixels (px) | Absolute size in pixels | 16px |
| Keywords | Predefined size keywords | small, medium, large |
| Percentages (%) | Relative to parent element | 120% |
| Em/Rem | Relative units | 1.2em, 1.5rem |
Example 1: Using Pixel Values
The following example demonstrates changing font size using pixel values
<!DOCTYPE html>
<html>
<head>
<title>Font Size with Pixels</title>
<style>
.small-text {
font-size: 12px;
}
.medium-text {
font-size: 18px;
}
.large-text {
font-size: 24px;
}
</style>
</head>
<body>
<h1>Font Size Examples</h1>
<p class="small-text">This is small text (12px)</p>
<p class="medium-text">This is medium text (18px)</p>
<p class="large-text">This is large text (24px)</p>
</body>
</html>
Three paragraphs with different font sizes: small (12px), medium (18px), and large (24px) text displayed below the heading.
Example 2: Using Font Size Keywords
CSS provides predefined keywords for common font sizes
<!DOCTYPE html>
<html>
<head>
<title>Font Size Keywords</title>
<style>
.x-small { font-size: x-small; }
.small { font-size: small; }
.medium { font-size: medium; }
.large { font-size: large; }
.x-large { font-size: x-large; }
</style>
</head>
<body>
<h1>Font Size Keywords</h1>
<p class="x-small">Extra small text</p>
<p class="small">Small text</p>
<p class="medium">Medium text (default)</p>
<p class="large">Large text</p>
<p class="x-large">Extra large text</p>
</body>
</html>
Five paragraphs displaying progressively larger font sizes from extra small to extra large using CSS keywords.
Example 3: Using Relative Units (Em and Rem)
Em units are relative to the parent element's font size, while rem units are relative to the root element
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Sizes</title>
<style>
body { font-size: 16px; }
.container { font-size: 20px; }
.em-text { font-size: 1.5em; }
.rem-text { font-size: 1.5rem; }
</style>
</head>
<body>
<h1>Relative Font Units</h1>
<div class="container">
<p>Container text (20px)</p>
<p class="em-text">Em text (1.5em = 30px)</p>
<p class="rem-text">Rem text (1.5rem = 24px)</p>
</div>
</body>
</html>
A container with three paragraphs showing how em units scale relative to the parent (30px) while rem units scale relative to the root element (24px).
Conclusion
The CSS font-size property offers flexible control over text sizing using pixels for precise control, keywords for standard sizes, or relative units for responsive designs. Choose the appropriate unit based on your design requirements and accessibility needs.
Updated on: 2026-03-15T16:17:37+05:30
1K+ Views
Advertisements