Creating a header in HTML and CSS involves structuring the HTML markup and styling it with CSS to achieve the desired look. A header typically contains a navigation menu, a logo, and possibly other elements. Here’s a simple example of how you can create a basic header:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Header Example</title>
</head>
<body>
<header class="main-header">
<div class="logo">
<img src="logo.png" alt="Logo">
</div>
<nav class="navigation">
<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>
<!-- Main content goes here -->
</main>
</body>
</html>
CSS (styles.css):
/* Reset default margin and padding */
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
/* Style for the header */
.main-header {
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
}
/* Style for the logo */
.logo img {
width: 100px;
height: auto;
}
/* Style for the navigation menu */
.navigation ul {
list-style: none;
display: flex;
}
.navigation li {
margin-right: 20px;
}
.navigation a {
text-decoration: none;
color: white;
font-weight: bold;
}
/* Add responsive styles for smaller screens */
@media (max-width: 768px) {
.navigation ul {
flex-direction: column;
align-items: flex-start;
}
.navigation li {
margin-right: 0;
margin-bottom: 10px;
}
}
In this example, the HTML structure creates a header containing a logo and a navigation menu. The CSS styles define the appearance of the header, logo, and navigation menu. The @media query adds responsive styles for smaller screens, adjusting the navigation menu’s layout.
Remember to replace the logo.png with your actual logo image and adjust the styles according to your design preferences. This is a basic example, and you can further customize and enhance the header by adding additional elements and more complex styling.
Leave a Reply