Chapter 17. CSS: Styling Components

Footer and Bottom Bar

Footer and Bottom Bar
Tag:

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.

On this topic page, 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.

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.

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

CSS
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. The code is used to show the target design of this topic page.

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.

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

component.css
/* 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 link).

link demo code

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.

On this topic page, 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.

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.

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

CSS
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. The code is used to show the target design of this topic page.

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.

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

component.css
/* 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 link).

link demo code

Tag: