Anansi and Cascading Style Sheets

Stylesheets have great potential. But is it me or does the implementation of this great potential in MSIE leave much to wish for? Try something with line-height and you're likely to get your tables or images at the most unexpected places. Tables need improvement and then there numerous minor things that don't work as expected. But in general stylesheets are already fun to play with and hopefully we get better implementations of stylesheets with the new round of browsers.

Quick stylesheet introduction

For those of you who don't know too much about stylesheets, let me give you a fast and quick introduction. Stylesheets let you define lay-out properties for each HTML element. With a stylesheet enabled browser you will have seen that the blockquote just above had its own font, background image and line-height. You can do such things with all tags, like this document has done for the body tag, the header 1 tag, etc. The best thing of stylesheets is that you can have them in a separate file. This means you can maintain the lay-out for a complete site by editing just one file!

The MSIE implementation of stylesheets is only a subset of the complete definition. To get an impression of the kind of settings you can influence you could take a look at the screencapture just under.

The main view of the Stylesheet Assistant. Currently selected are the stylesettings for header 1. The project-based Colorbar is also available with the Stylesheet Assistant.

Using the Stylesheet Assistant

The nice thing of having an Assistant in this case is that you don't have to memorize every setting and that it's easier to inspect current settings. The StyleSheet Assistant reads your stylesettings from the document, looking for the style tags or just reading the whole document when it discovers a css extension to the filename.

Each tag in the stylesheet displays as a single line in the Assistant. To inspect or edit the settings for a particular tag, you just select its line. Where possible mousemenu's (indicated by a *) and dialogs (watch the triple points, see the second screensample) will help you.

To add a new tag to the list, select one from the mousemenu or type it manually. Press Add Tag and it's in the list.

Another screencapture of the CSS Assistant

Here's more or less the blockquote as used at the top of this page. Actually, this page simply uses the default for the position of the image, but having the keywords selected made a better picture. The grey colorlabel left under is displayed in the given setting for text.

Limitations

A few remarks as a disclaimer. If you stick with the code generated by Anansi's Stylesheet Assistant, all should work fine. If you want to edit existing stylesheet code, please be aware of the following limitations of the Alpha version:

Each line is interpreted as a complete setting for one tag. Don't (re)format individual settings over multiple lines, don't expect the following lay-out will be understood by the Assistant:

H2 {font-size: 15pt;
font-weight: bold;
color: #00ffff}

However, this will work of course:

H2 {font-size: 15pt; font-weight: bold; color: #00ffff}
Settings for each tags need to be explicit. I doubt if this is a serious limitation. Implicit coding can give unexpected results even with one browser only, let alone across different browsers.
In short, the Alpha version will neither write nor read a format like:

H1 {font: 15pt/17pt 'Arial' }
Comments may give problems.
The opening tag can't contain attributes, only <STYLE> will be recognised. Yes, that's stupid and will be the first thing to fix.
The help button does not function.

I hope you can live with the limitations for now.

P.S. Preview 3 still does not support background images with stylesheets (should be visible with the centered text at the top) and makes a mess of class styles (you may have noticed this with the initials). Both MSIE and Netscape do a bad job on backgroundcolors with lists. Yes, the yellow and green fonts should have a background slightly ligther than the general background. Preview 3 also looses the left-margin after a list.

Return to the index

Sponsored by Alchera dream software & Fame newsletter software.