HTML and CSS Reference
In-Depth Information
property and value. The second rule set will select the same
<a>
elements as be-
fore but will change their color to green when a user hovers over them.
1.
.primary-header a,
2.
.primary-footer a {
3.
color: #fff;
4.
}
5.
.primary-header a:hover,
6.
.primary-footer a:hover {
7.
color: #648880;
8.
}
3.
While we're making some of our text white, let's make the text within the hero
section of our home page white also, as it will remain on a blue
background
.
We have the existing
hero
class rule set available to add styles to, so let's add our
white text
color
there. In all, our
hero
class rule set should include the follow-
ing:
1.
.hero {
2.
color: #fff;
3.
line-height: 44px;
4.
padding: 22px 80px 66px 80px;
5.
text-align: center;
6.
}
4.
Also within the hero section of our home page, let's clean up some of the button
styles. We'll begin by adding some new properties to our
btn
class rule set, within
the buttons section of our
main.css
file.
Specifically, let's set the button text
color
to white, make sure our
cursor
is al-
ways a
pointer
, increase the
font-weight
, add a small amount of
letter-
spacing
, and change our
text-transform
to
uppercase
.
In all, our new
btn
class rule set should look like this:
1.
.btn {
2.
border-radius: 5px;
3.
color: #fff;
4.
cursor: pointer;
5.
display: inline-block;
6.
font-weight: 400;
7.
letter-spacing: .5px;
8.
margin: 0;
Search WWH ::
Custom Search