Case for Stylesheets

Cascading Stylesheets or "stylesheets" are not new. They were being worked on and publicised in 1995 by the World Wide Web Consortium (W3) and were recommended in 1996 giving them the same standing as HTML. Their objective was to provide a means to separate control over how a page looks (style) from what is actually said on the page (content).

Support for stylesheets was established in 1977. Support was rudimentary in Internet Explorer 3 abut real enough in Internet Explorer 4.0 and Netscape Navigator 4.0. Despite their promise stylesheets did not take on rapidly and for this we can blame the browsers poor implimentation. Some authors provided different stylesheets to accomodate individual browsers using script to identify the user's browser. Others wrote a single stylesheet using a restricted set of style rules and work-arounds to achieve a compromise presentation in the different browsers. You could not blame those who avoided this early stylesheet experience but I salute the originators of stylesheets and those who carried the flag forward.

But now the browsers have lifted their game and, while there is still some pain for established developers to make the change to stylesheets, newbies can get straight in on the ground floor. It can be lots of fun with heaps of satisfaction and real advantages for the html author looking to create an interesting site using their favorite (free) text editor or their free to modestly priced html and css editors.

A menu roll-over effect using CSS and HTML (snippet from www.westciv.com.au).

The original recommended standard was CSS1 (1996) but now we have CSS2 (recommended 12 May 1998) is out and CSS3 is on the way. Restrict yourself to using CSS1 and the positioning components only of CSS2 if you are targeting browsers before Internet Explorer 5.5, Netscape 6 and Opera 4. These latter browsers recognise the reality of emerging web standards. The commercial web sites or web developers who don't start making the the transition will become marginalised and have their position eroded by those who have made the transition or the new kids on the block who know no other way.

Use only book or or tutorial examples where the actual onscreen output (or "render") is provided or where the author states the examples have been tested and nominates possible variations in render between the browsers. Also, again to avoid using a style rule that is not in use yet, only refer to style rules lists which indicate which browsers have taken up each style rule or the author makes it clear that it is a list of the rules currently taken up by browsers X, Y and Z.

You would be mistaken if you a think it might be better not get into stylesheets just yet because there is this or that problem. HTML 3.2 and HTML 4, with proprietry tags and tag attributes, are the problem and it is getting worse. Overcoming a problem in stylesheets is working toward a positive solution to the webs problems as well as improving your own technical capability and preparing yourself for what is to come while overcoming a perceived problem in presentation within HTML, a languauge that was never intended to provide for presentation, only contributes to sinking that part of the Internet that remains dependant on the use of proprietry tags and attributes deeper into the mire where it and it's supporters will become increasingly marginalised and ultimately be abandoned by those who got out in time. Here endth the lesson.

Any formating you can do with HTML tags can also be done with stylesheets but, in addition, stylesheets allow you to:

Set text size and spacing ..between letters, words and lines.

Set margins, borders and background colors for the page and for paragraphs. Background colours can also be set within a paragraph!

Control the way images appear in the background of a page, and use images as bullets for lists.

Make and position boxes to give an alternative to the use of tables for positioning and display.

And ...

Look a complete wally by doing things like this unnecessarily.

For someone like me just starting to learn, the first step is to write your content using standard html tags with no attributes or any attempt to influence appearance or positioning (skip tables just for the time being). You will see you were able to write very quickly because you will have focused on information (i.e. the "content"!) and were not concerned with appearance which requires so much distracting effort. The html you have written will render in any browser in keeping with the spirit of the net irrespective of whether you make errors in the stylesheet or the user has an old pre-stylesheet browser.

Now write your separate stylesheet up in the head of your document giving style to each of the standard tags you used (don't use class or span for the time being). Ok some browsers respond a bit differently but your work cannot "fall over" (ie not render at all ..) because you have already set it up to render independently of the stylesheet. You will soon learn to select styles that give acceptable results, although perhaps not the identical results, in the different style "concious" browsers.

If you do as I suggest you will have done all your sizeing, color selections, font selections, backgrounds, boxing and position these style declarations inside the <style> ... </style> tags up in the head of the document just before your </head> tag. In short it has been a two distinct step operation. Write the content then write the style. The pay-off comes soon the next time you are writing something when you realise you can use the same stylesheet you used before.

Ok you have been good and shown some self-disipline so now you can alter tags using classes to give you a greater variety of options (the truth is you might not want all your <p>'s or <h3>'s to look the same) but do try to stay away from altering the tags for as long as possible. Don't think that when you do (and you will have to eventually) use a class reference down in the content you are somehow reverting to the dreaded mixing content with style. Not so! This is still doing document level style and you are only refering to, or linking if you like, to the style declaration which is still up inside the head. It is only when you put the style declaration itself in-line with the content that you have slipped back into mixing content and style as I have demonstrated with the word "itself", where if you view the source you will see I used <span style="font-weight:600; font-style:italic;">itself</span> which defeats the purpose and you may as well just used <b><i>itself</i></b> and be done with it!.

Incidently, when it comes up, my recommendation is not to to use ID because it is restricting and you can use class to greater advantage in document level work. Also remember, as discussed, avoid putting stylesheets in-line in the html. It's easy to do and very similar to what you are use to doing with <font> and <center> and so forth and that is precisely why you should not do it no matter how comfortable you feel doing it because the whole idea is to separate style from content!

Once you're happy with your stylesheet in the head of your document you can move the bulk of it out into a separate external sheet which you link to the page and the subsequent pages you create. You are now in a very powerful position. From the outset you have totally divorced presentation from content. When you routinely do updates on your site to provide new content you can also do a little tinkering with your external stylesheet to give your site a subtle change in appearence that, along with your new material, reinforces the positive impression you are trying to make to keep regular visitors coming back.

When you want to make additional pages you just type away in your editor concentrating on content using your standard html tags. Alternatively you can delegate the writing task to someone else. Either way when you add your stylesheet then ..wallah! it blossoms out into a page that has all the presentation characteristic of your site. As a beginner this is how it should work out and hopefully introductory tutorials will demonstate this. OK it can become more involved when you want to achieve a bigger range of on-screen effects but by then you will know more too.

WC3, and others, offer a selection of core styles which are cross browser compatible which allow you to just hyperlink your standard html document to the stylesheet of your choice (or down load a copy and link it directly) and you have a styled document. WC3 call it the "Core Styles Project". The aim is to aid introducing stylesheets.

A problem when you search for, say, "Core Styles" in a search engine is that you get lots of old references. This is a worry for all searching of the net ..nothing gets removed ..the search lists just get bigger. I read somewhere that searching using Yahoo links is good because at least there is some sort of filter or mechanism at work to minimisise the chaff but I have been dissapointed with Yahoo too.

Anyway I'll put links to core style type sources here as suitable ones are found. WC3 is thethe place to start.

www.w3.org/StyleSheets/Core CSS stylesheet examples to use.
WC3 CORE STYLES. With the Core Styles Project WC3 are offering a choice of eight styles you can just link to or copy down to your site. It is an effort to facilitate the use of stylesheets. A good way to have a look at stylesheets for sure.

www.nypl.org/styleguide/index.html NewYork Public Library.
They have made their stylesheets available along with explanitory pages and comments in the stylesheets.
The stylesheets are designed to validate under XML and evidently meet all the various needs that I can't juggle.
I will use these stylesheets in my next undertaking or at least my next page and hope to learn from my betters.

www.benmeadowcroft.com
Has a nice page layout originally inspired by www.bluerobot.com and is very attractive. He has created a template of his site and the style sheets and they are freely available to peruse on-line and download in zip format as a whole for your use. Alternate style sheets are included to make provision for some of the needs of ver 4 bowsers.

www.useit.com Jakob Nielson writes on good website design. Enter "css" or "stylesheets" in the search box to find his articles putting a case for stylesheets.
See his other articles and lists of recommended sites on good website design from the user's perspective.
There are no tutorials but his website is made with stylesheets and is a useful example to refer to.

www.meyerweb.com Eric A. Meyer's personal website.
Well known author and advocate for CSS. Choose between interesting, practical and adventurous CSS information.

www.alistapart.com.
This is a CSS site. Non-profit (he puts in 30 hrs a week of his after work time). Committed to standards. Tries to get you to come back by saying the content is changed every friday. But he keeps an archieve of his articles.
www.alistapart.com/stories/tohell Inspiration to get of tables.

www.webmasterbase.com.
Source of the three links above (up to 'To Hell' article).
www.webmasterbase.com/article/379/14
Article describing how they used Zelman's To Hell article as inspiration to replace one of their table based pages. They provide their resulting css. A good before and after sort of thing.

www.w3.org/style/css WC3's useful run down on stylesheets with simple examples to work through. Lots of links to other CSS related sites. Detailed CSS1 and CSS2 Reference (for experts or academics). A good starting point.
www.w3.org/Style/CSS/Test Taken from About the Authors Definitive CSS 1st Ed. -Eric A. Mayer.

www.htmlhelp.com/reference/css These are good people. Please read what they say ..study the FAQ's listed and do your homework before you start asking them questions.

www.oreilly.com/catalog/html4 I was looking for an up to-date listing of style rules from HTML: The Definitive Guide 4th Edition by Chuck Muciano (O'Reilly Publishing) which was provided in the 3rd Edition. Bit there was no css1 or css2 listing so I now suggest www.webreview.com for Meyer's style paqe and browser compatibility tables or Western Civilisation's www.westciv.com.au (makers of StyleMaster and LayoutMaster) and select either their CCS1 listing or complete CSS listing (beginners stay with CSS1!).

In Authors's Article, Muciano talks about XHTML being a set of tags made from XML and how XHTML bridges HTML and XML. He also refers to the stylesheets XSL (cf stylesheets .css).The Chapter Listing refers to HTML and XHTML (but not XML). Chap 8 is Stylesheets with similar section headings as as Chap 6 Stylesheets of the 3rd Edition but with no mention of XLS. I have seen XLS referred to as the the "CSS of the future"!

www.oreilly.com/catalog/css The website for Cascading StyleSheets The Definitive Guide 1st Edition by Eric A. Mayer (O'Reilly Publishing). Retained for the concise wording and thoughts in the Author's Interview and the Author's 10 Top Tips.

www.webreview.com/style/index.shtml
Eric A. Mayer's stylesheet page of the Webreview. Found in Definitive CSS (1st Ed.) -Eric A. Mayer.
The Webreview describes itself as providing cross-training for web teams.
Contains the Master List. A browser style compatibility guide and a CSS2 Selectors Chart. Highly recommended.
I typed "css positioning" into their search box and got a good list of archived tutorials you could jump to.
I got interested in a couple of other sites in their network (ie webring).

Western Civilization's StyleMaster (John Allsopp -Author)

After some months of trawling around I now use the Western Civilisation site as my CSS starting point. The site is is there to sell product (which is high quality and inexpensive), but Allsopp was a College teacher and provides tutorials, reference information, overviews and advocacy for CSS, good links, on-line courses and all the rest of it for Windows and Macintosh users. There is a lot going on.

They are also developing cutting edge software ..and I almost forgot! ..they are involved with trying to make every book ever written available free on-line or something like that.

To get around the site go in via their home page, bookmark it, then go to a page on the site. Explore the other pages that the top nav bar of the page you're on links you to. This permits you to see a lot of the site but not all of it. You have to get back to the home page by using your browser's backbutton but if you have got in too deep use the bookmarked homepage url to come back in again at the start.

There are tutorials under "Style Master" and "House of Style" top nav bar links and go to the "Courseware" top link where they are running one of their on-line courses as a promotion.

Use their links to other CSS tutorial and CSS related sites (all good ..no chaff). Some of these links can be found in the links on the left of the screen while others can be found on the bottom from of either of the "Style Master" or "House of Style" pages selected from the top nav bar.

Worth the effort or I would not have done all this.

www.westciv.com.au Homepage of Australian company, Western Civilisation Webware.
Authors of StyleMaster 2.0 and Layout Master (in beta). Their site provides extensive CSS tutorials, references and links.
Note: Western Civilisation say "style sheet" (cf "stylesheet"). They also say the Style Master "Editor" is WYSIWYG?, however I have seen references coding by hand.

CSS guru and O'Rielly author Eric A Meyer in his book, CSS -The Definitive Guide, talks about Amazon (www.amazon.com), CNN (www.cnn.com) and Internet Movie Database (www.imdb.com) as being sites that used CSS to improve their appearance. He also refers to his own experience with TopStyle and STYLEMASTER!! Thus I became aware of this Aussie product, searched ANZWERS for CSS tutorials that listed StyleMaster and Western Civilization Webware because they also provide tutorials on their site as well as marketing training packages, and started doing their tutorials.

You can down load a free demo version of StyleMaster 1.9 which draws on CCS1 and CSS2.
They are in Beta testing of LayoutMaster for page layout which draws on (newly released) CSS2 positioning. You can download it in it's beta form and contribute to it's development by notifying them of any bugs you find or things you feel need changing.

Should look at LayoutMaster to start taking advantage of CCS2 positioning. A lot of authors refer to the use of CSS2 for positioning but often don't provide much in the way of examples.

I wrote my first stylesheets in Notepad (just copying out of library books, learning to set font family, size, weight (ie make bold), color, background color and borders (ie make boxes). What I found as a beginner was that my first stylesheet was pretty much my last so to speak as I kept my stylesheet which addressed all the basic tags in the head of my html template and just altered some of the "values" if necessary for diferent documents so I never found the need for an CSS editor that provided all the different styles for you to select.

As a learner experimenting with the effect of changing tags and style, I left my stylesheet in the head of each page so I could just scroll up to the head ..change a style value then scroll back down to see the effect. also I could vary the styles for camparison purposes between the pages and have one page for outrageous experimentation. Sooner or later in a real task you have to remove the style into an external page you reference from within the head. You would leave any style unique to that page in the head and make any one-off style changes in-line if absolutely forced to. I have not yet except to, reluctantly, demonstrate the method.

Funny enough, for the styles in my external stylesheet, I leave a place keeper in the head of each page for reference and to add or change a style. An example would be p{} which indicates to me that paragraph style is dealt with in the external stylesheet but if, I wanted bolder print on a page for some reason (usually because of a change in the background) I would insert a font-weight style like p{font-weight:600;} which would over-ride the font-weight:500 which is my standard in the external stylesheet. CSS gives me pleasure because I can change lots of things to amuse myself and put it back the way it was afterwards. Bjarne Stroulstrap, who wrote C++, does not add one keystroke to improve the appearance of his web pages. I understand that ..what he says (the content) is everything. But the very fact he uses a few simple tags (with no attributes of course) means that one small equally simple stylesheet with styles for the few basic tags used could improve the appearance (or if you prefer, the readability) of hundreds of webpages without any sacrifice in content due to "time spent on appearance". We are just talking about using one template that we can alter subsequently (should we ever wish to).

Aussie John's Site This Page Last Updated: 29 June 2003

Cascading Style Sheets (css)