Cascading Style Sheets (CSS) Explained
Modern web development practice is increasingly more standards-compliant, that is, it follows recommendations and guidelines set down by the W3C (World Wide Web Consortium). One specific area is in the use of CSS (Cascading Style Sheets) and the separation of format from content and behaviour, i.e. what the page contains, how it looks (the shape, colour and size, etc. of its elements) and how it responds to user interaction.
CSS controls the look and placement of page elements. One or many CSS files are associated with a web page and are usually held as external files referenced for inclusion in the head section of a page. CSS describes the attributes of a page element, a paragraph for instance, which will have placement, margins and padding, font size, back- and foreground colour, weight like emboldening or emphasis (italics), width and height, to name but a few of its characteristics – or style – which may be specified. Certainly, it is possible to use inline styles but this would be in rare instances.
CSS Selectors
Various selectors are used to choose page elements and apply the necessary styling. There are about 10 types of selector but the ones clearly identifiable in page markup are class and ID. A class selector may be used multiple times in a web document (or page), an ID once and once only. Some selectors are not fully implemented in Internet Explorer but modern Gecko-based browsers like Firefox employ all selectors correctly.
CSS Tags
All page elements are set within tags. The paragraph is enclosed within the paragraph
tag, an image is encapsulated within the image tag or a top level heading would sit within an
tag. There are about 90 tags in use either in HTML or XHTML performing specific markup duties and subject to differing degrees of style using CSS.
The move towards standards-based development and semantic markup (proper use of elements to meet their intended purpose) has gathered momentum over the past three years, to the extend that software manufacturers like Macromedia have given much greater thought to the quality of markup their products generate.
Cross-browser Compatibility
Use of appropriate tags and cascading style sheets has made the tasks of writing for cross browser compatability a more precise, reliable and consistent practice. Before CSS gained mainstream acceptance developers would often use inline browser sniffing, snippets of JavaScript code to interrogate the browser for its identity and version number, implementing a number of branching routines to either pull in external files or set variables to execute alternate section of code encountered later in the page. Although clumsy this worked fairly well – unless JavaScript was disabled in the browser, whereupon the site invariably fell apart. Such statements like ‘JavaScript must be enabled’ or ‘Works best in Internet Explorer’ were (and still are) frequently seen on websites.
This is now antiquated practice because a well constructed site which employs style sheets will likely work across all contemporary web browsers, albeit with a few tweaks for certain elements where browser manufacturers have misinterpreted W3C standards or to accommodate earlier less compliant versions of browsers which remain in use.
Not so long ago developers were forced to cater for archaic browser versions like Netscape 4 but the percentage of users with such old browsers has become minuscule such that it is now safe to discard antiquated browsers before Internet Explorer 6. That said, there may be occasions when corporate intranet browser policy means archaic browsers exist simply to maintain legacy code where a strategy to update remains unidentified and the developer may be forced to define a clear graceful degradation methodology. This, thankfully, is not difficult to achieve using standards-compliant markup and a understanding of accessible development.
