Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) are used to define the attributes of the tags in your HTML documents. Although not required, they make designing and, more importantly, updating HTML documents much more efficient. For example, if you have defined the BODY tag in a linked style sheet to display the page with a white background and black text, you can change the background to yellow in one file--the style sheet--and that change appears in every one of your HTML documents that are linked to that style sheet. You can also have more than one style sheet if you want different sections of your site to have a different look.
When you use a style sheet, you do not need to add the attributes for the BODY tag to every single HTML document. The BODY tag is defined in the style sheet and each of your Web pages contain a link to the style sheet. The link to your style sheet is one tag you might want to add to your default template.
For example, if your style sheet is named default.css, you would add the following tag between the <HEAD></HEAD> tags of your default template, after the META tags:
<link rel="StyleSheet" href="default.css">
In the example above, the style sheet is placed in the same directory as the HTML documents to which it is linked. If it is not in the same directory, you need to add the path to the style sheet in the link. For example, if your HTML documents are in a folder called htms and your style sheet is in a folder called css, and both of those folders are in a folder called myweb, you would type the link as follows:
<link rel="StyleSheet" href="../css/default.css">
The ../css/ part of the tag (red text shown for emphasis only) tells CuteFTP to search up one directory and look in the css directory for the file.
Your style sheet can contain just one tag or several tags, such as default paragraph font face, size, color, and margins, table format, heading styles, headers, footers, and so on.
Visit the W3.org website "Cascading Style Sheets" for details of learning and using CSS.
Below is an example style sheet that you can use start your own style sheet. The style sheet contains definitions for headings, paragraphs, lists, and hyperlinks.
H1 {
font-weight: bold;
font-style: normal;
margin-top: 6pt;
font-size: 16pt;
margin-bottom: 6pt;
color: #0066b3;
font-family: Arial;
x-next-class: ;
x-next-type: P;
}
H2 {
font-style: normal;
margin-bottom: 6pt;
color: #2373b9;
margin-top: 6pt;
font-size: 14pt;
font-family: Arial;
x-next-class: ;
x-next-type: P;
}
H3 {
font-style: normal;
margin-bottom: 6pt;
font-variant: normal;
margin-top: 6pt;
font-size: 12pt;
font-family: Arial;
x-next-class: ;
x-next-type: P;
color: #2373b9;
text-decoration: none;
}
H4 {
font-weight: bold;
margin-bottom: 6pt;
color: #9d9fa2;
border-top-style: Solid;
border-top-width: 1px;
border-bottom-style: Solid;
border-bottom-width: 1px;
font-size: 10pt;
font-family: Arial;
x-next-class: ;
x-next-type: P;
text-decoration: none;
}
H5 {
font-weight: bold;
x-next-type: P;
font-family: Arial, "color: #000000";
font-size: 10pt;
margin-bottom: 6pt;
margin-top: 6pt;
border-top-style: Solid;
border-top-width: 1px;
border-bottom-style: Double;
border-bottom-width: 1px;
border-top-color: #000000;
border-bottom-color: #000000;
}
H6 {
font-weight: bold;
margin-top: 0pt;
margin-bottom: 6pt;
font-size: 10pt;
font-family: Arial, "color: #000000";
}
P {
color: #000000;
margin-left: 0px;
font-size: 10pt;
font-family: Arial;
margin-top: 3pt;
margin-bottom: 3pt;
}
LI.P {
font-size: 10pt;
font-family: Arial, "color: #000000";
}
OL {
margin-top: 3pt;
margin-bottom: 3pt;
font-family: Arial, "font-size: Small";
}
UL {
margin-top: 3pt;
margin-bottom: 3pt;
font-family: Arial, "font-size: 10pt";
}
A:active {
color: #ff0000;
}
A:hover {
color: #ff0000;
text-decoration: underline underline underline;
}
A:link {
color: #0000ff;
}
A:visited {
color: #800080;
}
P.Coding {
font-family: "Courier New", monospace;
margin-left: 18pt;
margin-top: 0pt;
margin-bottom: 0pt;
font-size: 9pt;
background-color: #e9e9e9;
}
P.BackToTop {
margin-top: 6pt;
margin-bottom: 6pt;
font-style: italic;
font-weight: normal;
font-size: 10pt;
}