Smashing Magazine provides a helpful page of tips on how to use CSS to do things that would be difficult to use otherwise.

At first, it looks like a pretty useless list of CSS tricks. I was thinking “Well, they look like CSS things but they don’t tell you where to fiind the code. It’s just a scam”

However, doing the sensible thing and clicking on the html link for each example and choosing “view source” lets you see the css techniques that were used, so you can adapt them. In the expectation that we’ll be trying out some of these techniques here at Compuskills, I am thanking Smashing magazine in advance.

In the late 1990s, planning the appearance of a web page was hard work. If you wanted to have any control over how the page would be displayed in the user’s browser, you had to apply a range of formats to every piece of text. A font tag that specified the colour, size and font-face would have to applied and then completed every time you wanted to change the text. It was often difficult to separate page content from layout instructions so writing and debugging pages was very time-consuming.. Table layouts allowed precise specification of the placement of objects on the page. However, if you wanted a page layout that didn’t look like a spreadsheet, it was something of a nightmare keeping the correct levels of table nesting in the correct columns. One extra cell tag, that couldn’t be seen because of the profusion of tags could throw out your whole page

The first version of Dreamweaver was unbelievably popular, although it’s hard to see why. It eased the process of creating table layouts but created them in such an odd way that perfect looking pages could fall to bits on a monitor of the same size and resolution using a different operating system. Dreamweaver popularised div tags in its next incarnation. That program could change table tags to div tags. However, to use the program effectively, it was necessary to know html well enough to write the pages in Notepad anyway. (Hand coding using a text editor could achieve the same effects five times as quickly and with code that was much less wasteful of bandwidth .) As these became more widely used, largely thanks to the (then) incomprehensible popularity of Dreamweaver, web designers started to move towards the concept of applying a format to a tag, giving the format a name which could be called up when that format was needed. This was the first step towards keeping the layout instructions separate from the content, which was the major purpose of CSS.

CSS is an brilliant idea. It can easily produce consistent formats across a whole website. It takes much less effort for the designer than the traditional ways of shaping the look of a website The look of a site can be transformed in a moment by replacing one stylesheet with another.

Like everything to do with IT, once a thing became possible, clever and creative people pushed it to its limits. As shown by the examples in the Smashing Magazine page, you can now use CSS to achieve effects (such as drop down menus) that would have previously involved ugly and cumbersome JavaScripting. CSS let you apply specific styles in different circumstances - you can create a choice of styles that direct how you display the same html page on a mobile phone, a printer, a PDA and a traditional PC.

However, also like everything in IT, nothing is as easy or straightforward as you’d like it to be. Once a technique exists, a new one is developed that makes it obsolete before all the bugs have been ironed out. CSS can also be very frustrating to use.

The worst problem is caused by browser inconsistencies. These are the most damaging at the most fundamental level - the location of objects on the page. The old-fashioned table layouts would always give you what you expected, as long as you took reasonable steps to adjust for screen resolutions and sizes. With CSS, it may be genuinely impossible to achieve a page layout in FireFox that looks even similar to the same page you see in Internet Explorer. On the same PC.

This is not an argument against CSS. You need to learn a wide range of workaround techniques to make full use of CSS or to get advice from web designers with experience of setting up pages.

Technorati Tags: CSS Design Web Design Style Sheets Compuskills