logo © 1996 Phil Waclawski

Felitaur Enterprises Home Page

Cascading Style Sheets

CSS1 Reference List
CSS2 Reference List
Zvon CSS Homepage
CSS Zen Garden
(a major showoff CSS site that shows html and css code)
Guide to Cascading Style Sheets
HTML Dog
CSS and HTML Tutorials
W³C Web Style Sheets
W³C CSS Box Model
CSS Positioning Tutorial

General Style Setup

Make sure to close all tags that need it, including <P> and <LI>
Style rules follow this syntax
selector { property: value; }
example: (for both external and embedded)

BODY { background-color: #CCFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #330066;
margin: 5px, 5px ; }
a:link { color: #CC9900 }
a:visited { color: #660000 }
a:hover { color: #333300; background-color: #6666ff; border-style: solid; border-color: #000000;} a:active { color: #FF0000 }
h1 { color: green;
border-style: double;
border-color: #00FF00;
border-width: 3px ;
font-family: Helvetica;
font-size: x-large;
text-align: center;
margin: 5px, 5px ;
width: 50% ; }
P EM { border-style: double;
background-color: white;
border-color: #000000;
border-width: 5px; }
P { text-align: left; }
CSS Positioning/ Z ordering
CSS Properties List (coming soon?)

External Styles

Links to an OUTSIDE page
In the <HEAD> put either...

<LINK REL="STYLESHEET" HREF="pathname/filename.css" Type="text/css"> OR
<STYLE>
@import (http://pathname/filename.css);
</STYLE>

Embedded Styles

<STYLE TYPE="text/css">
 </STYLE>

Inline Styles

BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE and TITLE can NOT be used with the style or class attributes.
<DIV>

<DIV style="property: value">Section of document to alter </DIV>

<SPAN>

<SPAN style="property: value"> Text to alter</SPAN>

The "style" attribute in other tags

Can be used in all but the above listed tags
<P style="color: #FF0000; font-weight-bold"> Text to alter </P>

Classes

Can be defined in an external or embedded Style sheet
Example:

Normal style- P {font-family: Arial, helvetica; color: black; }
A "class"- P.bigger {font-family: Arial, Helvetica; font-size: larger; }

To use a class:

<P class="bigger">Text to be "bigger"</P>
Here is just a plain <P> style paragraph
Here is a <P class="bigger"> paragraph

To set a property for any elements using the same class:

.important { color: red; }
This will now apply to any inline style (using <DIV class="important"> and <SPAN class="important"> class)
This is an example of a .note class

Contextual Selections

This text is an example of Contextual Selectors
Up above <P><EM> was used as a "selector" which means anything surrounded by those tags, in that order, will have the styles that were set for <P><EM>.