Footer Styling 2
Next, we'll style the footer links, social media links, and text using CSS.
Styling Footer Links
#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
#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 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