Note: Backing it Up!
Before you experiment with the CSS properties above,
it might be an idea to make a backup of your CSS file, just in case you
run into difficulties. Remember that you can download all the examples
used in this chapter from the code archive if you accidentally mangle
your CSS file. If this happens, don't worry! It's all part of the
learning process, and you can be sure that no animals will be harmed in
the process. Only a handful of poor CSS selectors will be mistreated.
Shed no tears!
Recap: the Style Story so Far
Let's allow ourselves a moment to reflect. Our site now boasts
a CSS file with a selection of attractive styles. We're in the enviable
position of being able to change the site at a whim by altering just
that one CSS file. Let's try styling some more of the elements on our
web pages.
Changing the Emphasis
Open about.html in your text editor.
Find the paragraph about meeting up in a local pub and add an emphasis element as shown here:
Example 3.10. about.html (excerpt)
<p>And when we're not diving, we often meet up in a local pub
to talk about our recent adventures (<em>any</em> excuse,
eh?).</p>
Save the page, then view it in your web browser; it should
appear as shown in Figure 3.8. As you can see, emphasis elements appear
in italics by default. We're going to use CSS to change that default
style.
Figure 3.8. Using emphasis to set type to italics by default
Open style1.css (if you haven't
already opened it for editing) and add the following rule below the
others:
Example 3.11. style1.css (excerpt)
em {
font-style: normal;
text-transform: uppercase;
}
Save the CSS file, then refresh your browser's view of the
About Us page. Does your page look like Figure 3.9?
Figure 3.9. The emphasis appearing as capitalized text instead of italics
Now, whenever you add an em element to any web page of your
site (assuming that page is linked to
style1.css), the emphasized text will appear
in capital letters, not italics. But this raises an interesting point:
when should you override a browser's default style for one of your own
choosing? Presumably, the default styles that browsers use were
selected carefully; how can you be sure that your redefinition of the
styles is a good idea? Weren't italics a suitable style for emphasis?
They probably were. As Spiderman's creators say, 'With great power
comes great responsibility,' so be sure to exercise caution. Just
because you can change a default style does not always mean you
should.
Perhaps a compromise is in order. Let's change the emphasis so
that it's still italic, but also appears in uppercase letters. All we
need to do is remove the font-style declaration; the em element will
then revert to its default italicized appearance, as depicted in Figure
3.10.
Example 3.12. style1.css (excerpt)
em {
text-transform: uppercase;
}
Share and Enjoy:
