CSS, I have decided, is the work of the devil. Over the past few weeks I’ve battled against the horrors of designing the layout of web pages using CSS (Cascading Style Sheets) and fun it ain’t.

Now, maybe you are wondering what on earth possessed me to try to lay out web pages using style sheets rather than good old HTML? If you are surprised by my decision then I may deduce that you are not at the cutting edge of web design. Because really hip web designers use CSS for everything.

Here I am working on a fairly complex web page design with the help of Dreamweaver (nope, I haven’t sunk as low as Notepad!). The layout in the bottom window includes three columns centred on the page. The code of the page design includes some HTML and some special ‘tags’ which will be processed by my chosen Blog (CMS) software. But the layout of the columns themselves has been defined in the form of CSS code (a portion of which is shown in close-up) which is stored in a separate file.

My introduction to the ‘CSS for everything’ school of thought dates from the day I decided to have a go at setting up a CMS (Content Management System) to run a sort of complicated set of linked blogs. My goal was to have multiple sections on a site I run about '80s pop music: one section given over to news, another to reviews plus a blog for myself and a different blog for my collaborator, Peter.

As the two of us would be contributing to the site on a regular basis, I didn’t want the pages ‘hard coded’ in HTML. Instead, I wanted them to be generated dynamically. Peter and I should both be able to add new text and pictures independently of each other. I wanted our posts to be displayed in their own sections (Peter’s posts in Peter’s Blog, Huw’s posts in Huw’s Blog) but I also wanted the newest posts from all the sections (news, reviews, Peter’s Blog and Huw’s Blog) to be grouped together on the front page.

Up to now my experience with blogs has been limited to ‘ready to run’ systems such as Blogger. These are fine if you just want to write a single standalone blog. But in order to publish a ‘multiblog’ with linked sections, you have to take control over everything by installing and configuring CMS software from scratch…

Source of Confusion

Thus it was that I started searching for a free CMS that would do what I wanted. As I knew next to nothing about this type of software, I barely knew even where to start looking. The Open Source CMS site http://opensourcecms.com/ was invaluable. This includes ‘live’ installations of dozens of CMS packages ands gives you the ability to log into their admin panels and have a good poke around behind the scenes.

Having played around in the innards of several well known systems such as Drupal, XOOPS and Joomla (formerly known as Mambo) I quickly realised that while they may be able to do what I wanted they also do far too many other things. Full-blown Content Management Systems such as these provide a huge range of features which may include things such as forums, advertising management, interactive polls, collaborative documentation (Wikis), walking the dog, feeding the cat and all manner of other stuff. All I wanted was a way of setting up multiple linked blogs. As far as I am concerned, anything else merely adds to the complication.

So I then tried out a dozen or so dedicated Blog systems. However, most of these didn’t offer a multiblog facility. While it is, in fact, quite possible that they may, even so, have allowed me to create multiple linked sections (by filtering the content of pages according to ‘categories’), my inexperience made it impossible to decide whether they really would do what I wanted. I rejected many of them on the basis that after twenty minutes of using them it wasn’t obvious to me how to create independent linked blogs.

Behind the scenes at Pivot. One of the attractions of this system was undoubtedly its easy-to-use administration tools…

Eventually, I whittled down my choice to three - b2evolution, pLog and Pivot. And finally I chose Pivot. I’ll explain my reasons for this next month. For now though, let me return to CSS.

The Good, The Bad and The Ugly

Whereas most of us who design and manage web sites probably only use CSS for styling text, the really à la mode web designers use it for the complete page layout. In a CSS-heavy web site, there may be styles to position blocks of text and images in precise locations on the page. Even multi-column layouts - the kind of thing that is traditionally done using HTML tables - can be done using CSS. When you create pages in a CMS/Blog system, it is pretty much assumed that you will be using CSS for the layout. There are good reasons for this. In particular, since a CMS generates HTML pages on-the-fly, adding data (for example, the posts to your blog) to the basic page definition (HTML), it makes sense to minimise the amount of work that goes into HTML generation. If most of the layout information is in a stylesheet file, relatively little HTML needs to be generated whenever a page is viewed. Moreover, the layout of all the pages can be altered simply by editing the CSS file.

OK, that’s the good stuff out of the way. Now let me get around to the bad…

If you really want to get the goat of a CSS fanatic, just try singing the praises of tables. In the CSS lexicon, ‘table’ is a term of abuse. The main criticism seems to be that HTML tables (which have long provided one of the fundamental means of formatting text and graphics on a web page) are inflexible; they are ok for fixed grids, not much good for overlapping content and, moreover, they are embedded into each individual web page so they can’t easily be changed unless you rewrite the HTML.

By contrast, CSS can define tabular layouts in the form of layers (DIVs). Unlike tables, layers are highly flexible - they can overlap one another and align against other layers. And, best of all, the entire layout definition resides in a separate CSS file. You can have one CSS file to define hundreds of HTML pages. The advantages are obvious. Well, aren’t they….?

In theory, they may be. Bit in practice it is the disadvantages that stand out far more obviously than the advantages.

Put simply, CSS is a pig to use.

What You See Is What You Code?

I’ve discovered - much to my surprise - that many professional web designers despise WYSIWYG tools almost as much as they hate HTML tables. Hand coding is, they say, preferable. I’m sorry, but if they really feel that to be the case then something somewhere has gone profoundly wrong. I mean, designers should be designing, shouldn’t they? So what the heck are they doing messing about with code…?

How can we explain this antipathy to WYSIWYG?

It could be that the anti-WYSIWYG fraternity is using the wrong WYSIWYG tools. It could be that the tools themselves aren’t up to the task of coping with some types of design. Or it could be that the designers are spending too much time thinking about coding and not enough time about designing. I tend to think that the last two explanations are the most likely: WYSIWYG tools are indeed poor at working with some types of design - notably those which make extensive use of CSS layouts; and designers should be concentrating on design rather than the technologies that lie behind them. Since visual design is most easily accomplished with HTML that’s what designers should be using.

I remember the first wave of geek-HTML coders who despised HTML editing tools of any sort and boasted that they did it ‘in Notepad’. I am depressed to see that this austere ‘code first, design last’ attitude seems to have made a comeback.

The plain fact of the matter is that, as far as the end users are concerned (the people who actually visit your web site) the technologies that go into designing the pages are of no concern whatsoever. They don’t care whether the pages are made out of HTML, XML, PHP, CSS or bits of papier mâché stuck together with chewing gum. All that matters is what the page looks like when it appears in the browser. From that perspective, the only major difference between CSS and HTML is that CSS layouts are harder to do. Take multiple columns. These are trivial to create in HTML. But in CSS, a three-column layout is one of the signs of the master.

Just to test if my prejudices on this matter were wrong and that CSS layers really have superseded HTML tables out there in the big wide world, I took a look at some big sites with complex layouts and regularly updated content. Take a look for yourself:

http://news.bbc.co.uk/
http://www.guardian.co.uk/
http://www.nytimes.com/

Surprise, surprise, it’s all done with tables!