SoSLUG Archive

Cascading Style Sheets

Cascading Style Sheets (CSS)It would not be right to talk about HTML and Cascading style sheets without giving the World Wide Wide Consortium a plug. They are responsible for trying to bring order to the web, by getting the various Browser vendors to comply with a common standard.The standard an HTML, or XML page, conforms to is specified by the DOCTYPE. If this is missing many browsers will simply revert to what has been called quirks mode, and differences between browsers are readily apparent. As standards change, then different vendors may take longer than others to implement a particular feature. So even when a vendor claims to support a given standard, not all features may have been implemented, just the majority or main features may be covered.For the latest specification covering Cascading Style sheets the W3C website is the site to visit. You can also find HTML Tidy there. A tool for cleaning up HTML code and converting in-line styles to using <style> tags. Apart from the various web specifications, the site provides a window on the future developments of the web. 



About the W3C
Formatting HTML using HTML

HTML was not designed for formatting which was left to the particular browser. Originally HTML attempted to mix content and layout by providing tags which could be used to help lay out a document. What can be achieved in terms of layout with just HTML however is very limited. In effect the web developer was just using in-line styles.

As the Internet grew this limitation was overcome by the introduction of Cascading Style Sheets (CSS). These notes delve into some of the basic and more complex examples involving style sheets.
Advantages of CSS

Control layout of many documents from one single style sheet
Style rules are accessible to scripting and so can be changed dynamically
Apply different layout to different media-types, screen or print for example.
More precise control of layout
Visual effects

The purpose of Cascading style sheets is to separate the layout from the content, providing a much more flexible alternative. For example each time you use a <h1> tag for a page header, you want it styled the same, on every page. By using an external style sheet this can be set up just once. Furthermore if you decide to change it at some later date, only only need to change it in one place.
Another benefit is that style sheets make the various HTML tag properties accessible to coding (e.g. Javascript). To do this Cascading Style Sheets make use of the HTML id and class properties.

The term cascading refers to way in which style sheets rules are applied and initially may be a source of confusion. Because a single (HTML or XML element) may have multiple style rules applied to it, these rules are applied according to their precedence. For example an HTML page may have its own style rules enclosed within <style> … </style> tags which can override rules in the external style sheet.
Lastly, within a web page, may be in-line styles e.g. <p style=”list of style rules” >. These rules with override, or take precedence over both the local or external rules.

Style rules can be grouped together according to their function

fonts and text properties
color and background
positioning properties
classification properties

The standards for cascading style sheets are maintained by the W3 organisation.

Cascading Style Sheets can also be used with XML (e Xtensible) Mark-up Language. Like HTML Cascading Style sheets also have their limitations. XSL is a style sheet (just for XML) that is tackling some of those issues.

Author: Alan Campion - Page reference: 3088
Last modified: Alan Campion - 2015-08-31