HTML and CSS Reference
In-Depth Information
10. color: #293f50;
11. }
12. h2 {
13. font-size: 22px;
14. font-weight: bold;
15. margin-bottom: 6px;
16. }
17. .byline {
18. color: #8c8c8c;
19. font-family: Georgia, Times, "Times New Roman", serif;
20. font-style: italic;
21. }
CSS Pseudo-Classes
The demonstration here uses the :hover CSS pseudo-class, something we've
never seen before. For reference, pseudo-classes are keywords that may be added
to the end of a selector to style an element when it's in a unique state.
The :hover pseudo-class styles an element when a user hovers over that ele-
ment. When used with the <a> element, as shown here, all <a> elements will re-
ceive unique styles when they are hovered over. Now our <a> elements will
change color upon being hovered over.
In Practice
Diving back into our Styles Conference website, let's start adding some font-based proper-
1. We'll begin by updating the font on all of our text. To do this, we'll apply styles to
our <body> element. We'll start with a color, and we'll also add in font-
weight , font-size , line-height , and font-family values by way of
the font property and shorthand values.
In an attempt to keep our main.css file as organized as possible, let's create a
new section for these custom styles, placing it just below our reset and above our
grid styles.
We need to add the following:
Click here to view code image
1. /*
2. ========================================
3. Custom styles
4. ========================================
5. */
Search WWH ::

Custom Search