Technical stuff

    

Cascading Style Sheets

Cascading Style Sheets (CSS) need Netscape 4.5 and Internet Explorer 4.0 or above.

CSS are a way of setting a style for one web page, or a whole web site, from one master style file. You can define styles of text etc., in this master file, and then 'call' it into use with each seperate web page. This means that you can, in one easy motion, affect the whole page, and/or whole site with just one change on the master style sheet.

Master style sheets are plain ASCII and created using a text editor like 'Notepad'.

So, if you created the following master style sheet

/*colour is turquoise*/
.basic-text {FONT-FAMILY: arial; FONT-SIZE: 18px; COLOR:#00FFFF;}

and saved it as "sheet.css", in the same folder/directory as your HTML files (important!)

[NOTE: using 18px (pixel) rather than 10pt (point) - 18px is about 10pt - means your text has a good chance of appearing the right size regardless of the settings on the browser, monitor or whatever being used by the person looking at your sight. ]

and then inserted the following in your web-page between the <HEAD> & </HEAD>tags:

<LINK REL=STYLESHEET HREF="sheet.css" TYPE="text/css">

you could then call the style into action like this:

<HTML>
<BODY>
<P class="basic-text" >
</HTML>
</BODY>

and all your text after the <P> tag would be 18 pixel, arial and turquiose.

Now imagine that you've used 10 paragraphs on 20 pages, and decide that you prefer 16px, comic sans ms, blue, all you need to do is make one change to the master sheet thus:

/*colour is blue*/
.basic-text {FONT-FAMILY: comic sans ms; FONT-SIZE: 16px; COLOR:#0000FF;}

save it, reload/refresh your browser and instantly ALL your pages take up the new style - yahzoo!

and if you want it bold as well?

/*colour is blue*/
.basic-text {FONT-FAMILY: comic sans ms; FONT-SIZE: 16px; COLOR:#0000FF; FONT-WEIGHT:BOLD;}

Imagine if you had used <FONT> tags? That would be about 200 changes to be made, instead of one. Good innit!

In-line Styles

You can also use styles on individual pages. One excellent use is for

Absolute positioning

which is used extensively on our home page to create the index.

For instance:

<DIV STYLE="position:absolute;left:30;top:40">
<IMG src="filename.gif">
</DIV>

will position a graphic's top left hand corner, 30 pixels in from the left, and 40 pixels down from the top.

You can position tables:

<DIV STYLE="position:absolute;left:30;top:40">
<TABLE>
(table cells in here in the normal way)
</TABLE>
</DIV>

and paragraphs:

<DIV STYLE="position:absolute;left:30;top:40">
<P>
text here in the normal way ....
</P>
</DIV>

in the same way.

If you would like to view the master style sheet ["ourplace.css"] for this site:   Click Here

For Mucho more on CSS visit:   http://www.builder.com/Authoring/CSS/