Skip to main content
Practice

Footer Styling 2

Continuing from the previous lesson, we will now style the links, social media links, and text in the footer.


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

#footer a:hover {
    opacity: 0.6;
}

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

Also, we set the color of the text to white using the color: #fff; property.

Finally, by using the :hover selector, we set the opacity to 0.6 when a user hovers over the link.

This will make the link change when hovered over, indicating to the user that it is clickable.


Social Media Link Styling CSS
#footer .social {
    margin-top: 16px;
}

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

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

To add some vertical spacing above the social media links (usually email address), we used the margin-top: 16px; property to set the top margin to 16px.

We set the width and height of the icons to 20px using the width: 20px; and height: 20px; properties.

Since the icons might be too close to each other, we set the margin between them to 8px using the margin: 0 8px; property.


Styling Footer Text​

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

We set the font size of the footer text to 14px using the font-size: 14px; property.

By setting the font size of both the links and the text to the same size, we ensure the footer content appears clean and organized.

Want to learn more?

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