Styling H1 to H6 Headings with CSS
Use HTML heading elements <h1> through <h6> for document structure, then use CSS to control their appearance. Do not choose a heading level merely because its browser default size looks right.
h1 {
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.15;
margin-bottom: 1rem;
}For heading semantics and hierarchy, see the HTML headings tutorial.
Shared heading styles Top ↑
h1, h2, h3 {
font-family: system-ui, sans-serif;
font-weight: 700;
color: #1f2933;
}Style levels individually Top ↑
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }Use classes for visual variants Top ↑
If two headings have the same semantic level but need different presentation, use classes instead of changing the heading level.
.section-heading--compact {
font-size: 1.5rem;
margin-block: 1rem .5rem;
}Heading accessibility Top ↑
Keep the visual style flexible, but make the heading structure reflect the content hierarchy. A heading that is visually small can still be an <h2>; CSS should control its size.
Frequently Asked Questions Top ↑
Can CSS change H1 into H2?
No. CSS can change appearance, but the HTML element still determines the heading level.
Do H1 to H6 have to get progressively smaller?
No. That is a common design pattern, not an HTML requirement.
Should I use a heading because I want bold text?
No. Use headings for section structure and CSS or appropriate text semantics for appearance/emphasis.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
