CSS
How to Add a Header and Footer in HTML Using CSS?
A well-structured website includes a header and footer to improve navigation and provide essential information. The header typically contains the website’s logo, navigation menu, and branding, while the footer includes contact details, copyright notices, and useful links.
In this blog, we will walk through how to add a header and footer in HTML and style them using CSS for a professional look.
1. Basic HTML Structure for Header and Footer
First, let’s create a simple HTML layout with a header, main content, and a footer.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website with Header & Footer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to My Website</h2>
<p>This is the main content section where your webpage content appears.</p>
</main>
<footer>
<p>© 2024 My Website | All Rights Reserved</p>
</footer>
</body>
</html>
2. Styling the Header and Footer with CSS
Now, let’s add CSS to style the header and footer to make them visually appealing.
CSS Code (styles.css):
/* Reset default margin & padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Styling the Header */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 10px 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Styling the Main Content */
main {
padding: 20px;
text-align: center;
}
/* Styling the Footer */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
3. Explanation of CSS Styling
- The header has a dark background (
#333), white text, and a centered title. - The navigation menu is a horizontal list with links styled in white.
- The footer has the same dark background as the header and is fixed at the bottom.
- The main content has some padding for readability.
4. Making the Header & Footer Responsive
For mobile-friendliness, add media queries:
@media (max-width: 768px) {
nav ul {
display: flex;
flex-direction: column;
text-align: center;
}
nav ul li {
display: block;
margin: 10px 0;
}
}
This ensures that on smaller screens, the navigation menu stacks vertically.
Conclusion
Adding a header and footer in HTML with CSS is simple and enhances website structure. We used:
✅ HTML structure for a header, main content, and footer.
✅ CSS styling to make them visually appealing.
✅ Media queries to ensure responsiveness.