HTML and CSS Reference
In-Depth Information
9.
}
10.
a:hover {
11.
color: #a9b2b9;
12.
}
6.
Now let's take a look at our
<header>
element and update our styles there. We'll
begin updating our logo by adding the
font-size
and
line-height
proper-
ties within the
logo
rule set. Adding to the existing
border-top
,
float
, and
padding
properties, the new rule set should look like this:
1.
.logo {
2.
border-top: 4px solid #648880;
3.
float: left;
4.
font-size: 48px;
5.
line-height: 44px;
6.
padding: 40px 0 22px 0;
7.
}
7.
Because we've bumped up the size of the logo quite a bit, let's add a
margin
to
the
<h3>
element within the
<header>
element to balance it. We'll do so by pla-
cing a class attribute value of
tagline
on the
<h3>
element and then using that
class within our CSS to apply the proper margins.
Let's not forget that the changes to the
<h3>
element need to happen on every
page.
HTML
1.
<h3
class="tagline"
>August 24–26th — Chicago, IL</h3>
CSS
1.
.tagline {
2.
margin: 66px 0 22px 0;
3.
}
8.
After the
<h3>
element with the class attribute value of
tagline
comes the
<nav>
element. Let's add a
class
attribute value of
primary-nav
to the
<nav>
element and add
font-size
and
font-weight
properties to make the
navigation stand out against the rest of the header.
HTML
Search WWH ::
Custom Search