LAST UPDATED: AUGUST 5, 2021
How to style a header using CSS?
The headers are the first thing that the viewers see when visiting a website. So, styling the header is very important in web designing. We can style the header using CSS properties.
CSS properties to style header
To customize the header elements using the CSS properties, we can change the font size of header text using font-size property, change the background color of the header container using background-color property, set the width and height of the header container, add padding between the header components and so on.
Example: Style header using CSS
In this program, we have used various CSS properties to style the header.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.header {
width: 100%;
height: 200px;
background-color: teal;
text-align: center;
}
h1 {
padding-top: 50px;
font-size: 25px;
font-family: cursive;
color: white;
}
</style>
</head>
<body>
<div class="header">
<h1>Styling the header</h1>
<p> Here we have used list of properties to style header </p>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Style header using CSS
We can customize the header in various ways using CSS properties. In the example given below, we are going to add background-image to the header element. We have also added the opacity to the header text.
Conclusion
In this tutorial, we have learned to style the headers using CSS properties. The most common properties used to style headers are back-ground color, font-size, text-align, padding, margin, etc. You can practice your own to make the header more customize using CSS.
