Introduction to Cascading Style Sheets
Cascading Style Sheets are a tool used to separate the presentation of Web page elements from the HTML or XHTML code. Style sheets may make subsequent editing of a Web site easier and quicker. In other instances they can also be used to enhance the browsing experience of Web site visitors. The many facets of Cascading Style Sheets allow a Web design extra freedom that might not be available in traditional HTML designs.
In this tutorial you will be introduced to the basics of Cascading Style Sheets, including:
The Interactive Media Center offers free classes on Cascading Style Sheets. You can investigate the CSS class (and our other classes, too) by going to http://library.albany.edu/imc/signup_form.htm.
Types of Cascading Style Sheets
There are three basic types of Cascading Style Sheets:
1 — Linked — Linked style sheets feature one or more Web page files that are linked to a separate Cascading Style Sheet document. A linked style sheet can affect one, some, or all pages within a Web site.
2 — Embedded — Embedded style sheets are written within the head (<head></head>) portion of a Web page. They affect only the page in which they are written.
Would you like to see the code for this page? By clicking here (this will open in a new page) you can see the "behind the scenes" code that makes this page work. The page will open in a new window. Notice that there are no tables! This page makes extensive use of a linked Cascading Style Sheet.
3 — Inline Style Sheets - Inline Style sheets are styles that are located directly within the code of a page at the place where they are applied. An example is:
<a style-"text-decoration:none" href="about.htm">Link to our About Us page</a>
In this case the hyper link to a page named "about.htm" appears without underlining. But it does not affect any other link or element on the page.