HTML and CSS Reference
In-Depth Information
2.
Going back to our
<h5>
elements from before, which have slightly different styles
than the rest of the headings, let's make them all uppercase using the
text-
transform
property. Our new
<h5>
element styles should look like this:
1.
h5 {
2.
color: #a9b2b9;
3.
font-size: 14px;
4.
font-weight: 400;
5.
text-transform: uppercase;
6.
}
3.
Let's revisit our
<header>
element to apply additional styles to our navigation
menu (to which we previously added the
primary-nav
class attribute value).
After the existing
font-size
and
font-weight
properties, let's add some
slight
letter-spacing
and change our text to all uppercase via the
text-
transform
property.
Our styles for the
<nav>
element with the
primary-nav
class attribute value
should now look like this:
1.
.primary-nav {
2.
font-size: 14px;
3.
font-weight: 400;
4.
letter-spacing: .5px;
5.
text-transform: uppercase;
6.
}
4.
Previously, we floated our logo to the
left
within the
<header>
element. Now
our tagline sits directly to the right of the logo; however, we'd like it to appear all
the way to the right of the
<header>
element, flush right.
We need to add the
text-align
property with a value of
right
to the
<h3>
element with the class attribute value of
tagline
to get the tagline to sit all the
way to the right.
When added to the existing
margin
property, our new styles for the
<h3>
ele-
ment with the class attribute value of
tagline
will look like this:
1.
.tagline {
2.
margin: 66px 0 22px 0;
3.
text-align: right;
4.
}
Search WWH ::
Custom Search