Information Systems College of Business Administration University of Missouri - St. Louis

Cascading Style Sheets

Style sheets represent one or more rules that guided how HTML is interpreted. Style rules have two parts: the selector and the declaration. The rules always appear in the "heading" section (between <HEAD> and </HEAD> and before the <BODY ....> section of the page), and must be identified as style rules.

<STYLE TYPE="text/css">
Selector {property: value}

In this example,
  • <STYLE TYPE="text/css"> and </STYLE> identify the code as style rules.

  • The selector are the HTML tags to which the rule will apply.

    • Any HTML tag can be a selector. For example, the heading tag, <H1> is the selector in the example below. Note, you do not put the pointed brackets (<, and >) around the selector in the style commands.

      H1   {font-family:"arial"}

    • Multiple selectors can be assigned to the same declaration by separating them with commas. For example, if you wanted to control the font family of <H1> and <H2> your statement would be:

      H1, H2    {font-family:"arial"}

  • The declaration identifies the property that will be affected by the style rule and the value to be assigned to that property.

    • Declaration/value pairs are always put in "curly braces" {  } For example,

      H1    {font-family:"arial"}

    • You must put a colon (:) after the declaration to indicate the beginning of the value. In the example above, the declaration is 'font family' and the value is '"arial"'. Fonts and font families are the only thing around which one puts quotes.
    • Multiple declarations can accompany a given selector. If you have multiple declaration/value pairs, these are separated by a semicolon (;). For example, if you wanted to control not only the family, but also the color of the heading tag, <H1>, your statement would be:

      H1   {font-family:"arial"; color:purple}

  • Note, the <!-- and --> do not really have an impact on the style sheet. These are HTML code for "the beginning of a comment" and "the end of a comment," respectively, within the style block. Their real purpose is to keep browsers that are not able to handle style sheets from misinterpreting the code in between them. That is, if the browser does not know how to process style sheets, it will take everything between these two tags as a comment, and thus ignore them.

    If you would like to comment on your style rules, you begin the comment with /* and end the comment with */. For example,

    H1   {color: purple}      /*this turns all first level headings purple*/
This particular page has a simple style sheet as shown below.

<STYLE TYPE="text/css">
H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
H4 {font: 16pt}

The first command simply causes all text that is governed by a "heading tag" to use the font-family of "arial," So, if I eliminate the heading tag use with a </font>,

we get a font face change like this.

Or, look at the example page that does not have the first line of the style command in it at all.

The second command makes the <h4> tag always appear at 10 point. See an example of a page that uses 22 point instead. he only difference in the pages up until that point is that I substituted the following code in the style sheet.

H4 {font-size:22pt}

| Go to UM-St. Louis Home Page | College of Business Page | IS Home Page | Resource Page |

Page Owner: Professor Sauter (