Lean how you can create a stylish header for your websites or blogs.
We use html and css codes to create headers.
These headers are responsove and good to look.
What is header in your website ?
A header in your websites or blogs is a container that is used on the top of the webpages.
A header can contain your website logo, links, or sidepanel and etc.
You can create beautiful and responsive headers using html and css.
We use to align items using html table, left, center and right.
Lets create a simple and responsive header with html table and styling with css.
HTML and CSS
<![CDATA[
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
.header-wrapper-first
{width:96%; padding:2%; background-color: green;}
.header-wrapper-first table {width:100%; text-align: center; color:white; font-size:20px;}
</style>
<div class="header-wrapper-first">
<table>
<tr>
<td>
<i class="fa fa-bars"></i>
</td>
<td>
Website.com
</td>
<td>
fa fa-home
</td>
</tr>
</table>
</div>
]]>
Output
Changing header background colors.
How to change header background color
To apply different colors to header background, we use css background-color property.
See below how you use it.
1
<style>
2
<style>
3
<style>
4
<style>
Just apply the the color in the given css code as you want.
Header background-color will be changed.
Creating a animated header using html and css code.
Let's see how you can create a animated header changing it's background colors.
HTML and CSS
<![CDATA[
<style>
.header-wrapper-animated
{width:96%; padding:2%; background-color: green; animation: animation-background 5s infinite;
}
@keyframes animation-background {
from {background-color: green;}
to {background-color:purple;}
}
.header-wrapper-animated table {width:100%; color:white; font-size:20px; text-align: center;}
</style>
<div class="header-wrapper-animated">
<table>
<tr>
<td>
<i class="fa fa-bars"></i>
</td>
<td>
Website.com
</td>
<td>
<i class="fa fa-home"></i>
</td>
</tr>
</table>
</div>
]]>