Cascading Style Sheets (CSS) is a mechanism for adding style (e.g., fonts, colors, spacing) to web documents. It was first developed in 1997, as a way for developers to define the look and feel of their web pages. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). It can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.
How CSS works
When a browser displays a document, it must combine the document’s content with its style information. It processes the document in two stages:
The browser converts the markup language and the CSS into a structure called the DOM (Document Object Model). The DOM represents the document in the computer’s memory. It combines the document’s content with its style. The browser displays the contents of the DOM.
A markup language uses elements to define the document’s structure. You mark an element using tags, which are strings beginning with ”. An element can have a start tag, which is just the name of the element, inside ”, and an end tag, which has the element name with a ‘/’ after the ‘<’. Depending on the markup language, some elements have only a start tag, or only a tag where the ‘/’ comes after the name. An element can be a container, with other elements between its start tag and end tag.
A DOM has a tree-like structure. Each element and run of text in the markup language becomes a node in the tree structure. DOM nodes are not containers. Instead, they can be parents of child nodes.
In a sample document, the
<p> tag and its end tag
</p> create a container:
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
In the DOM, the corresponding P node is a parent. Its children are the STRONG nodes and the text nodes. The STRONG nodes are themselves parents, with text nodes as their children:
P ├─STRONG │ └─"C" ├─"ascading" ├─STRONG │ └─"S" ├─"tyle" ├─STRONG │ └─"S" └─"heets"
Understanding the DOM helps developers to design, debug and maintain their CSS, because the DOM is where the CSS and the content of document meet up.
History of CSS
As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance, at the cost of more complex HTML. Variations in web browser implementations, such as ViolaWWW and WorldWideWeb, made consistent site appearance difficult, and users had less control over how web content was displayed. Robert Cailliau wanted to separate the structure from the presentation. The ideal way would be to give the user different options and transferring three different kinds of style sheets: one for printing, one for the presentation on the screen and one for the editor feature.
To improve web presentation capabilities, nine different style sheet languages were proposed to the World Wide Web Consortium’s (W3C) www-style mailing list. Of the nine proposals, two were chosen as the foundation for what became CSS: Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). CHSS, a language that has some resemblance to today’s CSS, was proposed by Håkon Wium Lie in October 1994. Bert Bos was working on a browser called Argo, which used its own style sheet language called SSP. Lie and Yves Lafon joined Dave Raggett to expand the Arena browser for supporting CSS as a testbed application for the W3C. Lie and Bos worked together to develop the CSS standard (the ‘H’ was removed from the name because these style sheets could also be applied to other markup languages besides HTML).
Unlike existing style languages like DSSSL and FOSI, CSS allowed a document’s style to be influenced by multiple style sheets. One style sheet could inherit or “cascade” from another, permitting a mixture of stylistic preferences controlled equally by the site designer and user.
Development of HTML, CSS, and the DOM had all been taking place in one group, the HTML Editorial Review Board (ERB). Early in 1997, the ERB was split into three working groups: HTML Working group, chaired by Dan Connolly of W3C; DOM Working group, chaired by Lauren Wood of SoftQuad; and CSS Working group, chaired by Chris Lilley of W3C.
The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997. It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was started in 1998, is still under development as of 2009.
In 2005 the CSS Working Groups decided to enforce the requirements for standards more strictly. This meant that already published standards like CSS 2.1, CSS 3 Selectors and CSS 3 Text were pulled back from Candidate Recommendation to Working Draft level.
CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets.
Even though CSS-capable browsers make it a viable technology, designers struggle with browsers’ incorrect CSS implementation and patchy CSS support. These problems continue to make the business of CSS design more complex and costly than it was intended to be, and cross-browser testing remains a necessity. Other reasons for the continuing non-adoption of CSS are: its perceived complexity, authors’ lack of familiarity with CSS syntax and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing.
Some common CSS browser compatibility Issues/Bugs for Internet Explorer:
1. The IE/Win Disappearing List-Background Bug
IE bug caused by placing a list with a background set within a floated <div> that has been relatively positioned.
2. IE6 Duplicate Characters Bug
This bug causes duplicate characters to appear, which is caused by HTML comments.
3. Float-Width Bug
When a floating element is followed by a block-level element with a width defined, Internet Explorer incorrectly redefines the content area for the block-level element.
4. The double-margin float bug
It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size.
Advantages of CSS:
- Separation of content from presentation
- More precise control of layout;
- Saves bandwidth
- Improved indexing
- Improved accessibility
Limitations of CSS:
- Cannot include styles from a rule into another rule
- Cannot target specific text without altering markup
- Absence of expressions
- Lack of column declaration
- Cannot explicitly declare new scope independently of position
Though there are limitations in CSS it has helped developers immensely to improve the presentation of their websites both efficiently and effectively. It is considered as the universal language for designers and developers alike.
Sources and references;