Step 3: Header Tutorial
This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.
Headers - Step 3.1
In Step 3.1, CSS3 style is applied to the "nav" bar. style will be applied to the links in the later steps.
This is how the nav bar will look like.
The style is provided below with HTML comment explanation.
/* Navavigation Bar */
.pageHeader nav {
background: #2BA6CB; /* Sets light blue background */
height: 40px; /* Sets the height to 40px, otherwise the nav bar will look like a line */
line-height: 30px; /* It makes the links to appear in the middle */
margin: 0 auto 30px auto;
text-align: center;
border-radius: 5px; /* Rounded Corner */
-moz-border-radius: 5px; /* For Mozilla browsers, same rounded corner */
-webkit-border-radius: 5px; /* FOr Safari 5 and below, same rounded corner */
}
Headers - Step 3.2
In Step 3.2, CSS3 style is applied to the links inside nav bar.
This is how the nav bar will look like.
The style is provided below with HTML comment explanation.
.pageHeader nav ul {
margin: 0 auto;
}
/* Styles for Links */
.pageHeader nav ul li {
float: left;
display: inline; /* Makes the links to display horizontally */
}
.pageHeader nav a:link, .pageHeader nav a:visited {
color: #fff; /* Sets the color of the links to white */
display: inline-block; /* Makes the links to be displays as blocks */
height: 30px;
padding: 5px 23px; /* Sets space between links */
text-decoration: none;
}
Headers - Step 3.3
In Step 3.3, CSS3 style is applied to the link hover and link active properties.
The style is provided below with HTML comment explanation.
.pageHeader nav a:hover, .pageHeader nav a:active,
.pageHeader nav .active a:link, .pageHeader nav .active a:visited {
background: #2795B6; /* Changes the background color to dark blue */
color: #fff;
}
Header Step is now complete
Now the website will look like this. Click on the image to view the website in new tab.
