Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Footer Styling 2

Next, we'll style the footer links, social media links, and text using CSS.


Footer Links Styling CSS
#footer a {
    font-size: 14px;
    color: #fff;
}

#footer a:hover {
    opacity: 0.6;
}

The footer links are set to a font size of 14px using the font-size: 14px; property.

The text color is set to white using the color: #fff; property.

Lastly, by using the :hover selector, the opacity is set to 0.6 when the mouse hovers over the links.

This approach encourages user interaction by providing a visual change when the mouse hovers over an element.


SNS Links Styling CSS
#footer .social {
    margin-top: 16px;
}

#footer .social img {
    width: 20px;
    height: 20px;
}

#footer .social a {
    margin: 0 8px;
}

For social media links, we used margin-top: 16px; to create a 16px space above them, separating them from the email address above.

The width and height of the icons are set to 20px using width: 20px; and height: 20px;.

margin: 0 8px; provides an 8px space between the icons to avoid them being too close together.


Styling Footer Text​

Footer Text Styling CSS
#footer p {
    font-size: 14px;
}

The footer text uses font-size: 14px; to set the font size to 14px.

Matching the font size with the links creates a clean and consistent look for the footer content.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.