Introduction to CSS Header Design
A website has a layout and is mainly divided into header, footer, menus, and content. In this, we will see about header section of the website layout. A header is located at the top of the website layout which contains a logo or website name and also contains some brief information about the website content. The header section of the website is a very important part while designing the website, which is used to grab the customer’s attention and the customers establish the connections with such websites very soon. Therefore header design of the website should be unique and appealing to the customers or users.
Functions of Header Designing in CSS
In this article, we will see how to design a header of the website. The header is usually laced at the top of the page which is the crucial part of the website. Headers and footers are key elements of the website. Headers are more important as the customer’s visit is more often on the header before going forward in the website content and footer. Headers most recommendable header size in the website designing is 1024px ×768px. Let us see a simple example of the header of the website.
Examples to Implement of CSS Header Design
Below are the examples of CSS Header Design:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training </title>
<style>
body {
font-family: Times New Roman;
margin: 0;
}
.header {
padding: 10px;
text-align: center;
background: cyan;
color: black;
font-size: 20px;
}
.content {padding:20px;}
</style>
</head>
<body>
<div class="header">
<h1>CSS Header designing </h1>
<p>We can write here the header section </p>
</div>
<div class="content">
<h1> Website main content </h1>
<p>EDUCBA is an online training provider which offers you training programs or courses across any field which you wish to learn and excel on. </p>
</div>
</body>
</html>
Output:
Explanation: In the above program, we can see we have designed the header of the website with different styling properties of CSS. This is how the header section of the website. There is another property in CSS which you can create a fixed or sticky header using CSS fixed positioning such as CSS position property with the value fixed or sticky. Let us see an example below.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training </title>
<style>
body{
padding-top: 60px;
padding-bottom: 40px;
}
.fixed-header
{
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
}
.fixed-header{
top: 0;
}
.container{
width: 80%;
margin: 0 auto;
}
nava{
color: #fff;
padding: 7px 25px;
display: inline-block;
}
</style>
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
<a href="#"> Home </a>
<a href="#"> Articles </a>
<a href="#"> Directory </a>
<a href="#"> Events </a>
<a href="#"> About Us</a>
</nav>
</div>
</div>
<div class="container">
<p> EDUCBA is a leading global provider of skill based online education. It offers amazing 1700+ courses across 10+ verticals prepared by top notch professionals from the industry which are job oriented skill based programs demanded by the industry. Through its online feature you can learn at any time & anyplace so plan your study to suit your convenience & schedule. </p>
</div>
</body>
</html>
Output:
Explanation: In the above program, we have seen the CSS property position in the header section which we have declared the value as “fixed” you can see in the above screenshot. As we know there are many ways to create the header which can be created either static or responsive headers. Responsive headers are defined as to which they can adjust to any screen sizes. There are options to create a responsive header and they are designed as shown in the below example.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial;
}
.header {
overflow: hidden;
background-color: cyan;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
line-height: 25px;
border-radius: 5px;
}
.headera.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: grey;
color: black;
}
.headera.active {
background-color: green;
color: white;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Articles</a>
<a href="#about">About Us</a>
</div>
</div>
<div style="padding-left:20px">
<h1>CSS Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p> EDUCBA is a leading global provider of skill based online education. It offers amazing 1700+ courses across 10+ verticals prepared by top notch professionals from the industry which are job oriented skill based programs demanded by the industry. </p>
</div>
</body>
</html>
Output:
Explanation: In the above program, we have created a responsive header which means as an how the size of the browser increases or decreases even the header also resize itself accordingly, and hence the header is known as a responsive header. We should note that if we specify the fixed width for the header then it won’t be responsive so it is better to use center alignment. We can also see we have declared media query in which we have to code for responsive header designing and we have managed the max-width with “500px” and this we have done using two languages HTML and CSS.
Conclusion
In this article, we have seen how to create a header in CSS. In this article, we conclude that the header is a very crucial and important section of any website layout. As we saw as the header is the main section that attracts any customers and hence the designing of the effective header is very important. We have also seen how to create a header using position property of CSS which provides values like sticky or fixed. In the end, we have discussed a responsive header for which we use media query for creating header a responsive for which we can resize the header as to the size of the browser.
Recommended Articles
This is a guide to CSS Header Design. Here we discuss a brief overview on CSS Header Design and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
