Introduction to Cascading Style Sheets
Introduction
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:

 

Types of Cascading Style Sheets
There are three basic types of Cascading Style Sheets:

Diagram of linked Cascading Style Sheets1 — 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.

Diagram of embedded style sheets

Would you like to see the code for this page? By clicking here 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.

Page 1

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