Pros and Cons of CSS

Written by: jonjermey • Edited by: Linda Richter
Updated Oct 22, 2010 • Related Guides: Html Tags | Content Management Systems | CSS

CSS provides a means by which web designers can apply consistent formatting across a range of web pages and even between different sites. But it does come with drawbacks. This article looks at some of the costs as well as the benefits of using CSS.

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 (<H1> 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 <HEAD> tag section at the top. The code then applies to that page only. To apply the same styles to another page the entire <STYLE> 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 <HEAD> tag section, like this: <LINK REL=StyleSheet HREF="style.css">. 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 <LINK REL=StyleSheet HREF="http://www.acmeco.com/masters/style.css"> 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.

<LINK REL=StyleSheet HREF="http://www.acmeco.com/masters/style.css">

<LINK REL=StyleSheet HREF="style.css">

<STYLE> h1 {color : green} </STYLE>

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 <H1> 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:

<H1>This will appear in green TNR</H1>

<p class = caption>This will be centred red italics</P>

Showing page 1 of 2

12next »

Pros and Cons of CSS

What is CSS?

Why Cascading

CSS setting types

Comments