Footer CSS

Footer CSS

The footer is the last section visitors see on a page. A well-styled footer provides navigation, contact info, and social links in a clean, organized layout.

Footer Background & Base

#main-footer {
    background: #222;
    color: #ccc;
    padding: 60px 0 0;
    font-size: 14px;
}

#main-footer h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

#main-footer h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #31A8FF;
}

Footer Grid Layout

.footer-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col p {
    line-height: 1.8;
    color: #aaa;
}

Footer Links Styling

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #aaa;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul li a:hover {
    color: #31A8FF;
    padding-left: 5px;
}

The padding-left on hover creates a subtle slide-in effect — a small detail that adds interactivity.

Contact Info Styling

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    color: #aaa;
}

.contact-info .icon {
    margin-right: 10px;
    font-size: 16px;
}

Social Links

.social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-links a {
    display: inline-block;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    transition: background 0.3s ease;
}

.social-links a:hover {
    background: #31A8FF;
}

Footer Bottom / Copyright

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #444;
    color: #777;
    font-size: 13px;
}

Footer Design Best Practices

Practice	Why
Dark background	Visually separates footer from main content
Muted text color	Lighter gray on dark = easy on the eyes
Hover effects on links	Shows interactivity without being distracting
Consistent column widths	Creates a clean, organized layout
Copyright at the bottom	Standard placement users expect

Flexbox flex-wrap

The flex-wrap: wrap property is important for responsive behavior:

• On wide screens, all four footer columns sit side by side
• As the screen narrows, columns with min-width: 200px will wrap to the next row
• This gives a built-in responsive behavior without media queries

Full Footer CSS Reference

#main-footer {
    background: #222;
    color: #ccc;
    padding: 60px 0 0;
    font-size: 14px;
}

.footer-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #444;
}

Key Takeaways

• Use a dark background with muted text for a professional footer
• Flexbox with flex-wrap and min-width creates a naturally responsive grid
• Hover effects on links add subtle interactivity
• The ::after pseudo-element creates decorative accents under headings
• A border-top on the copyright section visually separates it from the columns