Introduction to CSS
Why CSS?
HTML was formulated before graphical browsers came into existence, and was originally designed to control the structure of documents rather than their appearance. With the advent of graphical browsers, designers and browser manufacturers had to either invent completely new tags (such as the font tag) or adapt existing tags to uses for which they were never intended (eg using tables for page layouts). Many ingenious designs were thus born, but always suffering from the limitations inherent in using a language that was never designed to be presentational – code became horrendously bloated, the appearance of the page could vary wildly on different browsers, and could even become completely inaccessible to disabled people using non-graphical browsers.
As a response to these difficulties, the w3c formulated Cascading Style Sheets in 1998. Style sheets are designed to enable total control over the presentation of a web page, while leaving HTML to handle the structure of the page.
CSS uses a completely different syntax (that is, rules governing how the language can be used) from HTML. This syntax is quite simple, though the way in which the CSS rules interact with HTML can get quite complicated.
Advantages of using CSS over presentational HTML
CSS offers far greater control over presentation than does HTML – there is a greater range of options available, which can be tweaked with much more precision and flexibility than HTML’s crude presentational attributes.
CSS enables you to separate presentation from content – this has advantages that:
- CSS rules can be set in a single .css file, which can then be accessed by multiple HTML pages. This means that you can completely change the font, colours and even layout of every page in your site without having to edit any HTML files – only the one stylesheet. For some particularly impressive examples of this, visit www.csszengarden.com.
- Using HTML for presentational purposes, particularly using tables for layout or the font tag for setting fonts, can take up enormous amounts of code, which increases loading times and makes pages much more difficult to edit. By setting all presentational styles in a single external file, your HTML is leaner, faster to download and easier to edit.
- Layouts designed using tables can cause accessibility problems to disabled users, as the information is not always displayed in the intended order if the user does not use a graphical browser.
While there are many sites that still use tables and presentational HTML, they are quickly becoming fewer and fewer. Don’t end up as a dodo!!