Style Sheets
Formally speaking, a style sheet is nothing more than a simple rewrite grammar. In the body of a web page a browser may find a tag that looks like this:
<div class="special">Blah Blah</div>
The attribute class tells the browser to look in the style sheets associated with the page for a piece of code that looks like this:
.special {
[attribute-value list]
}
(Notice the dot in front of "special".) The browser substitutes for the attribute-value class: special the contents associated with the value special in the style sheet. The result is
<div style="[attribute-value list]">
The rewrite rule defined by the style sheet is:
class="special" → style="[attribute-value list]"
The emphasized portions are required by HTML/CSS syntax, and will be taken account of automatically by the browser. Effectively your contribution is the style-designator special and the contents associated with that designator in the style sheet.
You can also associate styles with HTML tags (see the stylesheet below). Specifying the style of an h1 tag, say, amounts to inserting a style attribute with the specified attributes into every h1 tag. If you define a body style, all the text in your document will use that style unless it is overridden.
The primary reason to specify styles for HTML tags is to override browser defaults. In the style sheet below you will see text-decoration: none; specified for anchor (a) tags. This will override the default setting for links, which in most browsers is underline unless the user has changed the default. Similarly in many browsers header tags (h1 and so forth) are put into boldface, which in large font sizes is unsightly. You can get rid of the boldface by specifying font-weight: 400; or font-weight: normal; for h1 and so forth.
Inline style sheets
A style sheet can be placed in the head of a document. The HTML/CSS preview form at the top of this page creates an HTML document and inserts the style information you specify in the first box between style tags in the head of that document. That style information will control the appearance of whatever code you put into the second box (which defines the contents of the body tag).
<head>
body {
h1 {
h2 {
.special {
a:link {
a:visited {
a:active {
a:hover {
</style>
</head>
<!--other stuff-->
<style>body {
}
h1 {
}
h2 {
}
.special {
}
a:link {
color: #222288;
text-decoration: none;
}
a:visited {
color: #883322;
text-decoration: none;
}
a:active {
color: #bbbb22;
text-decoration: none;
}
a:hover {
background-color: #aaaaaa;
text-decoration: none;
}
</style>
</head>
You can also link to an external style sheet using (of all things) the link tag. See the code below. You can use either relative or absolute URLs.
The advantage of using an external style sheet is that more than one page can link to the same sheet. You can thus have a single sheet that creates a uniform “look” for your site, and for those pages that deviate or add to it use inline style sheets. The following is part of the head section of my home page.
<!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" xml:lang="en" lang="en">
<head>
<title>Dennis Des Chene</title>
<base href="http://www.artsci.wustl.edu/~ddeschen/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<link rel="icon" href="Images/siteicon.jpg" type="image/jpg" />
<link rel="Stylesheet" href="styles/index.css" charset="utf-8" type="text/css" />
</head>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dennis Des Chene</title>
<base href="http://www.artsci.wustl.edu/~ddeschen/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<link rel="icon" href="Images/siteicon.jpg" type="image/jpg" />
<link rel="Stylesheet" href="styles/index.css" charset="utf-8" type="text/css" />
</head>
