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.
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. 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 belong to a group, that you as an author can define.
Let's take a look at a concrete example, then learn how to do it.
Think about the different types of information in a cookbook. We can quickly distinguish
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, on the basis of 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.
The process of creating custom styles (that is classes) with style sheets is a little involved, but not in comparison with the advantages it conveys.
Firstly, we need to analyze our pages, and decide on the different classes of information. In the cookbook example, we saw that there are general text, ingredients, instructions and clearly others.
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>
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.
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. This time, we include a reference to both the element (P, BODY, and so on), and the class.
To create a class selector using Style Master
1. choose
from the menu2. in the dialog box that opens, choose
from the popup menu3. the class selector editor opens
4. choose the element for the selector from the list, as you would for an HTML element selector
5. enter the name of the class in the field labeled Class Name. Style Master ensures you don't use invalid names
6. click
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.)
Another productive sessions, 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.)
Off the top of my head
Can you think of any others?
<HTML>
<HEAD>
<TITLE>Choux Stuff</TITLE>
</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>
P.description {
font-style: italic;
/*note how to make something italicized */
font-family: "Minion Web", Times, "Times New Roman", serif
}
P.ingredient {
font-family: Verdana, Arial, Helvetica, sans-serif
}
P.method {
font-family: "Minion Web", Times, "Times New Roman", serif
}