Let's practice styling HTML headers with CSS:
1
Create HTML structure
Add h1, h2, and h3 elements to your HTML document
2
Style h1 element
Set color to blue, font-size to 2em, and text-align to center
3
Style h2 element
Set color to dark green, add a bottom border, and set padding
4
Style h3 element
Set color to purple, font-style to italic, and add left margin
lightbulb
Tips
Remember that CSS properties like color, font-size, text-align, border, padding, and margin can be used to style headers
/* CSS for headers */
h1 {
color: blue;
font-size: 2em;
text-align: center;
}
h2 {
color: darkgreen;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
h3 {
color: purple;
font-style: italic;
margin-left: 20px;
}
h1 {
color: blue;
font-size: 2em;
text-align: center;
}
h2 {
color: darkgreen;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
h3 {
color: purple;
font-style: italic;
margin-left: 20px;
}
Result Preview
This is an H1 Header
This is an H2 Header
This is an H3 Header