Order a domain here

Cascading Style Sheets

Cascading Style Sheets (CSS) is a computer language used to describe the stylistic presentation of a structured document written in HTML or XML. The CSS specification is maintained by the World Wide Web Consortium (W3C).

Overview

CSS is used by both authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document structure (written in HTML or a related language) from document presentation (written in CSS). This separation provides a number of benefits, including improved content accessibility, greater flexibility and control in the specification of presentational characteristics, and reduced complexity of the structural content. CSS is even capable of specifying alternative rendering methods, such as by sound (reading out loud by a speech-based browser), and braille-based tactile devices.

Additionally, CSS can be used with XHTML, XML, or in fact any structured document format which is properly implemented in an associated user agent or browser.

The presentational characteristics can be specified separately for each combination of an HTML element, "class", and "id" (unique identifier), but also for larger categories like a particular HTML element regardless of id or conversely. These elements, classes, names and id's are partly needed in the HTML code anyway, and partly specially put for this purpose.

CSS information can be provided by:

• Author style
  • external, i.e. a separate CSS-file referenced from the HTML document
  • embedded in the HTML document
  • inline, overriding the general style just for one occasion
• User style
  • a local CSS-file specified by the user in the browser options, to be applied on all HTML-files; for the case that author and user style regarding a particular style item differ, the user can specify which should determine the result.
• User agent style
  • the default style sheet applied by the user agent, eg. the browser's default presentation of HTML elements.

CSS specifies a cascading order that accords relative weights to rules. When rules from the three origins overlap, the one with the greatest weight is actually applied.

Advantages of using CSS include:

• Presentation information for an entire website or collection of pages resides in one place, and can be updated quickly and easily
• Different users can have different style sheets: large print and text readers for example.
• The HTML code is reduced in size and complexity, since it does not need to contain any presentational markup

CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.

Example:

  p {      font-size: 110%;     font-family: arial, garamond, sans-serif;     }  h2 {      color: red;     background: white;     }  .highlight {     color: red;     background: yellow;     font-weight: bold;     } 

Here, the HTML elements p (paragraph) and h2 (level two heading) are being assigned stylistic attributes. The paragraph element will be rendered in a font size ten per cent larger than its parent, in the Garamond font or, if Garamond is unavailable, a generic sans-serif font. The level two heading element will be rendered in red, on a white background. The third rule shown here defines a CSS class, which can be assigned to any HTML element by using the class attribute. For example:

<p class="highlight">This paragraph will be rendered in red and bold, with a yellow background.</p>

History of CSS

Style sheets have been around in one form or another since the beginnings of HTML in the early 1990s. Various browsers included their own style language which could be used to customize the appearance of web documents. Originally, style sheets were targeted towards the end-user; early revisions of HTML did not provide many facilities for presentational attributes, so it was often up to the user to decide how web documents would appear.

As the HTML language grew, however, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. With these capabilities, style sheets became less important, and an external language for the purposes of defining style attributes was not widely accepted until the development of CSS.

The concept of Cascading Style Sheets was originally proposed in 1994 by Håkon Wium Lie. Bert Bos was at the time working on a browser called Argo which used its own style sheets; the two decided to work together to develop CSS.

A number of other style sheet languages had already been proposed, but CSS was the first to incorporate the idea of "cascading" -- the capability for a document's style to be inherited from more than one "style sheet." This permitted a user's preferred style to override the site author's specified style in some areas, while inheriting, or "cascading" the author's style in other areas. The capability to cascade in this way permits both users and site authors added flexibility and control; it permitted a mixture of stylistic preferences.

Håkon's proposal was presented at the "Mosaic and the Web" conference in Chicago in 1994, and again with Bert Bos in 1995. Around this time, the World Wide Web Consortium was being established; the W3C took an interest in the development of CSS, and organized a workshop toward that end. Håkon and Bert were the primary technical staff on the project, with additional members, including Thomas Reardon of Microsoft, participating as well. By the end of 1996, CSS was nearly ready to become official. The CSS level 1 Recommendation was published in December 1996.

Early in 1997, CSS was assigned its own working group within the W3C, chaired by Chris Lilley. The group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2, which was published as an official Recommendation in May 1998. CSS level 3 is still under development as of 2004.

Difficulty with adoption

Although the CSS1 specification was completed in 1996, it would be more than three years before any web browser achieved full implementation of the specification. Microsoft Internet Explorer 5.0 for the Macintosh, shipped in March of 2000, was the first browser to have full (better than 99 per cent) CSS1 support. Other browsers followed soon afterwards, and many of them additionally implemented parts of CSS2, though as of 2003, no browser has achieved full implementation of CSS2.

Even the browsers that did achieve full implementation often did so with a degree of difficulty; many implementations of CSS are fraught with inconsistencies, bugs and other quirks. Authors have commonly had to utilize hacks and workarounds in order to obtain consistent results across browsers and platforms. One of the most well-known CSS bugs is the Internet Explorer box model bug; box widths are interpreted incorrectly in several versions of the browser, resulting in blocks which appear as expected in most browsers, but are too narrow when viewed in Internet Explorer. The bug can be avoided, but not without some cost in terms of functionality.

This is just one of hundreds of other CSS bugs that have been documented in various versions of Internet Explorer, Netscape, Mozilla, and Opera, many of which have severe detrimental effects on the legibility of the document; the proliferation of such bugs in CSS implementations has made it difficult for designers to achieve a consistent appearance across platforms. However, currently, Mozilla's Gecko layout engine is the best at rendering CSS, while Internet Explorer remains the worst at rendering CSS by standards set down by World Wide Web Consortium.

Usage of CSS

CSS is designed primarily to separate presentation from content. Authors who use CSS commonly do so towards this end. Prior to CSS, nearly all of the presentational attributes of an HTML document were contained within the HTML code; all font colors, background styles, alignment specification, boxes, borders, and sizes had to be explicitly described, often repeatedly, in the midst of the HTML code. CSS allows authors to extract much of that information, resulting in considerably simpler HTML code, supplemented by an auxiliary style sheet written in the language of CSS. The structure and semantic markup is restricted to the HTML code, while the presentational markup is restricted to the CSS code.

For example, the HTML element h2 specifies that the text contained within it is a level two heading. It has a lower level of importance than h1 headings, but a higher level of importance than h3 headings. This aspect of the h2 element is structural.

Customarily, headings are rendered in decreasing order of size, with h1 as the largest, because larger headings are usually interpreted to have greater importance than smaller ones. Headings are also typically rendered in a bold font in order to give them additional emphasis. The h2 element may be rendered in bold face, and in a font larger than h3 but smaller than h1. This aspect of the h2 element is presentational.

Prior to CSS, document authors who wanted to assign a specific color, font, size, or other characteristic to all h2 headings had to utilize the HTML font element, or other presentational markup, in addition to the h2 element, since h2 is strictly a structural element. A heading to be rendered in an italic red font on a white background might be written:

<h2><font color="red" bgcolor="white"><i>Usage of CSS</i></font></h2>

The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain; if all level two headings were to be rendered in this style, the markup had to be used for each one separately. Furthermore, a person reading the page with a web browser loses control over the display of the text; if they would rather see the heading in blue, they cannot easily do so, as the site author has explicitly defined the heading color to be used.

With CSS, the h2 element can be used to give the text structure, while the style sheet gives the text its presentational characteristics. The above might be written:

<h2>Usage of CSS</h2>

With an accompanying style sheet to define the red italic style and white background:

h2 { color: red; background: white; font-style: italic; }

Thus, presentation is separated from content. (It is because of the advantages offered by CSS that the W3C now considers many of the presentational elements and attributes in HTML to be deprecated). The HTML describes only structural aspects, and the CSS describes all presentational aspects. CSS can define color, font, text alignment, size, and also non-visual formatting such as the speed with which a page is read out loud in text readers.

CSS style information can be either attached as a separate document or embedded in the HTML document. Multiple style sheets can be imported, and alternative style sheets can be specified so that the user can choose between them. Different styles can be applied depending on what media is being used. For example, the screen version may be quite different from the printed version. This allows authors to tailor the presentation appropriately for each kind of media. Also, one of the goals of CSS is to allow users a greater degree of control over presentation; users who find the red italic headings difficult to read may apply their own style sheet to the document, and the presentational characteristics will be "cascaded"; the user may override just the red italic heading style, and the remaining attributes will stay the way they are.

See also HTML_element#Presentational_markup, which gives the CSS code, along with the deprecated tags.

Example of an XHTML document with embedded CSS

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">    <head>      <style type="text/css">      body {           background: #fff;           color: #000;           }        h1 {            font: bold italic 150% sans-serif;           color: blue;           }      </style>    </head>    <body>      <h1>This will appear in large bold blue italics</h1>      <p>Normal text.</p>      <h1 style="color: red; background: green;">      This will appear in large bold red italics on a green background,       the general h1-style defined above is partly overridden.      </h1>      <h1>This will appear in large bold blue italics</h1>    </body>  </html> 

Example of a user style sheet

File highlightheaders.css containing:

  h1 {color: white; background: orange !important; }   h2 {color: white; background: green !important; } 

Such a file is stored locally and is applicable if that has been specified in the browser options. "!important" means that it prevails over the author specifications.

Common pitfalls

CSS may at times be misused, particularly by the author of web documents. Some developers who are accustomed to designing documents strictly in HTML may overlook or ignore the enabling features of CSS. For instance, a document author who is comfortable with HTML markup that mixes presentation with structure may opt to use strictly embedded CSS styles in all documents. While this may be an improvement over using deprecated HTML presentational markup, it suffers from some of the same problems that mixed-markup HTML does; specifically, it entails a similar amount of document maintenance.

CSS shares some pitfalls common with programming languages. In particular, the problem of choosing appropriate names for CSS classes and identifiers may afflict CSS authors. In the attempt to choose descriptive names for CSS classes, authors might associate the class name with desired presentational attributes; for example, a CSS class to be applied to emphasized text might be named "bigred", implying that it is rendered in a large red font. While such a choice of naming may be intuitive to the document author, it can cause problems if the author later decides that the emphasized text should instead be green; the author is left with a CSS class called "bigred" that describes something that is green. In this instance, a more appropriate class name might have been "emphasized," to better describe the purpose or intent of the class, rather than the appearance of elements of that class. In a programming language, such a misuse might be analogous to using a variable name "five" for a variable which contains the value 5; however, if the value of the variable changes to 7, the name is no longer appropriate.

Another problem are unspecified, undocumented, and often forgotten class-names. A web author may have hundreds of different needs; sometimes, the class is called "footer", sometimes "footnote"; at times it's "explanation", at others "note", then "info", then "more". This way, redundancy creeps in. Often an author of many complex websites might rely on inline-styles to solve this problem; inline-styles however again glue together content and layout, and are media-dependent (a big bonus of external stylesheets is their media-independence, as different styles can be referenced for different output media -- something not possible with inline-styles).

Complexity of HTML is another possible problem. While most HTML which separates itself from the layout world will be much more lean and clean than traditional redundant table-layout, overuse of classes and nested divisions can lead to almost the same "garbage HTML". Then, there's the overuse of divisions (which don't have semantics of their own, just like CSS classes or IDs) -- a div-element with the class "header" is naturally not to be preferred to a h1, h2, or h3 element, yet we often see similar things being written.

Yet another pitfall is a workaround to solve common CSS or browser-implementation short-comings by using so-called "CSS hacks". Even though these hacks serve a specific need (to exclude a certain browser from a stylesheet, to please different resolutions, and so on), their implementation and maintenance cost might be higher than traditional pre-CSS HTML methodology -- table layout, font-element and so on. (The only good thing about those CSS hacks is they don't re-appear in thousands of pages but instead are in one or two CSS files.)

Lastly there is a tendency of CSS designers to mistake the layout easily to be achieved with the layout a reader might prefer. Several CSS selectors allow specific border styling, yet that doesn't make a border and box heavy web design better to look at per se. Because we can does not mean we should. And one of the most misused CSS styling certainly is such trickery as removal of link-underlines. It's easy to implement, yes; but the trouble for average visitors might be heavy. (Extra-small and hard-to-decipher font-sizes on the other hand have been around before stylesheets.)

Recommendations

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are:

• Font properties
• Color and background properties
• Text properties
  • word-spacing
  • text-wrapping
  • alignment
• Box properties
  • Margin
  • Border
  • Padding
  • Float
• Classification properties
  • 'display'
  • lists

The W3C maintains the CSS1 Recommendation (http://www.w3.org/TR/REC-CSS1).

CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities, among them the absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2 Recommendation (http://www.w3.org/TR/REC-CSS2/).

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. It's currently a Candidate Recommendation (http://www.w3.org/TR/2004/CR-CSS21-20040225).

CSS level 3 is currently under development. The W3C maintains a CSS3 progress report (http://www.w3.org/TR/css3-roadmap/).

References

• Jeffrey Zeldman: Forward Compatibility: Designing and Building with Web Standards., New Riders, ISBN 0735712018 (paperback) (book's companion site (http://www.zeldman.com/dwws/))
• Eric A. Meyer: Cascading Style Sheets: The Definitive Guide, 2nd Edition, O'Reilly & Associates, ISBN 0596005253
• Eric A. Meyer: Cascading Style Sheets 2.0 Programmer's Reference, McGraw-Hill Osborne Media, ISBN 0072131780

See also

• W3C
• XSL

External links

• Cascading Style Sheets (http://www.w3.org/Style/CSS/) at the W3C
  • Specification of CSS2 (http://www.w3.org/TR/REC-CSS2/)
• W3C CSS Validation Service (http://jigsaw.w3.org/css-validator/)
• Web Design Reference (http://www.d.umn.edu/itss/support/Training/Online/webdesign/) - It is a huge mega-reference (over 3,000 links) of information and articles dedicated web design and development. The site advocates CSS, accessibility, web standards, usability and many related topics. It features a listserv and RSS feed for site updates.
• A List Apart Magazine (http://www.alistapart.com/) - Online magazine promoting the use of CSS and other web standards.
• css/edge (http://meyerweb.com/eric/css/edge/) - An amazing collection of examples showing what can be done with CSS.
• CSS Code Generators (http://www.scriptomizers.com/scripts/css)
• Richinstyle.com (http://richinstyle.com) - A guide to CSS, and bugs.
• CSS Panic Guide (http://thenoodleincident.com/tutorials/css/) - a fast resource
• CSS-discuss wiki (http://css-discuss.incutio.com/) - A wiki dedicated to CSS
• CSS-Talky (http://css.talky.de/) - A sample list
• css Zen Garden (http://www.csszengarden.com/) - A demonstration of what can be accomplished visually through CSS-based design.
• XML.com
  • Tutorials (http://xml.com/pub/rg/CSS_Tutorials)
  • Software (http://xml.com/pub/rg/CSS_Software)
• CSS 4 You (http://www.css4you.de/) - Well known german CSS-Reference. Complete Reference CSS Level 1 + 2, incl. Workshops
• CSS design, style, fun (http://tanfa.co.uk/)
• CSS Menu Generator (http://www.webmaster-toolkit.com/css-menu-generator.shtml)
• SELFHTML: CSS Style Sheets (http://en.selfhtml.org/css/)

Hacks and workarounds

• Box model hack (http://www.tantek.com/CSS/Examples/boxmodelhack.html)
• Another box model workaround (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
• Commented backslash hack (http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html)

Wikipedia's new default skin ('MonoBook') is completely based on css and provides a simple way to customize the site using user styles included from a subpage of the user page. Even a no-css version is provided (MySkin) for the development of new css skins.