HTML Help Online

Getting Started
Editors
Design Tips
Home

HTML:

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
Tables
Frames
Forms

More Than HTML:

Audio
Meta Tags
JavaScript
Cut & Paste JScripts
>>Style Sheets
IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set

Help Desk:
Quick Reference

Free Stuff:

Graphic Designs
Fonts
Midis

Style Sheets

Style sheets are basically templates that control the appearance of your page on the screen. Browser versions capable of reading Cascading Style Sheets are: MS Internet Explorer 3.0+, Opera 3.0+, and Netscape Navigator 4.0+. For a complete list of browser compatibility visit Webreview. To read more about CSS visit World Wide Web Consortium (W3C).

Ok, let's get to the basics:

<style type="text/css">

</style>

The above code is the 'container' for all style specifications. It will appear in the <head> of the document.

<style type="text/css">
A:link {color:red}
A:visited {color:black}
H1 {font-family: brush; font-style: italics; color: red;}
P {font-family: arial,san-serif; font-size:18px;}
TD {background-color: black; color:FFCCFF;}
</style>

Breaking it all down,

First line: effects the color of the links.
Second line: effects the color of the visited links.
Third line: effects the <H1> command. Each heading 1 will be in the font "Brush", emphasized, and the color red.
Fourth line: effects the <P> command. All paragraphs will be in the font "Arial" and 18 pixels in height.
Fifth line: effects the <TD> command. All table cells will have a black background with text being a beige color.

For large or complicated style sheets, you can create a separate file and link it to your documents:

First create a file named style.css in a ASCII text editor containing all of your style information:
Then link the file in your HTML document as so:

<HEAD>
<TITLE></TITLE>
<LINK REL="stylesheet" type="text/css" href="style.css" title="mystyle">
</HEAD>

Or, you can import the style sheet file in the style element:

<style type="text/css">

</style>

Multiple external style sheets are possible by adding multiple <LINK=> elements or @import statements. Where the styles conflict, the last links or imports will override previous ones, and those will be overridden by rules within the HTML document itself. This is where cascading rules apply: if two style sheets define competing rules, the innermost style sheet is used.

So far, we have discussed style definitions that apply to the entire document. Now let's look at how to apply style to a single element occurance. This can be done using style 'classes', which are structure as so:

<style type="text/css">
.className {
property:value;
property:value;
}
</style>

To activate your classes, you will define the class in the HTML command as so:

<command class="className">

Make sure that you have spelled the class name in the command exactly as you have it in the class definition.

For example, you have several tables on your page, in one table you want a blue background with white text, in another you want the background to be black with yellow text, and in another you want the background to be white with red text.

<style type="text/css">
.tdBlue {
   background-color:blue;
   color:white;
}

.tdBlack {
   background-color:black;
   color:yellow;
}
.tdWhite {
   background-color:white;
   color:red;
}
</style>

You would create your tables as so:

This will produce:

Your text

Your text

Your text

Each <td> command will need to have the class= specification, otherwise other cells in the table will appear as a normal HTML table.

Classes can be created for any HTML formatting element. In Internet Explorer, style can be set to form elements to change the background color and text color of fields and buttons.

Another way to apply style to a single element is to 'embed' the style into the HTML command:

<P style="color:red; font-style:italic; font-weight:bold;">This paragraph contains red text, in italics, and bolded.

Will produce:

This paragraph contains red text, in italics, and bolded.

For a reference on Style Sheet definitions click here.