Last chapter we discussed that there were several means of integrating style sheets. You also had a chance to read about the cascade, inheritance, and specificity—all important concepts when it comes to constructing a style sheet.
While inline style and user style can be important, the detail work when using CSS is in linked and embedded sheets. Imported sheets are also important, particularly when trying to separate text styles from layout styles in working around problems in Netscape 4.x.
For this chapter, the focus will be on creating styles suitable for use in embedded, linked, and imported sheets. First, you’ll prepare a markup example for external CSS, then you’ll begin applying rules.
Tip To create embedded rules, use the style element in the head portion of the document. For details, see Chapter 2, “Learning CSS Theory.”
As mentioned, your markup documents should be well structured. This is where you’ll find the initial information for preparing your style sheets, because your markup provides the framework of the document tree. Consider Listing 3.1, which is a fairly long but realistic listing containing the kind of elements and content you’d find on a web page, in this case, a personal web log, or “Blog.”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Adventures in England</title>
</head>
<body>
<h1>Wednesday June 6, 2002</h1>
<p>Heathrow airport has to be one of the ugliest airports I’ve ever seen,
and I’ve seen a lot of them. It looks like some kind of post-modern
industrial nightmare, is horribly lighted, has no circulating air to speak
of, and I thought I would grow old and gray waiting for my luggage.</p>
<p>But then things started getting fun. At the taxi stand I got my first
"alo, luv!" and a lot of good-natured, flirtatious joking from the cabbies.
My brother <a title="email linus" href="mailto:kafka@desert.net">Linus</a>
swore to me that all drivers in the UK know where they’re going. As it
turns out, my driver wasn’t precisely sure where my hotel was located so he
checked with his pals. This turned into quite a drama among the boys, but I
was comforted by the taxi stand manager. He had one of those great faces
that makes you want to immortalize it in paint, ink, or photo. About my
driver, the stand manager said: "Not to worry, luv, he knows where he’s
going. If he makes any mistakes, just smack him on the head." Works for me.
Actually, my driver turned out to be positively wonderful, full of helpful
information and details about this and that.</p>
<p>Once out of the airport came the first glimpse of everything I’d
imagined England to be: Pleasantly humid, overcast, and with gently
swelling green hills, swaying grasses, horses in a pasture, a thatched-roof
cottage.</p>
<p>If it weren’t for the Burger King, the Holiday Inn, and the massive
Glaxo/Smith Klein complex, I really might have confused it all for New
Jersey.</p>
<h2>Enter, London</h2>
<p>Along the drive from Heathrow to my hotel, I got to see, well, gee,
almost everything one is supposed to see in London: The Tower of London,
the London Eye, the Tower Bridge, the Queen’s digs. I arrived the day after
her Majesty’s Jubilee, looks like it was one <em>hell</em> of a party from
the mess left behind.</p>
<p>The most striking thing to me so far is the mixing of old and new in
everything here. Architecture, fashion, you name it. The other intriguing
thing is how truly contemporary many things about London are. As a media
person, I find the advertising especially fascinating, fun, hip, really
more sophisticated than anything I’ve ever seen in the US.</p>
<p><img src="blog-/images/012/docklands1.jpg" width="200" height="100"
alt="photo: docklands wharf building" /> <img src="blog-
/images/012/docklands2.jpg" width="200" height="100" alt="photo: view of
buildings across the thames" /></p>
<p>I’m staying in the <a title="learn more about the history of
the docklands" href="http://www.lddc-history.org.uk/">Docklands</a>, for those
unfamiliar this is the old dock areas right along the Thames. Tons of wharf
buildings and old council houses have been gentrified into new flats and
office space, as well as new buildings, shops, and what-not being built.
Very reminiscent of San Francisco’s South of Market, but the architecture
is better. I took a long walk along the river front this morning, it is
quite beautiful in its way.</p>
<p>Everyone always talks about the bad English food. My first English meal
was <em>wonderful</em>. I had to do it: Fish and Chips and a pint of ale.
I ate that meal in a pub complete with high-backed leather chairs and
pictures of old sea captains on the wall. It was a truly great meal and
I’ll remember it always.</p>
<h2>News of the Day</h2>
<p>Along with Jubilee, there’s the World Cup, and with yesterday’s
spectacular game between the Irish and Germans, well, I got instantly
caught up in the vibe. I think all of London was yelling hurrah at the tie
goal. There was a band of Germans in the pub watching the post-game
commentary. They appeared to be more silent and morose than usual, if
that’s possible. I have no sympathy.</p>
<p>And then, there was breakfast this morning. Goodness, here I found all
the reasons people make fun of English food. You can have yer back bacon
and black pudding, thank you very much. The mushrooms were fine, though,
as was the hot tea, of course. I drank so much of it I’m buzzing around
like a fly.</p>
<p><img src="blog-/images/012/docklands3.jpg" width="200" height="100"
alt="photo: nelson pier" /> <img src="blog-
/images/012/docklands4.jpg" width="200" height="100" alt="photo: walkway over
old dry dock" /></p>
<h2>Random observations:</h2>
<ul>
<li>Interesting pub name seen along the way: "The Hung Drawn and Quartered"
(note lack of punctuation)</li>
<li>Sign says: "Please watch
the step" as opposed to "Please watch
<em>your</em> step"</li>
<li>The lift in my hotel claims to fit five people. Yeah, right. It’s the
size of a teacup and rattles like bad china too. Oddly, there’s a great
jazz soundtrack playing to keep those claustrophobics among us calm.</li>
<li>Sign says: "Way out reception" and I’m still wondering if that’s just a
cool way to say they’ve got cool people on staff or it’s some kind of
direction I’ve yet to comprehend the meaning of . . . </li>
</ul>
<p>I find the people here to be very helpful and friendly in a reserved
way, coming out of their shells once you get to talking. But one thing
puzzles me greatly. On the phone, the English seem to get very excited
when they say goodbye. I’ve noticed this before, but it became very
apparent to me while making phone calls earlier today.</p>
<p>Aside from the grander horrors of the arguing world, and the weird,
unfolding tale of <a title="read more about this sad tale"
href="http://news.bbc.co.uk/1/hi/uk/england/2044874.stm">
Richard Markham and Tristian Lovelock</a>, I am really very happy right
now. I’m cool, it’s raining, the favorite drinks are tea, coffee, and beer,
and that pretty much sums up my happiness, too.</p>
<p><a href="archive-may2002.php" title="go to blog archive">view more
entries</a></p>
</body>
</html>
Copy this listing from the website and save it as chapter3.html. View it in your browser to get a feel for how it looks unstyled (Figure 3.1).
Some of the items of note within this document include:
It is an XHTML 1 strict document type, encouraging strict authoring practices.
The document contains the proper DOCTYPE and namespace.
The document is simply but well structured, using headers, paragraphs, and lists to organize the content.
The document contains no elements or attributes that are considered to be purely presentational, such as font styles and paragraph or image alignment attributes.
To create a thorough means of styling this document, first examine the document structure and map out the document tree. Figure 3.2 shows the condensed results of the tree, using only two paragraph examples (there are obviously more paragraphs!). Compare the figure to the markup, and you should quickly see the relationships within the tree.
With map in hand, you can confidently begin to prepare your style sheet by listing out the obvious elements that are to be styled, as follows:
body h1 h2 p img a ul li
And so begins the basis of a great style sheet. Of course, if you’re creating style across many documents, you can’t create as tight a tree. However, you can stay aware of the primary elements in use across a site. What’s more, if you’re properly structuring your documents from the get-go, you’ll likely have a limited set of elements site-wide.
