Create Header HTML | Create Header HTML CSS

Tushar Sharma 1 Comments

Create header HTML |Create Header HTML CSS

create header html

Hello, guys welcome to Code With Random blog, today we learn How to create header using  html & css  . In this project we learn topic like how to make responsive header, also learn how to add Google font in our website or in a project. and many more things about sidebars.

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...

Output...

html header output
Our HTML Output 

Styling of Simple Header:-

 @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.

Step 1 -> Search Google Font on Search Engine like Google, Bing, Safari, etc.
Step 2 -> Click on the first link Google Fonts
Step 3 -> When Google Font Site opens then search font you want to work with in above search box.
Step 4 -> Then click on font and a side bar appears gives option to add selected font in your site.
Options -> 1. Link the given cdn link to html file in head tag
                   2. Import using url to stylesheet than code in font family property
Step 5 -> Select the class or id you want to add font style than save code.
Output -> Fonts are changed

Hope you like this post and enjoy it. If we did any mistake please comment it down so this help full for also our users. Thank you for reading.

Written by Tushar Sharma

Team Codewith_Random
Tags

1 Comments

Post a Comment

Previous Post Next Post