HTML and CSS Reference
In-Depth Information
Back to Tony's page…we're going to make the
headings orange, and add an underline too
Now that you know all about color, it's time to add some color to Tony's web page. He wanted
orange, and he's going to get orange. But rather than making all his text orange—which would
probably be unattractive and hard to read against a white background—we're going to add a subtle
splash of color in his headings. The orange is dark enough that there is good contrast between the
text and the background, and by color-coordinating with the orange in the photos (Tony's shirt),
we're creating a color relationship between the headings and the photos that should tie the images
and text together. And just to make sure the headings stand out and create separation between
the journal entries, we'll also add an underline to each heading. You haven't seen how to add an
underline yet, but let's do it, and then we'll look at more about text decorations.
Here are all the changes in the CSS. Make these changes in your “journal.css” file.
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
We're going to make both <h 1> and <h2> orange, so
we're putting the color prop erty in a shared rule.
h1, h2 {
color: #cc6600;
text-decoration: underline;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
Notice that we created one new rule for b oth
the <h1> an d <h2> heading s. This is a good
thing to do because it redu ces duplication.
h2 {
font-weight: normal;
font-size: 130%;
}
blockquote {
font-style: italic;
}
 
Search WWH ::




Custom Search