HTML and CSS Reference
In-Depth Information
By default, browsers render headings with a
font-weight
of
bold.
Our head-
ings, however, are currently all set to a
font-weight
of
300
. Our reset at the
top of our
main.css
file changed the
font-weight
to
normal
, and then our
font-weight
of
300
within the
<body>
element rule set changed all headings
to a
font-weight
of
300
.
The
font-weight
of
400
on the
<h5>
element will actually make it slightly
thicker than the rest of our other headings and text.
1.
h5 {
2.
color: #a9b2b9;
3.
font-size: 14px;
4.
font-weight: 400;
5.
}
4.
Our reset at the beginning of our style sheet also reset the browser default styles
for the
<strong>
,
<cite>
, and
<em>
elements, which we'll want to add back
in. For our
<strong>
elements we'll want to set a
font-weight
of
400
,
which actually equates to
normal
, not
bold
, as the typeface we're using is thick-
er than most typefaces. Then, for our
<cite>
and
<em>
elements we'll want to
set a
font-style
of
italic
.
1.
strong {
2.
font-weight: 400;
3.
}
4.
cite,
5.
em {
6.
font-style: italic;
7.
}
5.
We're on a roll, so let's keep going by adding some styles to our anchor elements.
Currently they are the browser default blue. Let's make them the same
color
as
our
<h1>
through
<h4>
heading elements. Additionally, let's use the
:hover
pseudo-class to change the
color
to a light gray when a user hovers over an an-
chor.
1.
/*
2.
========================================
3.
Links
4.
========================================
5.
*/
6.
7.
a {
8.
color: #648880;
Search WWH ::
Custom Search