Create a Simple Footer in HTML and CSS

A website footer is the last section that you see on a website after scrolling all the way to the bottom.

They are great for showing copyright notice.

You can also add links to other legal information like privacy policy and disclaimer.

For larger websites, you can add internal links that directs the readers to pages that will help then navigate the website successfully.

1. Simple HTML CSS Copyright Footer

To create a simple footer, add the following code to your webpage:

<footer>
  <p>Copyright &copy; Devpractical.com</p>
</footer>

Results

To to center the footer you can add a class text-center to the p tag.

<footer>
  <p class="text-center">Copyright &copy; Devpractical.com</p>
</footer>

Then, using CSS, center the copyright footer.

.text-center {
  text-align: center;
}

Example

2. Simple HTML CSS Footer With Links

Links on a footer are added in the form of a list. The HTML code is a follows:

<footer>
  <ul class="footer-links">
    <li>
      <a href="/about/”>About</a>
    </li>
    <li>
      <a href="/privacy-policy/">Privacy Policy</a>
    </li>
    <li>
      <a href="/disclaimer/">Disclaimer</a>
    </li>
 </ul>
</footer>

Results:

You can see that the footer links have bullet points and appear in a single list on the left side of the screen. We are going to style them using CSS. First, you can remove the bullet points using:

.footer-links {
  list-style-type: none;
}

Next, you can collapse the list into a single line on desktop and wider screens.

@media {
  .footer-links li {
    display: inline;
  }
} 

Finally, you can center the links using the text-center CSS class you already created. The final simple footer with links HTML and CSS will be:

HTML

<footer class="text-center">
  <ul class="footer-links">
    <li>
      <a href="/about/”>About</a>
    </li>
    <li>
      <a href="/privacy-policy/">Privacy Policy</a>
    </li>
    <li>
      <a href="/disclaimer/">Disclaimer</a>
    </li>
 </ul>
</footer>

CSS

3. Simple Responsive HTML CSS Copyright Footer With Links

Method 1

Result

Method 2

Result

4. Sticky Footer

Sometimes, websites have footers that are visible as soon as a page is loaded. These footers are called sticky footers. These footers are kept visible at the bottom of the screen as you scroll down. You can make your footer sticky by adding the following CSS code.

footer {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}

you can add the following CSS code that will appears as the last item on a website.