CSS Footer

At the bottom of every page, the footer is one of a website's most underrated areas. Despite this, it may be utilised to persuade readers to continue on your website if they can't find the information they're searching for in the main content area.

Introduction to CSS Footer

When the user wishes to fix the components at the bottom position to distinguish the logic of the top elements from the logic of the bottom elements, they employ a footer in CSS. Fixed footers and movable footers are the two different forms of footers. Even when the page scrolls up or down to the bottom or sideways, the footer remains fixed at the bottom. It implies that the footer is permanently anchored at the bottom. Nowadays, virtually all websites have a fixed footer feature since scrolling down the whole page makes it quite challenging to pick the many options from the footer. We must return to the bottom and choose if we want to access the footer items. Because it will make users wait longer, developers created the sticky footer idea for Bootstrap. As a result, most users prefer fixed footers over moveable ones since the latter always scroll with the page.

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 in HTML have to create distinct styles for each class, id, link, button, etc. In contrast, CSS allows us to create the common logic in a single file that can be included in the HTML file using the <link> tag, even if there are thousands of HTML pages.

NOTE: It should be noted that CSS files are stored with the .css suffix.

How does CSS's Footer Function?

The footer in CSS is simply a structure that resembles a navigation bar at the bottom; we can make it sticky or moveable and then apply the syntax 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: Just scroll up and down to watch the footer move in the example 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: In the example above, the footer remains visible whether we scroll up or down.

Conclusion

The fixed footer and the moveable footer are two ways to make a footer in CSS. First, the footer separates the logic for the header from the logic for the footer and uses a fixed footer to quickly access the bottom parts.

Next TopicCSS Link

← prev next →