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

Introduction to Cascading Style Sheets
Style, Styles, and Techniques

Although the syntax of Cascading Style Sheets is very strict, as you will find out as soon as you misplace a curly bracket, the actual writing style is fairly loose. For instance;

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px;
font-weight: normal; color #999900; background-color: #ffffff; }

is exactly the same as:

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color #999900;
background-color: #ffffff;
}

In fact, it is also possible to write the style as:

h2 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color #999900;
background-color: #ffffff; }

In all three examples the text will look like this.

The technique you use for writing styles should be based on how easy it is for you to edit and find any problems that might arise. However, if you use an editor, such as Dreamweaver MX 2004, you might be locked into the editor's method.

Try It!
You have some options for this part of the exercise. You may copy and paste the code into your NotePad file. The code is clicking right here, it will be displayed in a new page in your browser.

The text step is to actually try editing a Web page with Cascading Style Sheets. You can do this using either NotePad, Dreamweaver, or another CSS editing tool. But to really get the feeling for how styles sheets work, we suggest you use NotePad and the next steps will show you how to use it to edit CSS.

Open a new file in NotePad and type or paste the following XHTML code into the document:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

This code snippet has the basic elements you need to create a new Web page using XHTML. XHTML is a more advanced form of HTML and has rules that must be followed closely. Anybody who is familiar with regular HTML will have little difficulty adjusting to XHTML.

The next thing to do is to add some text and format it with the h1 and h2 tags. Add this bit of code into the body of the page:

<h1>This is an example of Heading 1.</h1>
<h2> This is an example of Heading 2.</h2>

To see what the entire code for the page should look like, click here and a new window will open with the code displayed inside. Close the window when you are done.

Now copy and paste the style below into the head of the Web page. The code goes into the head because this is an embedded style. The new snippet of code is:

<style type'"text/css">
<!--
h1 {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #336633;
}
-->
</style>

The entire code sequence can be viewed by clicking here. Again, a new window will open with the code displayed inside. Close the window when you are done.

What do all the parts of the above code snippet mean? It is really quite easy. Click here to see the code decoded!

The step will be to test your new Web page.

Page 4

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