The Curious? Web Site for all this: curious, best, worst, people, odd, weird, ridiculous, sayings, actions, free, film, films, movie, movies, reviews, information, html, tutor, tutorial, hints, free, fonts, animated, gifs, fun, facts, stop, junk mail, curious, questions, sex, porn, gay, lesbian, homosexual, rights, liberation, religion, quiz, hot, topics, adult, abortion, israel, family, media, TV, millenium, year, 2000, new, age, persecution, human, rights, God, jesus, christ, evangelical, bible

Click here to change to original colours

Click here to change to black text on a white background

Cascading Styles 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: 1.0em; COLOR:#FFFFFF;}

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

[NOTE: '1.0em', a unit of length, is used in the font-size parameter instead of 18px (pixel) or 10pt (point) because 'px' or 'pt' are absolute settings. Although using 'px' or 'pt' means your text will usually appear the right size regardless of the settings on the user's browser or monitor, it means that the zooming functions [CTRL+scroll-wheel in IE and CTRL+'+' or'-' in Netscape] are unusable. This is not good for accessibility.]

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

and all your text after the <FONT> tag would be arial and white.

Now imagine that you've used 10 paragraphs on 20 pages, and decide that you prefer 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: 1.0em; 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: 1.0em; COLOR:#0000FF; FONT-WEIGHT:BOLD;}

Imagine if you had defined all your <FONT> tags in the old way, seperately on each page? That would be about 200 changes to be made, instead of one. Good innit!

In-line Styles

Of course, you can also use styles on individual pages, but that rather defeats the object. However, one excellent use is for

Absolute positioning

For instance:

will position the 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.

click here for a demo

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

For mucho more on CSS visit: http://builder.cnet.com/

back to html hints

Main Index | To The Top | Hot Topics