Lecture

Footer Styling 2

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


Styling Footer Links

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.


Styling SNS Links

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.

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help