Graham's homepages - Style sheet rules

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 :-

1. EMBEDDED STYLE SHEETS
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
<HTML>
<HEAD>
<TITLE> Style sheets </TITLE>
<STYLE>

</STYLE>
</HEAD>
Multiple declarations for an element (ie a tag) can be done by splitting each declaration with a semi-colon.

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

3. INLINE STYLES
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 :-
<STYLE>

</STYLE>

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

Classes

You can define different classes of style, which means that the same tag can take on different values ie
<STYLE>

</STYLE>

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