Table of Contents
Create header HTML |Create Header HTML CSS
HTML Structure of Simple Header:-
<!DOCTYPE htaml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Header - CodeWith Random</title>
</head>
<body>
<header class="site-header">
<div class="site-identity">
<h1><a href="#">CodeWith Random</a></h1>
</div>
<nav class="site-navigation">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
First we’re going to write html code then styling so we use some tags in body tag like div, h1, ul. li, a, h1 and don’t forget to link css file in html boilerplate after it we get a poor design but that’s mandatory start I hope that’s clear… lets start the styling…
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
a:hover{
color: rgb(179, 179, 179);
}
.site-header {
border-bottom: 1px solid #ccc;
padding: .5em 1em;
display: flex;
justify-content: space-between;
}
.site-identity h1 {
font-size: 1.5em;
margin: .6em 0;
display: inline-block;
}
.site-navigation ul,
.site-navigation li {
margin: 0;
padding: 0;
}
.site-navigation li {
display: inline-block;
margin: 1.4em 1em 1em 1em;
}
Lets start our styling doing starter styling by html reset or family-font then we give a color or text-decoration — None in <a> tag now we style our header by giving padding, border-bottom, flex and space-between change the font size of header links or margin and inline-block if you want to customize more so try and our goal is to create a good looking header in just 60 lines of code or also you need to make responsive.
Output…
How to use google font?
we has to many pre-installed fonts but they are not sufficient so we use google font for great look… and we use open sans in this project but we use open sans condensed for learning about google font.
this is super helpful. Thank you