EIW Fall 2000 Lecture Notes - Cascading Style Sheets

Style and HTML

HTML supports the specification of styles that alter the rendering of HTML entities. The inline STYLE attribute is supported by most tags - this allows the author to modify the properties of individual tagged regions of a document. An example of a tag with a STYLE attribute:

<H2 style="color: red; font-size:+5pt">This is a heading  </H2>

Note that there are other ways to make the same changes to this heading, for example you could use the FONT tag to modify the font properties:

<H2> <FONT COLOR=RED SIZE=+5> This is a heading <FONT> </H2>

Support for inline styles seems redundant (and just complicates things by introducing yet another syntax to remember). However, it is now generally accepted as better to use style attributes rather than other tags for changing the rendering of text and other document entities. The idea is that you only need to remember a single syntax (just the syntax for the value of the style attribute), not a whole bunch of different HTML tags. The real reason for having styles is to easily define modifications to rendering attributes that apply to parts of a document, an entire document, or even an entire web site. For example, supposed you want all H2 headings to be in red - you could do something like this:

<H2><FONT COLOR=RED> This is a heading</FONT> </H2>
blah blah blah
<H2> <FONT COLOR=RED >This is another heading</FONT> </H2>
foo foo foo
<H2><FONT COLOR=RED>Yet another heading</FONT> </H2>

As we will see - when using styles you can define the style in which all H2 headings should be rendered. Thus a single definition will apply to all H2 tags in the document.

Properties of Tags

Each HTML tag has some properties associated with it that determine how the browser will draw something. Notice the word properties is used here, not attributes - this is to avoid confusion between the valid tag attributes and the properties that can be defined with styles (or at least is an attempt to avoid confusion). For example, a heading tag like H2 is associated with some text properties including a color, a font family, and a font size. There is no attribute named COLOR that can be part of an H2 tag (you can put it there but it won't do anything). There is, however, a property that controls what color the browser uses when displaying H2 headings, and as we have seen, you can set this property by using an inline style setting like this:

<H2 style="color:red;">This is a heading</H2>

Different tags have support different properties, although all the text tags support the same set of text-related properties so it's not that hard to keep track of things. Properties can be assigned multiple values, sometimes the browser can't comply with the first choice specified (for example it doesn't have the specified font), so it uses the second choice. The general syntax for specifying a property value is:

property-name:val1 val2 ... valn;

Note that a colon seperates the name from the value and a space must seperate each of the alternative values. Finally, the value should end with a semicolon.

Font Properties

Here is an example showing the use of some of the font properties. Note that the entire paragraph is bold, since the font-weight property is set for the paragrph itself, but the font-family is changed for part of the paragraph by using a SPAN tag with a new style.

<P style="font-family:sans-serif;font-weight:bold;font-size:16pt">
This is sans-serif, bold, 16pt. But, I'm about to change that.
<SPAN style="font-family:monospace;font-size:12pt">
Now I'm  monospace, 12pt (and still bold!)
</SPAN>
Now I'm back to where I was before!
</P>

Color

Each element of a document has both a foreground and background color. These can be changed with the following properties:

NOTE: when specifing URLS as the value of a style property you need to use the url() syntax as shown above. I told you the syntax of style was different!

Here is an example of using color and background properties. Once again we use the SPAN tag so we can attach a new style to any part of a document.

<P style="background-color:aqua;color:purple">
This is my paragraph. It should start out with an aqua background
and purple text. I'm thinking about breaking soon. Once I break
I'll start a span with some other stuff, perhaps a cookie background.
OK here goes.<BR>
<SPAN style="background-image:url(cookie.gif);color:red;">
This part of the paragraph should have a cookie background
and the text should be in red. I hope this is working. I need
to think of stuff to put here to make this large enough to
achieve the desired effect. I hope this is enough.
</SPAN>
This text is after the end of the span, so it should not have
a cookie behind it.
</P>

Text Properties

Font properties determine the size, color and style of characters. Text properties determine the spacing and alignment. Here are some of the text properties:

Here is an example using some text properties. The letter-spacing property is not supported by Netscape!

<P style="text-align:center;font-size:32pt">
<SPAN style="letter-spacing:10pt;">
WIDER
</SPAN>
<BR>
is better.
</P>

Other style properties

There are lots more style properties, including properties that control borders, margins, lists, and floating elements like images. Check any HTML reference for the details (and check the course home page for some links to online references).

Defining document-wide styles

To define a standard set of styles for an entire document you can include a set of rules within the head of the document. You surround these rules with the STYLE start and end tags. Here is an example that includes a rule that says that all H2 headings should be drawn as 16pt,sans-serif bold and purple:

<HTML>
<HEAD>
<TITLE>This is my title</TITLE>
<STYLE type="text/css">
  H2 { font-family: sans-serif;
       font-size: 16pt;
       font-weight: bold;
       color: purple;
     }
</STYLE>
</HEAD>
<BODY>
...

NOTE: In the above document the STYLE tag includes the attribute type=text/css. This tells the browser that the style are defined as cascading style sheet styles (the kind this document is describing). The browser can figure out what kind of styles you are using, so you rarely need to include this... You can get away with just using <STYLE>.

Inside the STYLE section of the document head are any number of style rules. Each rule includes a tag name (H1, H2, P,…) followed by a series of style property-name,value pairs inside curly braces. Each property-value is terminated with a semicolon.

NOTE: If you have a syntax problem inside any style rule (or inside the value of a STYLE attribute in an inline style definition) the result is generally that none of the style properties specified will have any effect (as if you never defined any style).

Inline style definitions override those found in the document head, so that it is possible to have exceptions to any style "rules" that are defined in the head. It is also possible to define inline styles that apply to entire DIV or SPAN tagged regions of a document - in this case the global style rules are overridden by the DIV rules, which can be overridden by inline rules, etc.

The inclusion of a STYLE section in the document head allows the author to impose a single style over an entire document, and to easy make changes to the entire document appearance by simply modifying the style rules. Here are some examples (use your browser's "view source" function to see the raw document):

• The document foo.html with no style rules
• The same document, now with some rules to change the normal font used, background color and text color.
• Another version of the same document, different style.

You can also create style rules that are applied to classes of tags. You create a class by including the CLASS attribute inside any tag - then that instace of the tag is a member of the named class. For example, here are two style rules. The first will be applied by default to all paragraphs, the second will override the first on those paragraphs that belong to the class "tinyfont":

<STYLE>
P {color: green; text-size: 14pt;}

P.tinyfont {text-size: 6pt;}
</STYLE>

Any paragraph that starts with the tag <P class=tinyfont> will be rendered with a 6pt font. An example that assumes the above style rules are in effect:

<P>
Here is the first paragraph. This should show up as green and 14 pt.  
Here is the first paragraph. This should show up as green and 14 pt.  
Here is the first paragraph. This should show up as green and 14 pt.  
Here is the first paragraph. This should show up as green and 14 pt.
</P>

<P CLASS=tinyfont>
Here is the tinyfont paragraph. This should show up as green and 6pt.
Here is the tinyfont paragraph. This should show up as green and 6pt.
Here is the tinyfont paragraph. This should show up as green and 6pt.
Here is the tinyfont paragraph. This should show up as green and 6pt.
</P>

BUT: keep in mind that a browser might not have any 6 point font available! In general you should not make assumptions about what specific font might be present on the browser machine - font style definitions should be considered suggestions, and should not be critical to the display of your document.

Complex Style Rules

It is possible to aplly the same set of style properties/values to multiple tags in the same rule. To do this you just list both tags names in the rule - seperated by a comma. As we will see - the comma is important! Here is an example that sets all TD and TH tags to have the same style:

 TD, TH { font-family: monospace; font-size:12pt;color:blue }

This one sets all headings to be aligned center:

 H1, H2, H3, H4, H5, H6 { text-align:center; }

You can also nest tags in a style rule. This means the rule will apply only in places where both tags are in effect and in the order specified. In this way you can specify the style for a tag within some specific context, the context is determined by the nesting of tags. For example, suppose you want any H2 headings that appear within a table to be green. Here is how you can define a style to do this:

 TABLE H2 {color:green; }

Notice there is no comma between TABLE and H2. This means that the rule applies only to sections of text that are within an H2 start and end tag and also within a TABLE start and end tag. This is a very useful concept when dealing with nested lists. Using some of the list style properties you can change the way nested lists are rendered - for example you can do this:

OL LI {list-style: upper-alpha;}
OL OL LI {list-style: upper-roman;}

With these rules in effect a set of nested ordered lists will look like this:

External Style Sheets

You can put your style rules in a separate file that is referenced in your HTML document, in this way you can apply a common style to a collection of HTML documents. Using external style sheets allows a site manager to change the style of an entire site by changing a single common style sheet. There are a couple of ways to reference an external style sheet, one uses the LINK tag inside the head of a document, the other uses an @IMPORT inside a STYLE section. First, an example using the LINK method.

<HEAD>
<TITLE>my title is foo</TITLE>
<LINK rel=stylesheet type="text/css"
      href=mystyle.css
      title="styletitle">
</HEAD>

The HREF can specify a relative URL (a local file) or any file on the internet! The syntax of the LINK tag must include the rel=stylesheet type=text/css stuff to work (this tells the browser the file referenced by href is a style sheet).

The stylesheet itself should just contain CSS style rules, just like the rules within the STYLE section of a document head. Here is what a stylesheet might look like:

  H1 { text-align: center;
       font-family: Times;
       font-size: 16pt;
       font-weight: bold;
       color: purple
     }

  H2 { text-align: left;
       font-family: Times;
       font-size: 14pt;
       font-weight: bold;
       color: purple
     }

Here is an example that applies the same stylesheet file, but here uses the @IMPORT within the STYLE section of the document head:

<HEAD>
<TITLE>my title is foo</TITLE>
<STYLE>
  @import url(mystyle.css);
</STYLE>
</HEAD>

We can include many style sheets, the order in which they are listed defines the order in which the rules are re-defined. So anything in the last file will override the earlier files, etc. We can also further override any definitions from these files with our own rules. An example:

 
<HEAD>
<TITLE>my title is foo</TITLE>
<STYLE>
  @import url(http://www.instyle.com/styles/peppy.css);
  @import url(http://www.nostyle.com/somber.css);
  BODY { color:aqua; text-align:left;}
</STYLE>
</HEAD>

Style sheets are usually stored in files with the extension ".css", which stands for "Cascading Style Sheets". Try loading a style sheet directly in to your browser and see what happens (Try both Netscape and IE!).