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 |
