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