What Are Cascading Style Sheets

We know that HTML is the programming language used primarily to create web pages for the Internet. With HTML we can create font effects like bolding and headings. We can format our pages nicely with tables and nested tables. Sure, we can do all of that and then, when we decide we want to change things around and make our site a different color, or use a different font? Then we're fiddling around with hundreds, or even thousands of replacements needing to be made in a seemingly infinite number of lines of code.

There is an easier way to handle these changes, an easier way to format our sites, and a way that we can create awesome effects for our sites with. That easier way? Cascading Style Sheets.

You can think of a cascading style sheet as a sort of template. These sheets include information about how we want our pages to be formatted, what fonts to use, what colors, what sizes. All of this is stored in the sheet and imported into our HTML files.

Let's take a look at a few lines from a cascading style sheet now and let you get the idea of what these sheets look like. Don't worry at this point about what the lines mean, rather, concentrade on the format.

a:link    {color: blue; background-color: white; text-decoration: underline; font-weight: bold;} 
a:hover   {color: blue; background-color: yellow; text-decoration: underline; font-weight: bold;} 
h1        {font-family:Arial; font-size: 4.2em font-weight: bold; text-align:center; background-color:black; color:yellow;}

Notice how the style sheet sections each begin with an HTML element, like the H1. What follows is enclosed between the {} and contains designations for various aspects of the element. Notice too, how, using cascading stylesheets we can control far more aspects of an element than we can with HTML. For example, setting the background color for H1 headings.

Cascading style sheets also allow us to create different classes of H1 headings, all using different values for the elements, all located within the same document. Style sheets have a seemingly endless number of uses and, best of all, they are used in conjunction with HTML. There is no new programming language to learn!

The Cascading Style Sheet (CSS) tutorials that follow will help you harness the power of HTML and use it to create interesting and eyecatching features for your web site.