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.
Click here to view code image
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-
Click here to view code image
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:
Click here to view code image
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