An Introduction to Cascading Style Sheets

Web sites are the backbone of the internet, but what many web surfers do not know is how hard it is to maintain these web sites. HTML can be cumbersome, especially when trying to change around a web site's layout and design. However, there is a better way. With the use of Cascading Style Sheets (CSS) you can keep your content and your design/layout completely seperated.

What is CSS?

CSS is a way to "style" your web site, without changing your HTML. CSS often exists in a seperate file and is used to control how HTML elements are displayed. The CSS file extension is ".css", and contains no content or information that would be of interest to the normal web surfer. Cascading Style Sheets are for design only and are a powerful tool to the serious web designer.

Benefits of Utilizing CSS

After you have grasped the basic concepts of CSS, you will be able to make sweeping changes to an entire web site with only a few changes to your CSS file. This is possible because many web pages can be styled from a single CSS file, not only allowing for easy maintenance, but also removing the chance of user error that might happen when trying to change many HTML files manually.

How do I Use CSS?

Getting started with CSS is quite simple. All you must do is let the browser know you are using CSS and specify the location of your CSS file. To begin, create a new HTML file, "index.html" and type in the HTML code that you see below. Inside the <link> tag we inform the browser that this web site uses CSS and the "href=test.css" tells the browser where our CSS file is located. Note: We will create the "test.css" file in the next step.

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

<h1>My First CSS Driven Web Site</h1>

Making Your First CSS File

Now that you have pointed the browser to right place it is time to create "test.css". Simply open notepad, or any other simple-text editor and save the file as "test.css". Make sure that it is saved in the same directory as your "index.html" file. As an introduction, we will start by simply changing the background color of your web site, which will let you know if you followed the directions correctly. Type the following code into your "test.css" file and save it when you have finished.

body{ background-color: blue;}

Now open your index.html file in a web browser and refresh it. The background should have changed from white to blue, the color that we specified in our CSS file.

CSS Syntax

Now that you have created a CSS modified web site, it is important to understand the format of CSS code. CSS is seperated into three distinct elements that must be included to make your CSS code functional. First, you must specify which HTML element you wish to format, this is known as the "selector". Second, the attribute you wish to modify is specified, this is known as the "property". Finally, you must define a value for that attribute, which is also known as "value". Combining these three elements you get the following:

selector{ property: value; }

And in our "test.css" we defined all these elements. The body was the selector. The background-color was the property, and the color blue was the value.

Defining Multiple Properties

To define multiple properties for a given selector, simply add property:value pairs inside the curly braces of your CSS code. Here is an example of changing the <body>'s background-color, color (font-color), and font-family and the <h1>'s background-color and border:

body{ background-color: blue;
color: white;
font-family: arial;}

h1{ background-color: white;
border: 1px solid black;}

Continuing Your CSS Learning

Hopefully you feel comfortable with the information provided in this article. Cascading Style Sheets are a wonderful tool to the web designer who is serious about exceptional web design. With CSS you can reduce your time previously spent on tedious HTML tasks and use your time on more important tasks, like developing better content and maybe getting some sleep! If you wish to further your knowledge of CSS, then I would recommend checking out the CSS Tutorial at

This article was written by Brian Pearl, a free-lance web designer and co-creator of Tizag Tutorials. Feel free to contact Brian Pearl with any questions or comments.

To reprint this article copy it in its entirity, including this disclaimer.

Link to Tizag