9. Structural Markup with CSS

If you've worked with style sheets at all with a word processor, or a page layout application, you might be wondering what on earth the style sheets we've been learning about have in common with those. That's because, when we work with those applications, we are most often creating a custom style. So far, all we've been doing is effectively redefining the existing "styles" or elements of HTML.

You are probably thinking, "well can I create custom styles?" The answer is yes. But before we learn how, I want to talk about why you want custom styles, and more importantly, when you don't want them.

Form Follows Function

You've probably heard the old bauhaus manifesto many times. Often on the web, it seems that the design principle is the other way around. Style for its own sake.

Please bear with me for a couple of minutes, as this is one of my bugbears. This discussion goes to the heart of style sheets, and indeed all electronic publishing, at least in my humble opinion.

Be honest now, how often have you marked up an element as italic (using <I>)?
Probably more often than you've used the <EM> (emphasis) element I bet. What's the difference? Well, if you use the italic approach, you are doing what's called presentational markup. You are telling a browsers (or anyone or anything else that cares to look) how the element should appear. But why is that text italicized? There should be a good reason. Is it emphasis? Is it a citation? Is it a foreign word used in English? Why not make your intention plain? That way, dumb entities like computers can make some sense of your documents, not just smart entities like humans.

Now, HTML is not equipped with a rich set of elements to express the content of a document. There are only a few elements such as <EM>, <STRONG> and <CITE> that you can use in this way. However, HTML 4.0 (the most recent version of the language) provides a mechanism for doing something close. Even though we are stuck with the elements (the set of tags) that is predefined, we can give any element a class attribute. This is like labeling a particular paragraph, heading, or any other element as belonging to a class, that you as an author can define.

Let's take a look at a concrete example, then learn how to do it.

A Cookbook

Think about the different types of information in a cookbook. We can quickly distinguish

• the narrative (descriptions, introductions and so on)
• recipe instructions
• recipe ingredients

and several others without trying too hard.

When you look at the pages of a cookbook, you'll see text in several different fonts, or weights, sizes and so on. That is, different pieces of information are distinguished on the basis of what they are, that is, their class.

Based on our quick analysis, we'd have three classes of information in our cookbook, namely, general, instructions and ingredients .

When we are marking up our document, whether for paper or web publishing, we could manually apply our desired style information to each element. So, if we want ingredients to be bold, we'd mark any text that was ingredients up as bold, and so on.

From a practical perspective, this is not ideal. By intermingling content and presentation you do more work (as we will shortly see) and create an enormous amount of work for yourself or someone else when the time comes to overhaul the appearance of a site or publication.

So, what's better? With a word processor, we would create a custom style, and then mark up the document with these styles. With style sheets we do something similar.

Classes of Information

The process of creating custom styles (that is classes) with style sheets is a little involved, but well worth the effort for the advantages it conveys.

Firstly, we need to analyze our pages, and decide on the different classes of information they contain. In the cookbook example, we saw that there are general text, ingredients, instructions and clearly others.

Exercise 1

Think about these pages. What classes of information can you find in them.

Answers at the end of the lesson

Now, once we've identified the classes, we need to mark up the elements in our pages that are of the given classes.
This is the only time in these lessons we'll have to change any of the HTML in our site, except for linking our pages to our style sheet.

To give an element a class attribute, we add the following code to the element tag

class="class-name"

For example, to make a paragraph of class instruction , we take the paragraph, for instance

<P>First separate the whites of the egg</P>

and add class="instruction" . We end up with

<P class="instruction">First separate the whites of the egg</P>

Exercise 2

We want to practice giving classes to elements in a page.

Analyze the document we've been using as our preview page for the different classes of information in it. Open the HTML file with a text editor, or your web development tool of choice.

Now its time to mark up the page with this class information.

For each element, add the class attribute, like we saw above. Note that class names can only include letters, numbers and hyphens ("-"), and must begin with a letter. They must not contain spaces or underscores.

When you are done, take a look at the example answer at the end of the lesson. The class names don't have to be identical, but you should have (at least) three different classes.

Meanwhile, Back at the Style Sheet

Now that we've marked up the document, we still need to create a rule in our style sheet that selects elements of a class and applies a style to them.

Rules like this are very similar to the other rules we've seen, the important difference being the selector. To select any element of a particular class, you use the selector .class-name, that is, a dot, followed by the name of the class. The selector to select any elements of class ingredient is .ingredient.

Exercise 3

For each of the classes in our document, we want to make a rule that selects any element of that class, and applies a style. I'll leave the choice of appearance up to you.

My example answer, as always at the end of the lesson.

Now, the moment of truth. Does it work? Take the page for a test drive in your browser (make sure you have saved both the page and the style sheet first.)

Next

Another productive session, where we've covered more than you might think. We've seen the heart of style sheets, separating content from presentation, and learnt how to analyze documents into classes of information, markup a web page using the class attribute, and apply style using the class information and a class selector.

Next we are going to look at the combination of class selectors and link selectors, to create different styles of link for different purposes (for example, links to other sites which look different from links to other parts of the same site.)

Answer to Exercise 1

Off the top of my head

• code examples
  
• notes
  
• instructions

Can you think of any others?

Answer to Exercise 2

<HTML>
<HEAD>
<TITLE>Choux Stuff</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="core-style.css">
</HEAD>
<BODY>

<H1>Classic Patisserie Recipes</H1>

<H2>Pastry Cream</H2>

<P class="description" >Also known as creme patissiere, this is the traditional filling
for fresh fruit tarts. It is also used to fill choux puffs.</P>

<H3>Ingredients</H3>

<P class="ingredient" >2 cups milk</P>

<P class="ingredient" >1 vanilla bean</P>

<P class="ingredient" >6 egg yolks</P>

<P class="ingredient" >175g castor sugar</P>

<P class="ingredient" >50g cornflour</P>

<P class="method" >Scald milk with vanilla bean. Beat egg yolks with cornflour until
thick. Pour in milk and whisk until quite smooth.</P>

<H1>More Information</H1>

<P>to contact the author, email me on
<A HREF="mailto:john@masterchef.org">john@masterchef.org</A></P>

<P>to download all my recipes in acrobat format,
<A HREF="ftp://ftp.masterchef.org/recipes.pdf">click here</A></P>

<P>for other recipes, see biodynamic recipes from
<A HREF="http://www.biodyn.nu">http://www.biodyn.nu</A></P>
</BODY>
</HTML>

Answer to Exercise 3

.description {
font-style: italic;
/*note how to make something italicized */
font-family: "Minion Web", Times, "Times New Roman", serif
}

.ingredient {
font-family: Verdana, Arial, Helvetica, sans-serif
}

.method {
font-family: "Minion Web", Times, "Times New Roman", serif
}