HTML and CSS Reference
In-Depth Information
1.
We'll begin by taking a big step and applying a blue background to the
<body>
element alongside the existing
color
and
font
properties. All of the styles for
the
<body>
element rule set now include the following:
1.
body {
2.
background: #293f50;
3.
color: #888;
4.
font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue",
Helvetica, Arial, sans-serif;
5.
}
We've placed a blue
background
on the
<body>
element purposely, as our
website will have a few different rows of
background
colors, and the most fre-
quent
background
color will be blue.
2.
Now that every page on our Styles Conference website includes a blue
back-
ground
, let's clean up a few areas that will keep that blue background. Specific-
ally, our
<header>
and
<footer>
elements will remain blue, as will the hero
section on the home page.
Within our
<header>
and
<footer>
elements let's make all of our link colors
start as white and then, when hovered over, turn the same green as our headings.
We'll begin with our
<header>
element. In order to select all
<a>
elements
within the
<header>
element, we'll add a class of
primary-header
to the
<header>
element (in addition to the existing
container
and
group
classes).
Don't forget, we'll need to add this class to the
<header>
elements across all of
our pages.
1.
<header class="
primary-header
container group">
2.
...
3.
</header>
With the
primary-header
class in place on the
<header>
element, and the
existing
primary-footer
class in place on the
<footer>
element, we can
add two new rule sets to the bottom of the links section within our
main.css
file.
The first rule set will select all
<a>
elements within an element with the class at-
tribute value of
primary-header
or
primary-footer
and set their color to
white, as defined by comma separating two individual selectors that share the same
Search WWH ::
Custom Search