Figure 3.10. Emphasis displaying as uppercase italics
Note: Emphasis vs Italics
You might well be asking yourself, "If I want an italic font, can't I use an italic element?" In fact, HTML provides an i element for just this purpose, but its use isn't recommended. Why not? Well, marking something up as i says nothing about its meaning; i only communicates how it should be presented on the screen. Such elements are referred to as presentational HTML elements, and they should be avoided. Likewise, the b element (for bold), another old HTML element, should not be used. The preferred option is to use strong or, if you just want to display headings in bold, to use CSS.
Why is this important? It mightn't seem important to you, as you look at the italicized text in your web browser. But imagine you were a blind user of software that read web pages aloud to you, instead of displaying them on the screen. Such a program (called a screen reader) would read text marked up with an em element with slight emphasis, and text marked up with strong in a slow, powerful voice -- but what would it do with text marked up with i or b? Well, these elements say nothing about the meaning of the text, so it would ignore them. The same is true of many programs that analyze web pages, such as web indexing programs run by Yahoo! and Google -- em and strong tags tell these programs that the words inside them are important, whereas i and b tell them nothing.
One other presentational tag that you might see others use, but should never copy, is the u element. Wrap this around some text and you get needless underlining that only serves to confuse users (because in web pages, underlined text normally signifies a link -- something that the u element most definitely does not).
Looking at Elements in Context
Pop quiz: which of these items is bigger? A pen or a sheep? Well, the answer is either, depending on the context. If you were a farmer, you'd swear that the pen is bigger. After all, you spend many hours a week rounding up herds of sheep into a nice big pen. If, however, you're an office worker, you'd opt for the sheep being the larger of the two -- you'd find it a lot easier to pick up a pen and flip it around your fingers.
Context can change things quite drastically, and context is something that can be used to our advantage in CSS. We can style an element in a number of different ways, depending on its position. Let's head back to our example site for another lesson. Don't be sheepish, now!
Currently, we have styled paragraphs so that they appear in a navy blue, sans-serif font (Verdana, specifically), as does almost everything else on the page:
Example 3.13. style1.css (excerpt)
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
p {
font-size: small;
color: navy;
}
This is all well and good, but there's one paragraph on our site that's a little different than the others in terms of its purpose. Can you spot which one it is? It's our first paragraph, the one in the tag line. Here's the XHTML for that section:
Example 3.14. index.html (excerpt)
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!</p>
</div>
It's different because it's not really part of the document content and, as such, it might benefit from some different styling. The fact that this particular paragraph is contained within a specific div element -- which has an id attribute of tagline -- is something that we can put to great use. Because it's contained within its own div, we can set a rule for this paragraph and this paragraph only.
Open the CSS file for editing, and add the following after the first paragraph rule:
Example 3.15. style1.css (excerpt)
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
}
Save the file, then refresh the About Us page (or any of the three, for that matter) in your browser. Your page should now look something like the one shown in Figure 3.11.
Share and Enjoy:
