Kathleen's Spider Web
~~Kathleen
Anderson, Spider
Web Woman Designs
What Is CSS, Anyway?
Well,
before I talk about what it is, I’d like to tell you how powerful CSS
is and how it can save you time (which equals money, right?).
You’ve
spent the last two months working on a site for your newest customer;
your co-workers love it, your mom loves it, in fact, everyone says
it’s the best work you’ve ever done. You’re ready to launch –
and take your long-deserved vacation - but wait – the client calls and
wants one last “teeny-tiny” change. They want the font to match the
one they use on their printed brochure. On every page in the site!
All 150 pages! Visions of pina coladas on the beach are slip
sliding away. There’s no
way you can change every page before your flight leaves in the morning. You pick up the phone to cancel your vacation plans – and
then you remember – you used a Cascading Style Sheet when you created
the site. You edit the sheet, change the font, upload the changed file
and voila – you’re done. How easy was that? The client is happy and
you’re happy. Finish
packing that suitcase – you are on your way!
OK,
how do they do that?
Well, HTML pages contain two things; your content,
i.e. text, images, etc. and your ‘style’, i.e. how you want the
content to look to your visitors. Your style includes fonts, colors,
bullets, tables, page margins, even the color of your links.
And to set each one of your styles requires that you add the same
HTML tags and attributes to every page in your site.
And to change just one of your styles, like a font color, or a
page margin, requires that you change every page in your site.
There’s got to be a better way.
Presenting
- - -
Cascading Style Sheets! Otherwise known as CSS.
Cascading
Style Sheets are implemented by adding just one more file to your web; a
file with a .css extension, and linking all your pages to that one file.
This file is called an External Style Sheet and it contains code that
looks a bit like HTML. There
are two other ways you can use CSS: inline, which isn’t supported by
Netscape very well, and embedded, which appears in the Head section of
every page. The coding rules are pretty much the same for all three, but
we are going to focus on External Style Sheets.
Here’s
an example of an External Style Sheet:
body
{
margin-top :
0px;
margin-left
: 2%;
margin-right
: 2%;
color :
black;
font: 10pt
Verdana, Geneva, Arial, Helvetica, sans-serif;
background :
White none;
}
This
is saying that on your web page, you want a 0 top margin, a 2% margin on
the left and right, you want the text color to be black, the text size
to be 10 points, and you’ve specified the font-family. You also want
the body background to be white.
What
does this buy you? A number
of things: first, you can remove all the body background, margin tags
and font tags from your HTML pages, which will make your pages lean and
mean – and load faster. And
second: use of the font and other tags have been deprecated by the W3C
– that is to say, the latest specification for HTML strongly
encourages you to use CSS, which will keep you ahead of the curve. And
third: it makes it much easier for you to add content or debug your
pages – you don’t have all those HTML tags to sift through when
looking for your content. And
last but not least: when your customer says “change the font color
from neon pink to lime green”, you can get it done and still enjoy
those pina coladas on the beach – have a great vacation!
My
Favorite CSS Resources:
-
Take
a class at the HTML
Writers Guild
-
Read
a book: Cascading Style Sheets: The Definitive Guide, by Eric A.
Meyer, published by O’Reilly
Online
Resources:
Try TopStyle
Lite – you’ll like it so much you’ll want the whole enchilada
– TopStyle
Pro (Note to FrontPage
users: After you’ve installed TopStyle, open FrontPage, choose Tools>Options>Configure
Editors. Select .css from the file type list, Modify, and browse to the
folder where TopStyle is installed, select the TopStyle exe and click
OK. Now, whenever you want to open a stylesheet in your FrontPage web,
it will launch TopStyle for you.)
<<editor's
note: for more information on using CSS in FrontPage, see this month's
Featured
Article by Tina Clarke>>
Kathleen
Anderson is a webmaster at the State
of Connecticut and chairs their committee on web site accessibility
for persons with disabilities. She also has her own web design company, Spider
Web Woman Designs.
|
,
