What is CSS?

CSS – Cascading Style Sheets – is a text-based system used to specify formats. CSS information is included or linked to by the pages on the website, and the author can then use simple tags to apply those formats to portions of the web page. These override the default settings: for instance, if a CSS style sheet specifies that level 1 headings (

tags) are to appear in green, then they will appear in green rather than the standard black. CSS styles can work at any one of three levels – page level, site level or web level – and they can contain two types of settings, tag redefinitions and new classes.

CSS levels

Page level (embedded) CSS – this requires the style sheet code to be embedded in a web page – usually in the tag section at the top. The code then applies to that page only. To apply the same styles to another page the entire

CSS setting types

Generally speaking, CSS styles operate on two levels: they redefine existing HTML tags and they create new format definitions known as classes. When a redefined HTML tag is used on a webpage no extra work is required; the tag just takes on the new format definition from the style sheet. But when a new class is used a reference to this class must be made in the HTML code. For instance, assuming the

tag has been redefined to be green Times New Roman, and a new class called caption has been defined to display red centred italic text, the following HTML tags could be used:

This will appear in green TNR

This will be centred red italics

Pros and Cons

Pros of CSS

The main benefit of CSS has already been mentioned – it allows a consistent style to be applied across a number of web pages. If formatting changes are required then changing the style sheet will apply those changes throughout, where the alternative would be to edit all the pages manually. Using web-level style sheets means that all responsibility for formatting can be taken by a single office or person even for a multi-national corporation with dozens of websites.

Cons of CSS

• Speed issues – downloading an HTML file and a CSS file will always take longer than downloading just the HTML file, though this will be offset if the user goes on to download many pages using the same CSS.
• Different syntax to HTML – CSS was developed independently of HTML and uses a different syntax, so a web developer has to learn two sets of formatting syntax instead of one. CSS syntax is also rather clumsy and user-unfriendly.
• Requires access to external files – If you save an HTML file on disk without the associated style sheet then it wil lose its formatting when you look at it offline. Similarly, any pages which depend on a web-level sheet will lose their formatting if access to the web-level sheet site is lost. Similarly, all material linked to from a CSS file (images, for instance) must be available for the CSS to work properly.
• Can easily be overridden – because CSS is an open text-based system there is no security built in, and anyone with read/write access to a website can disrupt the formatting by changing the CSS files or altering the links in the webpages.
• Complicates templates – CSS files are particularly troublesome within authoring packages which use templates, like Dreamweaver, since a CSS link that works within the template may not necessarily work when the template is used to create a web page.
• CSS also gets complicated in content management systems (CMSs) like Joomla! and Drupal, because CSS links have to be maintained across a range of directories as files are created and moved around. Most CMSs use CSS files as part of their formatting system, but these are usually fairly complex, and tinkering with them can have unforeseen consequences.

So although the advantages of CSS far outweigh the disadvantages, designers still need to be aware of the pitfalls that may arise from its use.