Overview of Cascading Style Sheets

For a more detailed introduction to CSS please refer to the W3C get started guide. This tutorial is a brief overview of CSS to let you write your first CSS. The first thing you should know is that only browsers version 4 and above can see style sheets. Firefox and Internet Explorer also see some CSS differently, what makes creating a style sheet an exercise in keeping track of what will be seen by both, and/or writing JavaScripts to show different style sheets for each of the browsers.

Style sheets can be entered in an existing HTML page or created as separated files and referenced in a page in which you want to apply a style. The following line in italic and red color was created by a style inside the HEAD tag in this page. See the code below it to know how it was done.

A simple example

<HEAD>

<TITLE>CSS overview</TITLE>

<!--

h3 { font-family: Arial; font-style: italic; color: red }

-->

</STYLE>
</HEAD>

I could also have created a style file (a regular text file) and made reference to it in this page. See an example of how this could have been done in this page. As you can see creating basic CSS is easy to do.

Basic concepts

Let us now see the concepts which make it work:

a CSS is a set of rules defining the styles for a page or set of pages.
a rule is composed of selectors and declarations.
a selector is an HTML element, like h3 used in our example above.
a declaration is comprised of a property and a value. In our example font-family, font-style and color were properties of the selector h3. Arial, italic and red were the values assigned, respectively, to the properties.
Compatibility with different browsers is difficult to achieve, but this table shows how CSS behaves in each browser. You can see in this article tips to write CSS properties that work with what type and version of the browsers.

You can use the Web Developers Virtual Library CSS page to create more advanced styles.

This page is maintained by Al Bento who can be reached at abento@ubalt.edu This page was last updated on February 28, 2010. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.