Cascading Style Sheets: Why and How?

Index

1. Introduction
2. Advantage of Cascading Style Sheets
a. Faster download speeds
b. Allows pages to be truly cross platform
c. Visual continuity
d. Site Maintenance
e. New features to HTML standard
f. User specific presentation
g. Absolute positioning
3. Adding Cascaded Style Sheet to an HTML document
a. Linked style sheets
b. Embedded style sheets
c. Inline style sheets
4. Conclusion
a. Browser Support for CSS
b. The Future of CSS
c. Summary
5. Bibliography

Introduction

“I use CSS because I want precise control over the presentation of my documents, in a way which can be dynamically altered, yet is expressed in a human readable language”
Tantek Celik, Microsoft

The World Wide Web Consortium (W3) proposes standards for the various languages (HTML, XML and CSS) from which the internet is built. As the internet expands as an information medium so must the framework of standards that underpin it. It became apparent during the 1990s that HTML was struggling under the weight of complex presentation techniques. What was conceived as a structured method of presenting largely text based documents was becoming cumbersome detracting from its original purpose.

The W3 Consortium proposed a solution to these problems; Cascading Style Sheets (CSS), essentially a way of separating presentation and content. It achieved this by leaving the definition of structure to HTML and using CSS to assign rendering properties to the elements. That is to say CSS would govern the specific appearance of the HTML components comprising the document. The appearance 'rules' defined in the style sheet added a new weapon to the armoury of HTML authors. Within the advent of the CSS1 standard it was possible to control the presentation and visual elements of an HTML document all by implementing a style sheet.

Advantages of CSS

1. Faster download speeds

It is possible within the style sheet to define the appearance of almost all page elements. Prior to CSS it was necessary to define the appearance of the elements in the page with HTML tags. For every different use of a font or colour an appropriate tag had to exist which showed the web browser where to apply the effect. The <FONT> tag was used extensively to change text elements to differing fonts, colours or sizes. In CSS different types of text (e.g. paragraphs and headings) have a pre-defined appearance as specified in the style sheet.

2. Allows pages to be truly cross platform

The CSS specification specifically CSS2 incorporates the ability to design a style sheet for a WAP enables mobile phone or Pocket PC. By simplifying the layout and colours of a page using a style sheet it is possible to have the page display a different style sheet depending on the browser of the machine accessing the site. Another spin off of this technology is the inclusion of a printer friendly style sheet. By removing some of the complex layout features that web designers love so much, it is possible to print a web page that fits into conventional print margins.

3. Visual continuity is easier to achieve

When a designer constructs a large website it is an easy mistake to confuse the specifics of font and colour from page to page. Using a centralised style sheet to format your HTML documents ensures that a coherent theme is maintained throughout the site. Due to the cascading nature however it is still possible to overwrite the central style with a more local style sheet within the document (see next section).

4. Site maintenance

Centralised design for the page vastly increases the speed in which it is possible to update the properties of presentation related HTML elements. By changing the properties of a class of code, every instance of the class in the page is changed. If you have redefined the default appearance of a paragraph in your style sheet every paragraph in a page that utilises the style sheet is also updated accordingly.

5. Many new features to HTML standard

The control a designer had over the elements in a page was very linear before CSS. The standard brought the possibility of adding individual background images to any page element. It also allowed borders to be added to page elements without the need for tables or an image.

6. User specific presentation

This is the single most under-rated feature of CSS. It is possible to apply your own style sheet to any web page. This is especially useful for disabled users who can increase the size of fonts or even add in aural prompts if they are blind. This is a vastly important change - bringing the World Wide Web to everyone.

7. Absolute positioning

One of the largest single problems with HTML is positioning items exactly where you want them. It is possible to align them as left, right or centre on the page but not to control their position to the pixel. CSS changed this by applying the number of pixels from the edges of the page it is possible to position an item with precision.

Adding CSS to an HTML/XML document


External or Linked Style Sheets

This is the preferred method of using style sheets. To completely separate presentation and style the style attributes are stored in their own document with a .CSS extension. The style sheet file is then linked to within the header of the web page (between the <HEAD> and </HEAD> tags).

Example:

<link rel=stylesheet type="text/css" href="styles/stylesheet.css">

In the above example the bold text is the name and path of the style sheet. In this case the style sheet is called stylesheet.css and is in styles sub directory.

Embedded Style Sheets

If a designer is creating only a small page or wants to override the styles defined in an external sheet - it is possible to do so by defining the style sheet within the HTML document itself. As opposed to using the linked method here the styles are defined inside the header between the <STYLE> and </STYLE> tags.

Example:

<style type="text/css" media=screen>
<!--
body { background: url(foo.gif) red; color: black }
p em { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</style>

Inline Style Sheets

This method is the least commonly used primarily because it detracts largely from the streamlining goals of style sheet by removing unnecessary HTML code. It does however have a specific use if you are trying to overwrite a pre-defined style for a single page element. If for example you wish to change the appearance of an individual paragraph it is possible to build the style parameters into the tag itself.

Example:

<p style="color: #090; line-height: 1.2">...</p>

Conclusion


Browser Support for CSS

It surprises me that more web designers do not use Cascading Style Sheets. The internet needs a technology like CSS to tame a lot of the poorly written web pages out there. One of the biggest problems regarding CSS and indeed many other fledgling web technologies is the lack of browser support. The mainstream browsers - Netscape Communicator and Internet Explorer do not adhere strictly to the standards proposed by the World Wide Web Consortium. Whether arrogance on their part or merely an effort to give their own product a competitive advantage no-one knows; but this has to change. It has taken several generations of web browser evolution for the original CSS standard to be properly adopted and the CSS2 proposals are still relatively poorly supported. As this essay argues the benefits of CSS are numerous unless the correct software support is present the hard work of agencies like W3 is wasted.

The Future of CSS

Currently standards are being developed for the CSS3 specification. It builds on the features and the ideas of the earlier versions significantly introducing new features that further the concept to the next level.

The largest change is in the structure of the style sheets themselves - there is a much more 'modular' approach to the standard. The component parts of a style sheet are individual modules that can inherit properties from one another through interdependencies but still remain separate in nature. This is a move towards the theories of object orientation and makes adding further components into the standard at a later date considerably easier because of this 'plug-in' functionality.

The feature from a design point of view that impresses me the most is the ability to set the 'opacity of an object' that is to control its transparency. Previously this type of effect involved the use of advanced graphics programs such as Adobes PhotoShop series. Now by simply specifying an appropriate value in your style sheet for the opacity property you can give you page visual makeover. Linking the foreground and background of page together has always been a difficult process; using effects like opacity it is possible to easily create a real sense of depth through the seamless integration of foreground and background. I look forward greatly to harnessing this power in future pages.

Another major change from a design perspective is the added ability to control the background property of mark-up elements. Previously it was possible to assign a background image to most page elements - this has been further expanded and the more control has been given over background specifics. Now it is possible to specify background colour, location, whether the image repeats and its exact positioning. This is another step away from the constraints of the original HTML standards allowing more freedom to be creative.

Many other tweaks have been made to summarise; improved list handling; ability to specify a specific colour palette; important tweaks to the way in which properties are inherited; fonts are referred too by a consistent method (because name is not sufficient); and the ability to add boxes is available on more elements.

Summary

The future looks extremely bright for CSS3 - it is starting to receive the plaudits that an innovation of its magnitude deserves. With a plethora of advantages, and only a few minor gripes largely relating to the native support in the current crop of web browsers CSS will be the technique of choice for many web designers for a long time. There are those who may still appreciate the positional merits of tables despite their 'fiddly-ness' and the raw good looks of a gallery of PhotoShop masterpieces, but I have tried them both and I know where my allegiances lie.

Bibliography



 

 

Site design by Adam Wilson
Copyright © 2002