alt.www.webmaster Notes for Novices

 

What is CSS?

CSS is a way of suggesting styles to a web site, such as colours, fonts and positioning.

How do I do it?

A "style sheet" or CSS file is simply a text file containing the suggested styles. This file is then linked to each web page you want to use it with.

How do I link it?

You add a line in the <head></head> part of your web page like:

<link rel=stylesheet type="text/css" href="style.css">

Replacing "style.css" with the name of your style sheet file, just like a link to another web page.

Examples?

Style definitions take the name of the HTML element, like 'body' or 'b' or 'h3' and ad a block of definitions to it, surrounded by curly braces, with each separate definition being delimited by a semi-colon. EG: to suggest a white page background with black writing you could use the style definition:

body { background-color : White; color : Black; }

Or, perhaps you want to have all your level one headings, as declared by <H1></H1> to appear in a specific font, I'll use "Verdana" as an example:

h1 { font : Verdana; }

When suggesting fonts, you should consider what happens if the reader hasn't got that font installed. In this case their browser will choose it's own font. To cater for this a lot of people suggest a family of fonts, the browser will then select and use the first one in the list which is available on the computer, for example:

h1 { font : Verdana, Geneva, Arial, Helvetica, sans-serif; }

What's this 'san-serif' ?

CSS very helpfully declares a number of generic font names:
sans-serif, serif, cursive and some others which are replaced by the browser with its own default font, a different one for each generic name. IE uses "Arial" for sans-serif and 'Times Roman' for serif by default.

You can also use CSS style definitions to amend the default appearance of mark-up. Consider bold text, specified by the <B> and </B> tags.
You can also make this larger:

b { font-size : 120%; }

This style suggests to the browser to display bold text as it would normally, but 120% larger than the default size.

Is that it?

Yes! Hopefully these few easy examples will encourage you to play around and discover the basics of using CSS to beautify your web page markup.

Before you go, where can I find more information?

Try the Web Design Group at http://www.htmlhelp.com

Matt Probert



Return to Notes for Novices  
Return to AWW Faq

W3C 4.01  W3C CSS  WAI-AAA