Style sheet rules

A rule is split into several parts :-
SPAN{color: green}
Here, SPAN is the selector. After the selector is the declaration, which is always enclosed in curly brackets - the declaration is then split in two : the first part is called the property, and the second is called the value.

How to use Style Sheets

Style sheets can be incorporated into documents in several ways :-

Use the <STYLE> tag in HTML - this should be declared in the <HEAD> of the document, and ideally be enclosed in comments, a la JavaScript eg
<TITLE> Style sheets </TITLE>
H4{font-color: #00FF00}
Multiple declarations for an element (ie a tag) can be done by splitting each declaration with a semi-colon.

Put all your style sheets in an seperate document, then use the <LINK> tag in <HEAD> eg
<TITLE> Style sheets </TITLE>
<LINK HREF=“directory/stylesheetName.css” TYPE=“text/css” REL=“stylesheet”>

If you want the rule to apply to one element only, simply define it within the tag eg
<H1 STYLE=“font-color: #FFFFFF”>I am white</H1>

Comments in style sheets are encased in /* I am a comment. */

Contextual Selectors

How to make a <B> appear differently if it is encased within another tag :-
B{font-color: #00FF00} /*bold text is normally green*/
P B{font-color: #0000FF} /* but within a P tag it is blue*/

Colliding Style Sheets

Order of precedence :-
1. Inline
2. Embedded
3. Linked
4. Imported (using the @import command)
5. Reader (no browser currently supports user defined style sheets)
6. Browser default
However, this is according to the official spec, and are not implemented properly.

What properties and values can I use?

Font and text properties
Colors and Background properties
Positioning properties
Box/Layout properties
Classification and other properties
Netscape layers


You can define different classes of style, which means that the same tag can take on different values ie
DIV{font-color: #FF0000}
DIV.a{font-color: #00FF00}
DIV.b{font-color: #0000FF}

These can be called by HTML :-
<DIV>I am red</DIV>
<DIV CLASS="a">I am green</DIV>
<DIV CLASS="b">I am blue</DIV>

Class values can be changed by JavaScript - a dynamic style sheet. See the JavaScript page for an example on how to do this. The example shows how to define links so that they are not underlined until the mouse moves over them.

Formatting model : The Box

Every element is in an imaginary box :-
1. Content box - actual text or image inside the element
2. Padding box - room between the content box and border
3. Border box - most elements don’t have borders but tables and images do
4. Margin box - space after the border that seperates this from other elements

Jokes Queensryche JavaScript Home Links