How to create footer in css

CssHow-ToBeginner · 3 min read

How to Create a Footer in CSS: Simple Guide and Example

To create a footer in CSS, use the <footer> HTML tag and style it with CSS properties like background-color, padding, and text-align. Position it at the bottom of the page using layout techniques such as Flexbox or fixed positioning.

📐

Syntax

The footer is created using the <footer> HTML element. You style it in CSS by selecting the footer tag and applying properties like background-color for color, padding for space inside, and text-align to center text.

To keep the footer at the bottom, you can use layout methods like Flexbox or fixed positioning.

css

footer {
  background-color: #333333;
  color: white;
  padding: 1rem;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

💻

Example

This example shows a simple footer that stays fixed at the bottom of the browser window with centered white text on a dark background.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Example</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    main {
      flex: 1;
      padding: 1rem;
    }
    footer {
      background-color: #333333;
      color: white;
      padding: 1rem;
      text-align: center;
      /* Stick footer to bottom */
      flex-shrink: 0;
    }
  </style>
</head>
<body>
  <main>
    <h1>Welcome to My Website</h1>
    <p>This is the main content area.</p>
  </main>
  <footer>
    &copy; 2024 My Website. All rights reserved.
  </footer>
</body>
</html>

Output

⚠️

Common Pitfalls

Not setting margin: 0 on body can cause unwanted space around the footer.
Using position: fixed without considering content height can overlap page content.
For sticky footers, forgetting to use Flexbox or set minimum height on the page can cause the footer to float mid-page.

Use Flexbox layout on the body with flex-direction: column and flex-grow on main content to push footer down.

css

/* Wrong: footer overlaps content */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1rem;
}

/* Right: footer stays below content using Flexbox */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
main {
  flex: 1;
}
footer {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

📊

Quick Reference

<footer>: Semantic HTML tag for footer content.
background-color: Sets footer background color.
padding: Adds space inside the footer.
text-align: Aligns text inside footer.
position: fixed: Fixes footer at bottom of viewport (use carefully).
Flexbox layout: Use display: flex; flex-direction: column; on body and flex: 1; on main content to push footer down.

✅

Key Takeaways

Use the

To keep the footer at the bottom, use Flexbox layout or fixed positioning carefully.

Set body margin to zero and use min-height with flexbox to avoid footer overlapping content.

Avoid fixed positioning unless you want the footer always visible on screen.

Semantic HTML and proper CSS layout improve accessibility and user experience.