William M. Pegram
Home | Courses | Web Design | Office | Client-Side Scripting | Server-Side Scripting | About Me

Style Sheets

Principal Uses of Style Sheets

  1. Format a single web page or multiple web pages in a consistent way and in a way that permits easy changes to the formatting
  2. Achieve greater control over page layout and text appearance than is available with HTML
  3. Permit dynamic changes to page layout and text appearance in response to user decisions or other events (DHTML, which uses a scripting language such as JavaScript to dynamically change style sheet properties)

Types of Style Sheets 

Embedded Style Sheets

The embedded style sheet appears between the <HEAD> and </HEAD> tags.  Consider the following style sheet, which is derived from Teach Yourself HTML in 24 Hours:

<STYLE>
<!--
BODY {font-size:12 pt;
      font-family: "Book Antiqua";
      color: maroon;
      background: url(parchmnt.gif);
      }
H1 { font-size: 24 pt; 
     font-weight: bold}
-->
</STYLE>
The style sheet specifies that all text within the body be 12 point, maroon, and from the Book Antiqua font family.  The background of the page will be the parchmnt.gif file.  Text between within <H1></H1> tags should be 24pt. bold, overriding the 12 point specification from the <BODY> tag..  

Note that the syntax is slightly different than in HTML.  A style sheet attaches properties to an HTML tag.  The tag however does not appear between <> brackets.  The equal signs that are used in HTML (e.g.,  attribute=value) are replaced with colons in the style sheet (e.g. style sheet property: value) and a curly bracket is used to enclose the property : value pairs.  Thus the style sheet equivalent of the HTML <BODY BGCOLOR="red"> is BODY {background-color:  red} 

External Stylesheets

The style sheet could be used as an external style sheet by:

1. Putting the above code (without the <STYLE> and HTML comment tags) in a text file with a .css extension, and  
2. Putting a link to that file.  The link is specified in the <HEAD> section and the syntax is

<LINK REL=STYLESHEET TYPE="text/css" HREF="hhh.css">

As with other references in HTML, the reference to the external stylesheet may be either an absolute or relative reference.  CSS stands for "cascading style sheet".

Inline Styles

Styles can also be used for a single instance of an HTML tag, e.g.

<P STYLE="color: green">This text is green</P>

Styles done in this manner clearly do not facilitate formatting a page or several pages in a consistent manner (the first use of style sheets identified above), so the use of inline styles would normally be confined to effects not possible with HTML or if one wanted to avoid using deprecated tags such as the font tag..

Selectors

The syntax of an embedded or external style sheet is selector {property : value}  where selector is an HTML tag.  One can specify more than one selector, separated by commas.  If selectors are separated by spaces, the interpretation is that the second selector is in the context of the first selector.  Thus H1 I {color : red} will make all text red when it appears in the context of an H1 and an <i> tag, e.g. <h1><i>Sample text</i></h1>

<DIV> and <SPAN> Tags

If you want the style to apply to part of a page that isn't delimited by an existing tag, you can use either the <DIV> or <SPAN> tag and specify the style to apply to that tag.  <DIV> is a block level element, so it appears on its own line, whereas <SPAN> does not.

Classes

The uses of style sheets above affect only a single occurrence of an HTML tag or affect all occurrences of an HTML tag.  What about something in between -- that would affect some, but not all, instances of a tag?  To do this, one uses a "class".  For example, suppose that text between certain <H1> tags is to be green, whereas between other <H1> tags it is to be red.  In the style sheet one qualifies the tag as follows:

H1.redgroup { color: red }
H1.greengroup {color: green }

and then in the text, one writes 

<H1 CLASS="redgroup">Red text</H1>
<H1 CLASS="greengroup">Green text</H1>

 "redgroup" and "greengroup" here are arbitrary names.

Another use of classes is what is called a "generic class".  A generic class definition associates a class name with one or more style sheet properties.  The class definition is not made with respect to a particular HTML tag.  In the body section of the document where the class is used, the class is then used in conjunction with one or more HTML tags.  For example, the following definition:    

.important {color: red}  

defines the style for the generic class named "important".  One then uses in-line styles to apply this class to particular instances of one or more HTML tags, e.g. 

<H1 CLASS="important">Attention</H1>
<SPAN CLASS="important">Your account is past due. </SPAN>

ID

One can use the ID selector in an embedded or linked stylesheet and then apply the ID to a single instance of a tag. For example, 

#A {color: red }.

is the style sheet specification and <P ID="A"> New item added</P> would be an example of its application to a specific instance of a tag.  Note that in the style sheet specification, ID's are prefaced by # signs whereas class definitions are prefaced by a period.  

Note that the use of ID's and specification of inline styles are two alternative ways of applyling a style to a particular instance of a tag..  With id's, the style specification is place in the <head> and the instance of the tag references the id.  With an inline style, the style specification is placed within the particular instance of the tag and no id is used.  For simple applications, either method can be used; however, for DHTML applications, one will use an ID since the ID is then referenced in the scripting language (e.g. JavaScript).

Specifying Size and Color

For size, one can specify a variety of units of measurement: pixel, point, pica, em, ex, inch, millimeters, centimeters.   Color can be specified by name, or by RGB value in hexadecimal, decimal, or percentage notation, i.e., color: #0000FF or color: rgb(0,0,255) or color: rgb(0%, 0%, 100%). Style sheets thus give the web designer more control over text appeearance than is possible with HTML; however, some style sheet properties restrict the ability of the user to adjust text size in their browser. For example, the following line of text is specified using CSS to be 12 point; in Internet Explorer, the user cannot alter the size of this text through View>Text Size which they could do under other specifications (e.g. the size attribute of the font tag, or some other CSS units).

This text is specified as 12 point size in CSS.

Properties

There are many style sheet properties.  Which properties can be applied depends on the HTML tag.  Here are some commonly-used ones.

Type properties:

Background properties:

Box properties

List properties

Pseudo-Selectors

Examples of pseudo-selectors:

P:first-line {letter-spacing: 6 pt} 
P:first-letter {color : red} 
A:link {color : red} 
A:visited {color : blue} 
A:active {color: maroon} 
A:hover {color : purple} 

Hover is very useful for mouseover effects with text. Hover is supported in Internet Explorer and in Netscape 6 and later, but is not supported in Netscape 4.x and earlier.  The equivalent effect can be obtained with Netscape 4, with more difficulty, using layers.

Positioning within Style Sheets

The position property has five possible values: absolute, relative, static, fixed, and inherit.  

If within a style sheet, one had the following code

<H1 {position: relative; top: 20 px; left: 12 px; }

then any text appearing between <h1> and </h1> tags would appear 20 pixels down and 12 pixels to the right of where it would otherwise appear.

z-index -- Elements with higher -index values obscure those with lower values when they overlap.

overflow - 4 possible values: visible, hidden, scroll, and auto (scroll bar if necessary).

Media

CSS permits specifying different CSS rules depending on the media displaying the page. Thus one can have a different display on the screen than in print. This can be done in a four different ways:

  1. Within a single stylesheet (either embedded or external), one can specify the rules for different media, e.g.

    @media screen {
    BODY, td { background-color: rgb(254,213,133); font-family:Arial, Helvetica, sans-serif;
    font-size: 10pt;}
    }
    @media print {
    BODY, td { background-color: rgb(254,213,133); font-family:"Times New Roman", Times, serif;
    font-size: 12pt;}
    }

  2. These rules can be in separate stylesheets, where the media attribute is part of the link tag, e.g

    <link rel=stylesheet type="text/css" href="fooprint.css" media="print">
    <link rel=stylesheet type="text/css" href="fooscreen.css" media="screen">

  3. These rules can be in two embedded stylesheets, e.g
    <style media="print"> ... </style>
    <style media="screen"> ...</style>
  4. Using import, e.g.
    <style>
    @import url(brower.css) screen;
    @import url(print.css) screen
    </style>

Inheritance and "Cascading" Style Sheets

Stylesheet specifications may conflict with other specifications or with HTML. Although the rules about what results are somewhat complex, the two most important principles are specificity and order of specification:

Browser Support

CSS is supported in Internet 3 and Netscape Navigator 4.0 and later; in other browsers, the style specification is ignored. More recent versions of IE and Netscape support more CSS features than earlier ones, but some CSS features remain unsupported even in the latest browsers. Netscape does not appear to recognize style sheet positioning for elements that do not have a closing tag.  Thus for example, one cannot use it within an <img> tag.  The solution is to use <span> or <div> tags around the element to be positioned, and position the <span> or <div> tag instead of the <img> tag.  In Netscape, use of the technique where absolute positioning can be relative to the position of a surrounding <div> or <span> tag rather than the upper left hand corner of the document, seems to disable subsequent style sheet features on the page.      

Revised: January 25, 2006. Comments to William Pegram, wpegram@nvcc.edu.