Footer and Bottom Bar
The footer and bottom bar are components placed at the end of each web page. When you implement the bottom bar, the bar is usually displayed at the bottom of the screen regardless of the scroll position.
In this lesson, we'll explain how to implement the fixed position bottom bar with a footer. For the bottom bar, we'll add buttons with links to the previous page and the next page.
This is the target design of the footer and bottom bar.
In this case, we wrap the bottom bar with the footer tags. To create buttons, we use <a> tags with the classes already defined before in this chapter. As footer text, we set the course name. This is an example of HTML code.
<footer>
<div class="btn-group">
<a href="chapter16.html" class="btn-previous">←</a>
<a href="chapter17.html" class="btn-next">→</a>
</div>
<p>HTML & CSS Introduction</p>
</footer>
Position: fixed and bottom: 0
To style the background of the footer area and footer text, add CSS code. To fix the position of the footer section at the bottom of the screen, set position: fixed and bottom: 0. We'll explain the position property in a more comprehensive way in the next course. You also need CSS code for buttons that have already been explained before. This is an example of CSS code.
footer{
width: 100%;
height: 50px;
background-color: azure;
margin: 0px;
padding-top: 5px;
text-align: center;
position: fixed;
bottom: 0;
}
footer p{
color:#006e78;
font-size:0.8rem;
margin: 5px;
padding:0;
}
.btn-group{
display: flex;
justify-content: center;
list-style: none;
gap: 5px;
}
.btn-previous{
background-color:#2197A2;
color: white;
border-style: none;
width: 60px;
height: 25px;
font-size: 1rem;
font-family: roboto, sans-serif;
border-radius: 25px 0px 0px 25px;
text-decoration: none;
text-align: center;
line-height: 25px;
}
.btn-next{
background-color:#2197A2;
color: white;
border-style: none;
width: 60px;
height: 25px;
font-size: 1rem;
font-family: roboto, sans-serif;
border-radius: 0px 25px 25px 0px;
text-decoration: none;
text-align: center;
line-height: 25px;
}
Practice
Objective:
Create and style a footer and bottom bar and fix the position at the bottom
1. Update the body section of the HTML file
Add the code below in the <body> section of the chapter17.html file.
As the footer section will be fixed at the bottom, the main content may be hidden under the footer section. To avoid this situation, add two line breaks (<br>) before the code for the footer section.
<h2 style="text-align: center;">Footer</h2>
<p style="text-align: center;">See the bottom of this page</p>
<br>
<br>
<!--Footer-->
<footer>
<div class="btn-group">
<a href="chapter16.html" class="btn-previous">←</a>
<a href="chapter18.html" class="btn-next">→</a>
</div>
<p>HTML & CSS Introduction</p>
</footer>
<!--End footer-->
2. Update the CSS code
Open the component.css and add new code to style the footer section and footer text.
/* Footer */
footer{
width: 100%;
height: 50px;
background-color: azure;
margin: 0px;
padding-top: 5px;
text-align: center;
position: fixed;
bottom: 0;
}
footer p{
color:#006e78;
font-size:0.8rem;
margin: 5px;
padding:0;
}
3. Check the result with a browser
Open chapter17.html with a browser. You can see that the bottom bar and footer text are displayed at the bottom regardless of the scroll position.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.
More Topics to Explore
Chapter 18. Completing Website Development
text-decoration
HTML Document Structure
