Cascading Style Sheets (CSS): Advantages and Disadvantages

Web Development, Internet
Page content

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 block must be copied and pasted into the new page.

Site level CSS – somewhere in the website a single page is stored, usually with the extension .CSS, containing style definitions. Each page on the website is then linked to that page via a tag in the tag section, like this: . When the user downloads the web page the link is activated and the styles are applied to the page as it appears on the screen.

Web level CSS – an extension of the former in which the web page is stored somewhere else on the Web and the link includes a complete URL: for instance This remote style sheet can thus be applied to hundreds or thousands of pages around the world. If a change is made to the remote sheet it immediately affects the formatting of all the pages that are linked to it.

Why Cascading

What makes the style sheet system ‘cascading’ is that later links to styles override earlier links. In the following example, a link to a web level CSS file precedes a link to a site level file, which in turn precedes a page level style definition. Assuming that all three of these define level 1 headings as different colours – blue, red and green, for instance – the bottom link will take precedence and the headings will end up green.

h1 {color : green}

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.