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.

Property Values

There are a number of different kinds of values that are specified using style settings, including colors, lengths, numbers, percentages and urls. Here are a few guidelines for how to specify various kinds (types) of values:

• Colors: a common color name like "white" or "green" is fine. You can also specify a color by providing a hexadecimal number prefixed by the '#' character. The hex number indicates the amount of red, green and blue in the color - the first 2 hex digits correspond to red, the second 2 to green and the last 2 inidicate how much blue. Below are some examples:

  Color Value Description #808080 A shade of gray (1/2 red, green and blue) #FF0000 red(no green or blue) #FF00FF purple(full red, full blue, no green) #FFFFFF white (full red, green or blue) #AA99AA almost a shade of gray, but a little less green than red or blue




• Lengths: there are lots of style properties whose value is specified as some kind of length, including font sizes, indentation, spacing, etc. Lengths are specified using a number followed by a 2 letter code that indicates the units. Some of the common unit codes are demonstrated below:

  Unit Code Units Examples em Overall height of current font Hello <SPAN style="font-size:2em">World</SPAN> Hello World px Pixels Hello <SPAN style="font-size:8px">World</SPAN> Hello World in Inches Hello <SPAN style="font-size:.5in">World</SPAN> Hello World pt Points size (72.27 points/inch) Hello <SPAN style="font-size:8pt">World</SPAN> Hello World




• URLs: When urls are used as a property value, you must specify the keyword url followed by the actual url inside parentheses. An example:

  <body style="background-image: url(http://www.cs.rpi.edu/~hollingd/eiw/cookie.gif)">

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>

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. Here we use the DIV 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 changing colors soon. Once I change
I'll start a span with some other stuff, perhaps a red background.
OK here goes.
<SPAN style="background-color:red; color:white">
This part of the paragraph should have a red background
and the text should be in white. 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 red background.
</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.

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

Box properties control how things are placed within a box by the browser. All HTML elements are placed in a box by the browser to determine where to start and stop drawing them. These (invisible) boxes control the layout of an entire page. Here are some of the box properties:

Here is an example using some box properties.

<P style="border-style: solid;border-color:black; border-width:10px;
width:2in"> This paragraph has a thick black border around it and is 2
inches wide.</P>

<P style="border-style:solid; border-color:red; border-width:1px;
margin: .5in"> This paragraph has a thin red border around it a
whopping 1/2 inch margin.  </P>

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):

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:

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. To apply an external style sheet to an HTML document, the HTML document should have a LINK tag in the head that references the descired style sheet. Here is an example:

<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
     }

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!).