<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Introduction to Cascading Style Sheets from the Interactive Media Center - Page 1</title>
<link href="pagestyles.css" rel="stylesheet" type="text/css" />
<meta name="robots" content="index, follow" />
</head>

<body>
<!--#include virtual="/navbar/navbar.inc"-->
<div id="NavContainer"><a href="../index.htm">Return to the Interactive Media Center Web Site</a></div>

<div align="center">
<div id="container">
<div id="TopofPageBox">Introduction to Cascading Style Sheets</div>
<div id="LeftRightBox"><a href="page2.htm">Next Page ---&gt; </a></div>
<div class="HeadLineBox">Introduction</div>
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.
<p>In this tutorial you will be introduced to the basics of Cascading Style Sheets, including: </p>
<ul>
<li>The different types of style sheets.
<ul>
<li><a href="index.htm#linked">Linked style sheets</a>.</li>
<li><a href="index.htm#embed">Embedded style sheets</a>.</li>
<li><a href="index.htm#inline">Inline style sheets</a>. </li>
</ul>
</li>
<li><a href="page2.htm#how">How Cascading Style Sheets work</a>.</li>
<li><a href="page2.htm#what">What the Cascade is</a>.</li>
<li> <a href="page2.htm#advant">The advantages of CSS</a>. </li>
<li><a href="page3.htm#rules">The basic rules and components of CSS</a>.</li>
<li><a href="page4.htm#tech">CSS styles and techniques</a>. </li>
<li> <a href="page6.htm#class">Classes and IDs</a>.</li>
<li><a href="page7.htm#inh">Inheritance and the Cascade</a>.</li>
<li><a href="page8.htm#alig">Alignment and text positioning</a>.</li>
<li><a href="page8.htm#bab">Border and backgrounds</a>. </li>
</ul>
<p>&nbsp;</p>
<div class="HeadLineBox">Types of Cascading Style Sheets</div>


There are three basic types of Cascading Style Sheets:

<p><a name="linked" id="linked"></a><img src="images/linked.gif" alt="Diagram of linked Cascading Style Sheets" name="Linked" width="279" height="114" border="0" id="Linked" /><span class="MainTextBold"><a name="embedded" id="embedded"></a>1 &#8212; Linked</span> &#8212; 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. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p ><span class="MainTextBold"><a name="embed" id="embed"></a>2 &#8212; Embedded</span> &#8212; Embedded style sheets are written within the head (&lt;head&gt;&lt;/head&gt;) portion of a Web page. They affect only the page in which they are written. </p>

<div align="center"><img src="images/embeddedCSS.gif" alt="Diagram of embedded style sheets" name="embedded" width="632" height="197" border="0" id="embedded" />
</div>
<div align="center">
<p align="center" class="WideExampleBox">Would you like to see the code for this page? By <a href="documents/indexcode.txt" target="_blank">clicking here</a> you can see the &quot;behind the scenes&quot; 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.</p>
</div>
<p><span class="MainTextBold"><a name="inline" id="inline"></a>3 &#8212; Inline Style Sheets</span> - 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: </p>
<p align="center" class="LinkExample">&lt;a style-&quot;text-decoration:none&quot; href=&quot;about.htm&quot;&gt;Link to our About Us page&lt;/a&gt;</p>
<p>In this case the hyper link to a page named &quot;about.htm&quot; appears without underlining. But it does not affect any other link or element on the page.</p>
<div align="center">
<div id="LeftRightBox"><a href="page2.htm">Next Page ---&gt; </a></div>
</div>
<div class="PageNumber">Page 1</div>
</div>
<p class="BottomCredits">Tutorial prepared by <a href="mailto:rlipera@uamail.albany.edu">Roger
Lipera</a><br />
<a href="index.htm">Interactive Media Center</a><br />
<a href="http://library.albany.edu/">University Libraries</a>, <a href="http://www.albany.edu/">University
at Albany</a></p>


</div>
</body>
</html>