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-
ties.
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:
1.
/*
2.
========================================
3.
Custom styles
4.
========================================
5.
*/
Search WWH ::
Custom Search