Footer Styling 2

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

Copy
#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.

Copy
#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.

Copy
#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.