At the end of each webpage, the footer often goes unnoticed but holds significant potential. It can be effectively leveraged to encourage visitors to explore further if they are unable to locate desired information within the primary content section.
Introduction to CSS Footer
When a user desires to affix the elements at the bottom to differentiate between the top and bottom elements, they utilize a footer in CSS. Fixed footers and sticky footers represent the two variations of footers. Regardless of scrolling direction, a fixed footer remains affixed at the bottom, providing a constant anchor. In the present day, nearly all websites incorporate a fixed footer feature to ease navigation, especially when reaching the footer after scrolling through lengthy content can be cumbersome. The introduction of the sticky footer concept in Bootstrap was a response to the need for users to have quick access to footer options without prolonged scrolling. This is why fixed footers are favored by most users over movable ones, as movable footers scroll along with the page, causing potential delays.
Advantages
- The fixed footer makes it simple to reach the bottom items.
- The logic is separated from the header parts by the footer.
Why CSS instead of HTML?
Developers working with HTML need to define unique styles for different elements such as classes, ids, links, buttons, and more. However, CSS provides a more efficient approach by enabling the consolidation of shared styling rules into a single file. This file can then be linked to the HTML document using the <link> tag, simplifying the process across numerous HTML pages.
NOTE: It should be noted that CSS files are stored with the .css suffix.
How does CSS's Footer Function?
The footer within CSS functions as a design element akin to a bottom navigation bar, which can be set as either sticky or movable by implementing the syntax provided below.
Fixed footer syntax:
<style>
.footer {
position: fixed;
}
</style>
<div class="footer">
<p>Footer</p>
</div>
Movable footer syntax:
<style>
footer {
display: block;
}
</style>
<div class="footer">
<p>Footer</p>
</div>
Examples of CSS Footers
Here are a few various examples:
Example 1: A movable footer
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 {
text-align: centre;
color: green;
}
.footer {
position: block;
width: 50%;
left: 0;
bottom: 0;
color: blue;
text-align: centre;
background-color: pink;
}
.p1 {
border-style: solid;
border-color: black;
border-width: 2px;
font-size: 20px;
color: blue;
}
.p2 {
border-style: solid;
border-color: green;
border-width: 2px;
font-size: 20px;
color: purple;
}
.p3 {
border-style: solid;
border-color: violet;
border-width: 1px;
font-size: 20px;
color: black;
}
.p4 {
border-style: solid;
border-color: blue;
border-width: 1px;
font-size: 20px;
color: red;
}
div {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<h2>Example of Movable Footer</h2>
<p class="p1">Welcome </p>
<br>
<p class="p2">Let's begin</p>
<br>
<p class="p3">Hello World</p>
<br>
<p class="p4">Session starts now</p>
</div>
<div class="footer">
<p>I am a movable footer </p>
</div>
</body>
</html>
Output:
Explanation: Simply move the page up and down to observe the footer's dynamic movement as demonstrated in the instance above.
Example 2: A Movable Footer
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 {
text-align: center;
color: red;
}
.footer {
position: fixed;
width: 50%;
left: 0;
bottom: 0;
color: red;
text-align: centre;
background-color: lightblue;
}
.p2 {
border-style: solid;
border-color: pink;
border-width: 2px;
font-size: 20px;
color: blue;
}
.p4 {
border-style: solid;
border-color: green;
border-width: 2px;
font-size: 20px;
color: black;
}
.p3 {
border-style: solid;
border-color: brown;
border-width: 2px;
font-size: 20px;
color: violet;
}
.p1 {
border-style: solid;
border-color: red;
border-width: 2px;
font-size: 20px;
color: grey;
}
div {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<h2>Example of Fixed Footer</h2>
<p class="p1">Welcome </p>
<br>
<p class="p2">Hello</p>
<br>
<p class="p3">Let's begin</p>
<br>
<p class="p4">Hello world</p>
</div>
<div class="footer">
<p>This is movable footer </p>
</div>
</body>
</html>
Output:
Explanation: As demonstrated in the example, the footer remains in view regardless of the direction of scrolling, maintaining its visibility throughout.
Conclusion
The static footer and the draggable footer are two techniques for creating a footer in CSS. Initially, the footer segregates the functionality of the header from that of the footer and employs a fixed footer to conveniently navigate to the lower sections.