An Introduction to Cascading Style Sheets
Cascading Style Sheets allow designers to precisely control various attributes of their documents, but also allow users to continue to effect certain attributes.
Styles are defined in either the header of a document, in specific HTML tags, or in a separate document which can be referenced by multiple HTML pages. Styles can inherit properties from one another -- thus, the description of them as being cascading.
Basic syntax of CSS
The basic mechanics of CSS includes the following components: selectors, declarations, and properties.
Here h2 is the selector, color is a declaration, and red is a property.
<![CDATA[
h2 { color: red }
]]>
The example below shows one simple way to reference a style, where the style is declared in the header of a document. Each example of the h2 tag will appear red in a browser which supports CSS.
<![CDATA[
<head>
<title>document title</title>
<style>
h2 { color: red }
</style>
</head>
<body>
<h2>headline is red</h2>
</body>
]]>
Stylesheets can be invoked through a link statement to a global stylesheet.
<![CDATA[
<html>
<head>
<title>document title</title>
<link rel=stylesheet type="text/css" href="../mystyles.css">
</head>
<body>
]]>
Declarations can be grouped, as follows:
<![CDATA[
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
]]>
or as follows:
<![CDATA[body { background: #FF0000 url(images/example.jpg) no-repeat fixed; }]]>
In addition to declaring tags, "classes" can be defined. "Classes" are indicated by a period (.) that precedes them.
<![CDATA[
<style>
h1 {font-family: san-serif; font-size: 24pt}
h2 {font-family: san-serif; font-size: 18pt}
.red {color: red}
.green {color: green}
</style>
]]>
Tags and classes can then be used in combination:
<![CDATA[
<h1 class="red">This is rendered as 24-point red san-serif text.</h1>
]]>
The content of mystyles.css may look somethings like this:
<![CDATA[
body { font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
color: #000000;
background-color: #FFFFFF
}
a:link {color : 990000; text-decoration : none; }
a:active {color : 522455; text-decoration: none; }
a:visited {color : 990000; text-decoration: none;}
a:hover {color : 522455; text-decoration: underline;}
#content {
position:absolute;
margin-right:30px;
margin-left:215px;
width: 70%;
}
.description {
font-family:verdana, arial, sans-serif;
color:#333;
font-size:small;
text-transform:none;
}
]]>
The above stylesheet examples use "identifiers" indicated by the pound sign (#) and "classes" which are indicated by the period (.) that precedes them.
The HTML page that references the stylesheet can then use the identifiers and classes in combination, by using the DIV tag.
<![CDATA[
<div id="content">
Content with margin formatting.
<div class="description">
Content with margin and font formatting
</div>
</div>
]]>