STYLE SHEET SYNTAX
This tutorial will only explain the use of the CSS syntax. It is assumed that you understand and have used HTML tags such as <P> (begin a paragraph), etc.
The basic CSS syntax is a illustrated below. There are two parts, (1) the CSS code that is placed in the <HEAD> of your page and (2) within the <BODY> to apply the code to a particular HTML tag.
<HEAD>
<STYLE TYPE="text/css">
/* comment statements can be put anyplace
if they are surrounded by these Blue characters */
selection criteria {property1:value1; property2:value2; }
</STYLE>
</HEAD>
Example of this syntax:
<HEAD>
<STYLE TYPE="text/css">
P {font-size:12pt; color:blue;}
</STYLE>
</HEAD>
This would make all paragraphs with a font that is 12 point in size and the color blue. The CSS code could also be placed within the HTML tag, <p> like this: <p style="font-weight: 12;color:blue"> |
CSS code can be place within the <HEAD>.....</HEAD> or in some HTML tags. The selection criteria can be any legal HTML tag or a special class notation, which will be covered later. To see a complete list of HTML tags go to WILLCAM.COM HTML TAGS. The property depends upon the HTML tag being defined, e.g. if the paragraph tag, P you could use font-weight, color, or line-height (these properties will be explain later).
The property:value, when placed in the <HEAD>, for a HTML tag is surrounded in brackets, { }, and a semi-colon ( ; ) follows each pair of property:value. An example would be:
|
which will cause each <P> in the document to be displayed in 12 point font that is blue.
You can put all CSS codes in each individual document or you can link to a single document that contains the CSS for many documents (see External Files but I recommend that you don't read about external files until its place in the tutorial). This tutorial links to the document, cssstyles.htm, in the following manner:
|
filename can be name you wish, e.g. cssstyle, mystyles, etc.
The above is placed in the <HEAD>.