HTML and CSS Reference
In-Depth Information
7. body {
8. color: #888;
9. font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica,
Arial, sans-serif;
10. }
2. In Lesson 4 , Opening the Box Model ,” we began adding some typographic styles,
specifically adding a bottom margin to a few different levels of headings and
paragraphs. Within the same section of the main.css file, let's add a color to the
level-one through level-four headings.
1. h1, h2, h3, h4 {
2. color: #648880;
3. }
While we're at it, let's also add in font sizes for these different heading levels. Our
<h1> and <h2> elements will use fairly large font-size values; consequently,
we'll also want to increase their line-height values to keep the text within
these elements legible. For reference, we'll make their line-height values 44
pixels, double the value of the base line-height set within the <body> ele-
ment rule set.
Click here to view code image
1. h1 {
2. font-size: 36px;
3. line-height: 44px;
4. }
5. h2 {
6. font-size: 24px;
7. line-height: 44px;
8. }
9. h3 {
10. font-size: 21px;
11. }
12. h4 {
13. font-size: 18px;
14. }
3. Our <h5> elements are going to be a little more unique than the rest of our head-
ings. Accordingly, we're going to change their styles a bit.
We'll use a different color property value and a slightly smaller font-size
for these elements, and we're going to change the font-weight to 400 , or
normal .
Search WWH ::

Custom Search