Cascading Style Sheets:
Learning the Basics (Part I)

by Wendy Stubley, Quill Contributor

Speaker: Char James-Tanny, President, JTF Associates, Inc. in
Lynn, Massachusetts

Web/Telephone Seminar hosted by: Peter Szabo at CheckFree i-Solutions

Overview

Are you still working with plain old HTML? Well, it's time to update your skills because Cascading Style Sheets (CSS) is where it's at now. Cascading style sheets are the new millennium update of the old Hypertext Markup Language (HTML). The good news is that you don't have to throw out your old HTML programming skills to modernize your skill set – just add CSS to your repertoire.

In her informative hour and a half Web/Telephone seminar, Char James-Tanny introduced us to the joys of creating and using CSS files.

What is a Cascading Style Sheet?

A cascading style sheet is a separate text file that contains formatting for all the HTML pages in a web site. It is placed in the same directory as your main Web page. If you want your main headings to be blue on your whole Web site, include the appropriate "main heading blue" command in your style sheet. The style sheet filename and filepath are noted in the <HEAD> section of your HTML pages, so all your Web pages will follow the style sheet format and have blue main headings. At any time, if you want to change the colour of all of your main headings, you don't have to go through each page of your site; you just update that style in your style sheet.

What are the advantages of CSS over HTML?

Ms. James-Tanny made some great points about the advantages of CSS over plain HTML. We learned that:

In the short term, HTML may be easier to code, but for maintenance of large sites, CSS is much faster and easier.
The content of your Web site is more important than how it's formatted. PDAs and screen readers for the disabled may not even be able to pick up the content of highly formatted HTML tables. They might just show blank pages. Accessible sites for people with special needs are easier to create with CSS than with plain HTML.
Your site will have a smaller size and will download faster with CSS than with tables and inline presentation tags. You don't need tables to make a nice-looking site. We were shown sample sites that were made with CSS and they looked sophisticated and organized.
Web pages that are printable versions of online pages can be easily created using CSS. To do this, copy the main CSS file and change a few lines to printer-friendly format in the copied CSS file. Now, any web page that references the new CSS file will have printer-friendly formatting.

How do you actually write a CSS file?

Here's an example to give you an idea of the logic behind the CSS code. CSS syntax is based on the following elements:

selector {property : value; }

selector is the type of formatting you want to define. Heading (or h1 in HTML) is a selector.

property is an attribute of the selector. Font size is a property of h1.

value is a description of the property. 140% is a value of font size.

So if you want all of the pages in your Web site to have a primary heading of size 140%, you would include the following line in your CSS file:

h1 {font-size: 140%;}

You must be precise about the rules when creating a CSS. Punctuation is very important. Invalid CSS or HTML pages will be ignored by your browser.

Conclusion

It looks like CSS is here to stay, so brush up your web development skills and create awesome sites that are quick to download, easy to maintain, and universally readable.

Watch for details in next month's newsletter about Part II of the cascading style sheets Web/Telephone seminar.

About Wendy Stubley

Wendy is a freelance technical writer and a senior member of the STC. She lives in Waterloo with her husband and two children. In her spare time, Wendy enjoys sculpting, photography, and hiking.

In this issue:

Cascading Style Sheets: Learning the Basics (Part I)