2. Web Presentation Technologies

Cascading Style Sheets (CSS)

Author: Russell Bateman

Objective: Use CSS to customize display of HTML.

A Brief Introduction

Just as for the HTML presentation, this introduction is to give you the 60,000 foot view of CSS so that as you plunge into the tutorial, you already know what to expect.

The cascading styles is a way to impose consistent style upon one or more HTML documents. Styles can be applied to most HTML tags so that when the tags appear in the document, the browser doesn't give them the default interpretation, but an enhanced one that you specify. Some advantages to CSS are

• not having to respecify the format you wish to impose each time an HTML tag is used,
• can organize a collection of web pages turning them into a consistent set that look and feel identical across and infinite number of them with a corresponding reduction in the number of things a webpage author needs to keep in mind as he generates pages over time,
• slightly accelerate webpage display because the browser doesn't have to interpret every style change for ever tag to which it applies; the size of the webpage can be drastically reduced depending on how much is given over to style.

You will see styles applied in two different ways to HTML documents:

• using the <style> ... </style> tag,
• by way of isolating them in an included file.

In the first case, the syntax is simply

   <style>
   (style statements)
   </style>

Such enhancements to your page only apply locally—to your page and do not affect other pages you may link to.

In the second, a statement in the header of the HTML document will include a file containing any number of style statements. For example, at the top of the page you are reading is the following HTML command:

   <link rel="stylesheet" href="webpres.css" type="text/css" />

This directs the browser to look for a file named webpres.css and draw in the changes to default tag behavior appearing there. Inside this file are only style statements—there is no need to use the <style> tag.

If all the pages on your website including the same CSS file, then any change you make to that CSS file will be immediately reflected through your entire site.

Cascading style statements are most often of one of these two forms:

   tag { directive; }
   .classname { directive; }

where tag is an HTML tag like <p>, <td>, <li>, etc.; directive is one or more commands in the CSS formalism for specifying changes to format; and classname is any valid identifier, ostensibly with an appropriate name, you wish to use.

The creation of a classname makes it so that with any tag that makes sense, you can create multiple ways for that tag to behave, meaning that you don't need to choose one font face and weight for a header tag (like <h3>) and can never have anything else. Instead, you can specify directly in the tag what class of behavior the browser must respect. For example, at the top of this page is repeated the module heading, "2. Web Presentation Technologies." I wanted to repeat it to tie this page to its sibling pages on HTML and JavaScript, but this banner must not drown out the proper heading or title of this page which is "Cascading Style Sheets." In the included styles I have defined

   .banner { color: gray; }

which instructs the browser to make grey the text of any tag applying the class name "banner." Thus, my header tag at the top of this page is

   <h1 class="banner"> 2. Web Presentation Technologies </h1>

Links

• http://www.w3schools.com/css/default.asp
• http://www.w3.org/MarkUp/Guide/Style.html (short and sweet)
• http://webreference.com/
• http://www.webreference.com/programming/css_gallery2/index.html (exercise for this module)

Assignment

1. Imitate the index.html document on this site by placing a style statement into the header of your own page to change the font of all text tags to display Georgia.

2. Next, move that statement into a file with the suffix .css and including it, using the syntax of the example above, in your page. Remember: you do not have to use the <style> tag if you only include a CSS source file.

3. Add a style class to your CSS file to modify tags additionally to the Georgia font setting from exercise 1 and reflect this new capability on one or more of the tags on your page.