University Libraries, University at Albany, SUNY Need Help? Search this Site Site Index
Home Catalog Database Finder Journals

Introduction to Cascading Style Sheets
<--- Previous Page | Next Page --->
Cascading Style Sheet Tools

Cascading Style Sheets do not require any special construction tools. Hand coders may prefer to work with Notepad. A number of Web editing programs are available for those who like to work with them. In classes in the Interactive Media Center we work with both NotePad and Dreamweaver from Adobe.

Getting Started — Rules, Parts, and Assembly

Cascading Style Sheets are built using a technique that may be familiar to those who write scripting, such as JavaScript. In fact, JavaScript writers will probably feel right at home with CSS because of the basic resemblance. But, Cascading Style Sheets are not JavaScript. Most newcomers will discover that style sheets are not very hard to figure out

Each style within a Cascading Style Sheet is made of three basic parts; the selector, the property, and attributes. The example below shows these main parts and how they are assembled into a style:

selector { property: attribute; }

The selector is the element to which the style is applied. That element can be an HTML tag, such as table <table>, or it can be something special called a "class" or an "id." We will learn more about classes and ids later.

The property is the "thing" that we will specify. It might be color, size, background, or any of many other features.

The attribute is how the property is specified. For example, color might be specified as #660066, the size as 1 em, or the border as solid.

An example of how a style might look is:

h1 { color:#cc6600; }

This style says that any text inside the h1 tag must be displayed with the color cc6600. (Which happens to be this shade of orange.)

NOTE: If a style doesn't seem to be working seem to be working right, check the curly brackets first. A misplaced or missing bracket is often the source of a problem, and is a simple fix.

But what about the funky symbols and "punctuation" in the style? These are actually very simple, but very important. The curly brackets, { }, indicate the start and stop points of the styles specifications. In the example above anything inside the curly brackets describes how the h1 should be displayed. If something is not within the brackets, it doesn't affect the appearance of h1. But, it also means that if the bracket is not in the proper place, or is missing, then the style is not formed properly and will not work correctly.

The colon, :, indicates that the information that follows refers to the property. In the above example it means, "The color will be the specification that follows."

The semicolon, ;, means that the the attribute for the style has ended.

Don't forget the spaces! Key to how everything goes together are two simple spaces. One space must be after the opening curly bracket, {, and the other space before the closing curly bracket. What happens if you leave them out? The browser will not know how to interpret the style without them, and the style will not work.

A more complicated style might look like this:

h1 { font-family: Arial; font-size: 12px; font-weight: bold; color: #660066; background-color: #ffffff;}

NOTE: One very important rule of Cascading Style Sheets is that whenever you have specified a color for your font you must also specify a background color, and vice versa! If you leave out one or the other, the page will not validate. Most browsers will display the text correctly, but the World Wide Web Consortium (W3C) says that is against the CSS rules.

The translation for this style is; "All h1 tags must be displayed in Arial font, 12 pixels high, bold, and wit the color 336633, and the background color is white."

And this sentence was created using that style.

But things can get a little bit tricky. Here is an example:

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #660066; background-color: #ffffff; }

The difference in this example is in the font-family property. This style tells the browser to display the text in Arial, but if Arial is not available, display it in Helvetica, but if neither Arial nor Helvetica are available, display it in the browser's default sans-serif font. A comma separates each attribute.

Here's a different sort of problem:

h1 { font-family: Times, "Times New Roman", serif; font-size: 12px; font-weight: bold; color: #660066; background-color: #ffffff; }

The problem here is with the font name "Times New Roman." In style sheets, elements made up of multiple words cannot have spaces between the words. Thus, font-weight and sans-serif are both perfectly fine because there is a hyphen between the words. But there is no such font as Times-New-Roman. Therefore it is necessary to enclose the font name within quotation marks."Times New Roman" is correct and works well.

Page 3

Tutorial prepared by Roger Lipera
Interactive Media Center
University Libraries, University at Albany