This is a very basic introduction to style sheets. For a full description, check out http://www.w3.org/TR/REC-CSS1-961217.html
There are two ways to include a style sheet in a document. The first way is the most useful
<head> <link rel="stylesheet" type="text/css" href="/styles/cgs4854.css"> </head>
Place all the style definitions in the cgs4854.css file.
The second way is for a one-time style sheet. Perhaps you are creating a temporary page and want to add some styles to it, and you don't want to ever use these styles again. (It is actually difficult to imagine such a situation. If you are going to all the trouble to create a style, then it is better to place it in its own file to be reused.)
<head> <style type="text/css"> [place all of the style definitions here] </style> </head>
There are many different ways that length can be specified in a style sheet
It is possible to define styles for all elements in a document. The basic properties to set are
The above properties should be included within curly braces after the name of the tag to be affected. To affect the entire document, include the properties with the BODY tag. The following will make the text color red for the document, and everything will be aligned to the center.
BODY {
color: red;
text-align: center;
}
It is also possible to define styles for just a paragraph, table, or any HTML tag. The following will force all paragraphs to have blue text and to be aligned to the right.
P {
color: blue;
text-align: right;
}
It is possible to have the same style apply to serveral tags. Use a comma to separate the names of tags that should use this style. The following style would apply to all H1 and H2 tags
H1, H2 {
text-align: center;
}
It is possible to indicate that a style should be used only if it is nested inside other tags. Specify the order of nested tags that must appear in order to use this sytle. For example, to control a heading that appears inside a table element, do the following
TD H1 {
font-size: 20pt;
}
It is also possible to define several styles for a specific tag. For instance, the <TD> tag could have several styles like these
TD.MONEY {
color: green;
text-align: left;
}
TD.SKY {
color: lightblue;
text-align: center;
}
Then the particular TD would be specified with the class attribute within the TD tag in the HTML code.
It is possible to create a named style that can be used with all tags. I call this a generic style. It is similar to the definition of a named style, but it is not associated with a specific tag.
.ALERT {
color: orange;
font-size: 200%;
}
Such a style can be used with any HTML tag.
Here is an example of the code for a page that uses the above styles. Notice how the specific TD tag is specified by <TD class=money> or <TD class=sky>. (For demonstration purposes only, I am including the style directly in the page.)
<HTML>
<HEAD>
<STYLE type="text/css">
BODY {
color: red;
text-align: center;
}
P {
color: blue;
text-align: right;
}
TD.money {
color: green;
text-align: right;
}
TD.sky {
color: lightblue;
text-align: center;
}
</STYLE>
<TITLE>Test page for CSS</TITLE>
</HEAD>
<BODY>
This is some text that is not included in a paragraph. It should be red and centered.
<P>
This is the text for the paragraph. It should be blue and aligned right.
</P>
<TABLE border>
<TR>
<TD width="400">Normal Text</TD>
<TD width="400">is Red but not Centered. It is red because the Red of the Body has cascaded into the table. It is not centered because tables have a default alignment of Left, so the Center of the Body does not cascade.</TD>
</TR>
<TR>
<TD class=money>In a TD, Money</TD>
<TD class=money>is Green and Right</TD>
</TR>
<TR>
<TD class=sky>In a TD, Sky</TD>
<TD class=sky>is Blue and Centered</TD>
</TR>
</TABLE>
<P>
This is in a paragraph, too
</P>
This is not in a paragraph
</BODY></HTML>
Check out this link for an example that uses a style sheet with the above properties: test.css.html
In addition to the normal tags like BODY, P and TD, there are some pseudo-tags that allow the hypertext links to be controlled.