Create a Simple Footer in HTML and CSS

Website footer screenshot

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.

Simple Copyright footer screenshot

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

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

Results

Copyright © Devpractical.com

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

Copyright © Devpractical.com

Simple footer links screenshot

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


Responsive HTML CSS Footer with Links Method 1


Result

Method 2


Result

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 seel appears as the last item on a website.