Cascading Style Sheets

When HTML was first introduced, there were a number of tags whose purpose was just for formatting: for example, tags that center or switch to an italic font. With HTML version 4.0, such tags were made obsolete (though most browsers still support them), in favor of a formatting technique called Cascading Style Sheets.

Customizing Your Tags

When a browser is displaying a page, there is a step of reading a tag, such as EM or H1 and then determining what the results are to look like. (This is sometimes call rendering a page.) Each browser has a default way of rendering a tag. For example, most browsers will render the EM tag by switching to an italic version of the current font. Most browsers will render an H1 tag by switching to a very large version of the current font. Several important points to make about this:

CSS

You can specify the style of a tag using a style sheet. These style sheets can be put in (at least) three different places:

  1. Inline Styles. These are specified in the tag itself.
  2. Document-Level Style Sheets. These are specified in the HEAD of a document, using a special tag
  3. External Style Sheets. These are specified in a separate CSS file that is connected to the HTML file by the LINK tag. You saw an example of that on the first day, and if you view the source for this web page, you'll see another example.

Suppose that we always want EM to be red. After all, EM stands for emphasis, and what could be better emphasis than putting something in red? (FYI, using color is, in fact, a terrible idea, because some people are color-blind or even completely blind. We'll talk more about the issue of accessibility in a later lecture. For now, for the purposes of this lecture's examples, let's suppose that using red is a sensible thing to do.) Let's look at the three ways to make EM red:

  1. Inline Style. You use the STYLE attribute of the tag to set the COLOR property to have the value red and the BACKGROUND property to have the value white. (You should be reminded of the attribute/value idea in tags, but the syntax is different. With CSS, attribute/value pairs are separated by semi-colons, and the attribute ends with a colon.) Note that you should always pick both colors, in case the user's browser has specified a background color that matches your foreground color. Here's the example: 
    this is an <EM STYLE="color: red; background: white">important</EM> word
    results in

    this is an important word

  2. Document-Level Style Sheets. You use the STYLE tag in the HEAD of your document to specify the style for the EM tag once and for all: 
    <style type="text/css">
   EM { 
      color: red; 
      background: white 
   }
</style>

    Later in your document, you just use the EM tag normally, and it's rendered as red.

  3. External Style Sheet. These look just like document-level style sheets, except that you don't put the definition(s) inside a STYLE tag. Instead, you reference the file using the LINK tag in the HEAD, the same place you would use the STYLE tag. Suppose we create a file called red-em.css that contains the following: 
    EM 
{ 
   color: red; 
   background: white 
}

    and we reference it in the HEAD thus: 

    <LINK REL="stylesheet" TYPE="text/css" HREF="red-em.css">

    As with document-level style sheets, we can just use the EM tag normally from then on.

Syntax Note

There are several facets to the syntax of styles:

Exercise 1

Using your little.html web page from earlier exercises, modify the EM tag so that it is red, the STRONG tag so that it is blue and the P tag so that it is green. Try all three ways, so make the P tag green in an external style sheet, the STRONG tag blue in a document-level style sheet, and the EM tag red using an inline style. Try nesting them for fun effects.

Cascading

CSS has “cascading” in the title because there's a strict hierarchy that determines which specification applies if the style of a particular tag is set in more than one place. Suppose you specified the EM tag as green in an external style sheet, blue in a document-level style sheet and red in an inline style. Which wins?

The simplest answer is that the closest specification wins. This makes sense, because you can use the more local specifications to override the more distant, global specifications. So, inline style attributes beat document-level sheets, and document-level sheets beat external style sheets.

Which Style Sheet to Use?

One of the most common rules of thumb for creating clear and beautiful documents is consistency. For example, section headers should always be the same size, weight and font. Indeed, this is what a “style sheet” means in the context of document processing. MS Word format files are the same thing.

You can best achieve consistency by specifying the style far enough from the text so that the style is specified in just one place. If you have a single web page that you would like consistent, you should use a document-level style sheet. If you have several web pages (a web site) that you want to be consistent, you should definitely use an external style sheet.

In this course, you and a partner will be creating a web site for a client. For that web site, you should define an external style sheet. Then, if you or your client decides that H1 should be centered, H2 should be bold and blue, H3 should be underlined and non-bold, and EM should be pink, you can do that in one place. If you later change your mind and decide that EM should be purple, you make one change in one file and all of your web site is consistently changed. If you had used the local style technique, you would have to edit every page of your site, searching for and modifying each occurrence. This is tedious and error prone.

Because the CS110 faculty would like our (very large) course web site to be consistent, we will be using a CS110 style sheet throughout. (But we may not have fixed all the web pages yet; we're migrating from a non-CSS web site.)

The Bigger Picture

The idea of CSS illustrates an important concept in the field of computer science, namely abstraction. Abstraction is the idea of saying what you want done without saying how to do it. By leaving out the details about how to do something, you allow for some flexibility, so that you can revise your method of doing the task without messing up anything that depends on that task being done. Here, we said EM without saying what that meant, putting elsewhere the specification of how to emphasize.

SPAN and DIV

So far, we've achieved an effect by modifying one of the existing tags, mostly EM. Suppose you want to make some text a different color, but it's not emphasis, so it feels wrong to use the EM tag. As another example, in the title of the color lecture we used several colors of text (just to be cute). How did we do this using CSS? The answer is a new tag called SPAN. By itself, SPAN does nothing. Its only purpose is to support the STYLE attribute so that you can modify the appearance of the stuff between start and end SPAN tags. It's a pretty intuitive name for the tag. If you view source, on the color lecture, you can see how we did this.

Suppose that we're using a special word and we want just that special word to be rendered differently. We could say: 

<span STYLE="color: teal; background: white">
    Supercalifragilisticexpialidocious
</span>

and the result would look like:

Supercalifragilisticexpialidocious

Thus, we don't have to press EM or STRONG into a job they're not suited for; we can just use SPAN whenever we want to modify the style of something.

SPAN is intended for stuff within a paragraph, so when you use SPAN there is no break in the paragraph. If you want to start a new paragraph, you are probably defining some big division of your document and you should use the DIV tag. For example, you might be defining the appearance of the abstract, the bibliography, a theorem, a glossary entry, an exercise or something like that. For that purpose, you can use the DIV tag. Like SPAN, it exists primarily to carry the STYLE attribute. (There are other uses that we'll omit.) The difference is that DIV is a display object, meaning that using it is separated by vertical space from the preceding and following material, like a paragraph.

Custom Markup

There is an important pitfall in using SPAN and DIV this way. Suppose we are writing a web page that involves a number of special terms. Maybe they're trademarked terms, for example. If we use SPAN each time they occur, we can control how they look, but if we later change our minds about the presentation, we'd have to go back and find all occurrences and change them. This is just the thing that CSS should solve.

We want to set these off somehow, but we don't want to use EM or STRONG or even DFN (there is such a tag, used for terms you are defining). We wish there were a tag called TM, but there isn't. Then, we could modify the style for TM and use that.

One option is to use style classes. For example, in our external or document-level style sheet we could say: 

<STYLE type="text/css">
 SPAN.tm 
 { 
    color: maroon; 
    background: white 
 }
</STYLE>

And within the document, we can say: 

Remember that
<span class="tm">Coke</span> and
<span class="tm">Pepsi</span> are both registered trademarks.

With the result looking as we want:

Remember that Coke and Pepsi are both registered trademarks.

If we later decide that instead of maroon, all the trademarked items should be red or even black (so that they no longer stand out), we can again change this in just one place.

Note that we defined our class by what the item is, not what it looks like. The code of our document is only about the content, not the appearance. Appearance information is only in the style sheets. This separation of content from appearance is an important aspect of the concept of abstraction, which we discussed earlier.

Consider the alternative. Suppose that instead of defining a class called tm for our trademarked terms, we'd defined a maroon class and used that. If we later changed our minds and decided to make them pink, we'd have the bizarre result that the class named maroon makes things pink. Read more about good class names.

We use DIV and SPAN in this way, using the ex class, to define the format for exercises in these lecture notes. View the source to see the markup tags.

Syntax Note

There are two facets to the syntax for defining and using style classes:

Lengths and Units

Among the many kinds of attributes you can specify using CSS, many of the important ones are lengths. You can specify, for example, the width of an element (a paragraph or a document), the length of an indentation, the distance before an element, and so forth. For example, we indented this paragraph by half an inch. It's the only indented paragraph in the site. We did it using the following code: 

<p style="text-indent: 0.5in">Among the many kinds of attributes you

You might guess that in means “inches.” To specify lengths effectively, you need to know the units that CSS uses. They come in several categories:

Here is a nice table of these units.

Exercise 2

Using your little.html from earlier exercises, modify the BODY tag so that it is 80 percent of the page, and modify all the P tags to have a 5em indentation. For extra credit, make the BODY tag have a left margin of 10 percent, thereby centering the content on the page.

Centering

You should consult this web reference on Centering Things in CSS

Examples

Here are some examples of using CSS to customize a tag.

Learning More

We have only scratched the surface of CSS. There is much more to learn. You can learn more from

Solutions to Exercises