What is a Style Sheet?
A style sheet is a text file (with a .css extension) containing rules for how browsers should render an HTML page. A style sheet will override the browser defaults for each rule it contains. The format of each rule is a "specifier" (the name of the tag to be affected), and its "definition" composed of attribute/value pairs contained in brackets. Example:
SPECIFIER {attribute: value;}
H1 {color: red;}
You can have several tag specifiers and/or several definitions in each rule:
H1, H2, H3, H4 {color: #660000;}
ADDRESS {
color: #0099FF;
border-width: thin;
border-style: solid;
border-color: Navy;
text-align: center;
}
If a series of tag specifiers are separated by commas, the style definition will format each individual tag. If the tags are separated by spaces, the style will only format the tags to the right if they are nested within the tags on the left:
H1, NOBR {font-weight: bold;} will make all H1 and NOBR tags appear bold.
H1 NOBR {font-weight: bold;} will only affect NOBR tags nested inside an H1.
Each attribute: must end with a colon, each value; must end with a semi-colon.
How Do I Use a Style Sheet?
There are four methods of imposing style definitions on an HTML document.
- LINK to a style sheet from the HTML page
- Place a STYLE block in the HEAD of your HTML page
- Import a style sheet into an HTML style block using the @import url(http://www.host.com/path/stylesheet.css); syntax
- Inline; using a "STYLE" tag attribute to place the style definition inside the tag to be affected.
Each successive method overrides the previous in cascading order. This version of CSS Edit is designed to insert style blocks as described in Method 2.
If you would like to use an external style sheet (Method 1), each HTML page you want to be affected by the style sheet must contain a link to the style sheet in the HEAD similar to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>HTML page</TITLE>
<LINK REL=STYLESHEET
HREF="http://www.yourdomain.com/path/stylesheet.css"
TYPE="text/css">
</HEAD>
And that should do it. (The code has been indented to fit in help window)
Style sheets effectively replace the FONT tag, BGCOLOR, and TABLES as a method of formatting a page. It is also recommended that style sheets be used to format the TEXT, LINK, VLINK and ALINK attributes of the body.
Previously (code has been indented to fit in help window):
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#0000EE"
ALINK="#FF0000"
VLINK="#551A8B">
With style sheets:
BODY {
background-color: #FFFFFF;
color: #000000;
}
A:link {color: #0000EE;}
A:active {color: #FF0000;}
A:visited {color: #551A8B;}
The most efficient way to format the contents of an entire table (cross-platform) is with a CLASS attribute in each data cell. Classnames begin with a period in the style block, and NO period in the data cell attribute. The same technique can also be used for any tag that accepts CLASS as an attribute. This gives you the ability to override a specific tags' style "on the fly".
<HEAD>
<STYLE TYPE="text/css">
.classname {attribute: value;}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD CLASS="classname"></TD>
</TR>
</TABLE>
</BODY>