How to write style sheets (CSS)
If you wish to use
Cascading Style Sheets on Web pages,
here's a suggestion on how to do it, especially how to
solve problems or preferably avoid them.
It is assumed that you have read some introduction to style sheets,
such as
WDG's
CSS Quick Tutorial or
Dave Raggett's
Adding a touch of style.
- Create your HTML document(s) according to
good authoring principles.
- When you have an idea about a presentational suggestion,
check from
WDG's
reference
CSS Properties whether there is a property
which can be used and how it is to be used.
That way you'll find reliable information about how
it should work.
Note however that the document is limited to
CSS1.
If you need newer style sheet features, check the
CSS2 specification; beware that is has been implemented
to a much smaller extent than CSS1.
- Check the implementation status for
the features you are going to use, e.g. using
Index DOT Css.
- If you decide to use CSS for your purposes, write a style sheet
according the specifications and
associate it with your HTML document.
- Check your style sheet
using
CSSCheck. It is practically certain that you
make lots of mistakes in your CSS code, and a checker
is therefore indispensable.
Note: CSSCheck checks against the CSS1 specification, with
support to some CSS2 features. You can
use
W3C's CSS checker to check against CSS2, but please
remember that browser support to CSS2 is still
rather limited.
- Check your HTML
document using
a validator. (Naturally, you used a validator already at step 1.
You need to validate again, since you have added something to your
HTML document in order to associate a style sheet with it.)
- Having done that, and having fixed the errors and re-checked your code,
see how the document looks like on some browsers.
Preferably, test it on all major versions of IE and Netscape from
version 3 onwards and on Opera.
- Styles don't work? Check whether you have style sheets turned off
on your browser, or a user's
style sheet overriding the author's style sheet.
Note that on Netscape, turning JavaScript off turns
style sheet support off too, since
it internally implements
CSS support on top of JavaScript support.
If you are uncertain, try testing your browser with a simple
document which uses a simple style sheet.
- If problems remain, and you can't find an answer e.g. by
using the documents listed under
CSS Pointers
(see especially
CSS Bugs and Workarounds)
consider asking for help in the newsgroup
comp.infosystems.www.authoring.stylesheets
.
Please remember to
- check the meta-FAQ and
the FAQ
before posting
- tell the URL of your page
(even if it shows just your failed attempt - a URL tells more than
a thousand words!)
-
use
good Usenet style.
- check the group archives before posting:
There is
an experimental frameset version of this page.
To work well, it requires a rather wide browser window.
Date of last update: 2003-09-09.
Jukka Korpela.