Cascading Style Sheets (CSS) is a stylesheet
language used to describe the presentation of a structured document written in markup
languages like HTML and XHTML. In additional,
the language can be applied to any application of XML, e.g. SVG, XUL, etc.
The CSS specifications are 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 similar markup 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 also capable of controlling the document's style separately in
alternative 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.
CSS can be used with XML, to allow such structured documents also to be rendered with full stylistic control over layout,
typography, colour, and so forth in any suitable user agent or web browser.
Elements are styled by selecting them with different (CSS 1) selectors:
- All elements
- that is, using the * selector
- By element name
- e.g. for all '
p' or 'h2' elements
- Descendants
- e.g. for '
a' elements that are descendants of 'li' elements (i.e. nested lists) the selector is "li
a"
- class or id attributes
- e.g. .class and/or #id for elements with
class="class" or id="id"
In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these
is the :hover, which is the style applied when the element is activated, usually by pointing to it with mouse. It is
applied to a selector by appending as in a:hover or #elementid:hover. Other pseudo-classes or
pseudo-elements are, for example, :first-line, :visited or :before.
Selectors may be combined to achieve greater specificity.
CSS information can be provided by:
- Author style
- external, i.e. a separate CSS-file referenced from the document
- embedded in the 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 documents; 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, e.g. the browser's default presentation of 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—that is, if a style sheet is imported.
- Different users can have different style sheets: large print and text readers for example.
- The document 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.
A style sheet consists of a list of rules. Each rule consists of a selector and a declaration block. A
declaration-block consists of a list of semicolon-separated declarations in curly braces. A declaration consists of a
property, a colon (:) then a value.
Example:
p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110%;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: none;
}
a:hover {
text-decoration: none;
}
These are five rules, with selectors p, h2, .note, p#paragraph1 and
a:hover
An example of a declaration is color: red, where the property color is given the value
red.
In the first two rules, the HTML elements p (paragraph) and h2 (level two heading) are being
assigned stylistic attributes. The paragraph element will be rendered in Garamond
font or, if Garamond is unavailable, some other 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 document element by using the class
attribute. For example:
<p class="note">This paragraph will be rendered in red and bold, with a yellow background.</p>
The fourth rule will affect a p element whose id attribute is set to paragraph1: It
will have no margin within its rendering 'box'.
The last rule defines the hover action for a elements. By default in most browsers, a
elements are underlined. This rule will remove the underline when the user "hovers" the mouse cursor over these elements, without
clicking.
A CSS stylesheet can contain comments; the format is
/* comment */
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. 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, surpassing Opera, which had been the leader since its introduction of CSS support
fifteen months earlier. Other browsers followed soon afterwards, and many of them additionally implemented parts of CSS2, though
as of 2004, no browser has achieved full implementation of CSS2. Properties
specific to aural and paged media remain the least well supported.
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 use hacks and workarounds in order to obtain
consistent results across web 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 CSS bugs that have been documented in various versions of Internet Explorer, Netscape, Mozilla, and
Opera, many of which reduce the legibility of documents.
The proliferation of such bugs in CSS implementations has made it difficult for designers to achieve a consistent appearance across platforms. Currently, Mozilla's Gecko is the best at rendering CSS, closely followed by the
Presto layout engine used in Opera and the KHTML engine used in both Apple's Safari and the Linux Konqueror browsers. Internet Explorer remains the worst at rendering CSS by standards set down by World Wide Web Consortium as of 2005.
These problems have led the W3C to revise the CSS2 standard into CSS2.1, which may be regarded as something of a working
snapshot of current CSS support. CSS2 properties which no browser had successfully implemented were dropped, and in a few cases,
defined behaviours were changed to bring the standard into line with the predominant existing implementations. CSS2.1 is
currently a Candidate Recommendation.
Use of CSS
CSS is designed primarily to separate presentation from content. 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 remove
much of that information to a stylesheet, resulting in considerably simpler HTML code. The HTML documents become much smaller and
web browsers will usually cache sites' CSS stylesheets. This leads to a reduction in network traffic and noticeably quicker page
downloads.
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 use the HTML font element for each occurrence of that heading type. A heading to be
centred on the page in italic, red, Times New Roman might be written:
<h2 align="center"><font color="red" size="+4" face="Times New Roman, serif"><em>Usage of
CSS</em></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>
While the following block in an accompanying style sheet defines the same style for all default h2 headings
across the web site:
h2 {
text-align: center;
color: red;
font-size: large;
font-family: "Times New Roman", serif;
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.
A tendency to use multiple classes associated with the paragraph tag instead of the heading tags should be avoided. Screen
readers and other text only browsers do not interpret the class and therefore would not relay the structure of the design to the
user. The use of the heading tags also allows the page to retain some structure in older browsers or where the user has turned
off styles. See Web accessibility for more information.
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,h2 {
font: bold italic sans-serif;
color: blue;
}
</style>
</head>
<body>
<h1>This will appear in bold blue italics</h1>
<p>Normal text.</p>
<h2 style="color: red; background: green;">
This will appear in bold red italics on a green background;
the style for h2 defined above is partly overridden.
</h2>
<p>Normal text.</p>
<h2>This will appear in bold blue italics</h2>
<p>Normal text.</p>
</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.
CSS 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.
Recommendations
The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:
- Font properties such as typeface and emphasis
- Color of text, backgrounds, and other elements
- Text attributes such as spacing between words, letters, and lines of text
- Alignment of text, images, tables and other elements
- Margin, border, padding, and positioning for most elements
- Unique identification and generic classification of groups of attributes
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/CSS21/).
CSS level 3 is currently under development. The W3C
maintains a CSS3 progress report
(http://www.w3.org/Style/CSS/current-work#table).
CSS experiments
Recently, there has been a trend among web designers to document all their experiments with CSS on a section of their site.
Examples include:
These experiments are usually only compatible with browsers that are largely standards compliant, such as Mozilla or Opera. Many of
them also have the word "edge" in their title - meaning they "push the browser to the edge."
References
CSS Books
External links
Official documentation and reference
Tutorials, resources, guides, etc.
- A List Apart
Magazine (http://www.alistapart.com/) - Online magazine promoting the use of CSS and
other web standards.
- Brain Bliss
(http://www.brainbliss.com/cat03/art07.html) - Fun CSS tricks.
- Richinstyle.com (http://richinstyle.com) - A guide to CSS, and bugs.
- CSS Box Model
(http://www.ilovejackdaniels.com/css/box-model/) - A guide to the box model in CSS and how different browsers treat
it.
- CSS Panic Guide
(http://thenoodleincident.com/tutorials/css/) - a fast resource
- CSS-discuss
wiki (http://css-discuss.incutio.com/) - A wiki dedicated to CSS
- Position Is
Everything (http://www.positioniseverything.net) - Articles on CSS bugs in different
browsers and workarounds to common CSS problems
- CSS
tutorials (http://xml.com/pub/rg/CSS_Tutorials) and CSS software (http://xml.com/pub/rg/CSS_Software)
- CSS XHTML Tutorials (http://www.htmldog.com) - A resource for using CSS and XHTML
- CSS for Beginners (http://css.somepeople.net) - An introduction to CSS
- Max
Design (http://css.maxdesign.com.au/index.htm) - Comprehensive list, float and
selector tutorials for css.
- Quirksmode (http://www.quirksmode.org/) - All kinds of good info about different browsers and their
quirks.
- Zeldman
(http://www.zeldman.com/) - Good CSS and webstandards articles including many great links to resources
- mezzoblue (http://www.mezzoblue.com/) - CSS articles and tutorials and related webstandards resources
- SimpleBits (http://www.simplebits.com/) - Home of the SimpleQuiz and CSS tutorials
Validation
CSS demonstrations and examples
- CSS Zen Garden (http://www.csszengarden.com/) - A demonstration of what can be accomplished visually through
CSS-based design.
- CSS Beauty (http://www.cssbeauty.com) - Collections of good-looking websites designed with CSS
- css/edge (http://meyerweb.com/eric/css/edge/) -
An amazing collection of examples showing what can be done with CSS.
- CSS design, style, fun (http://www.tanfa.co.uk/) - Articles, layouts and experiments for fun and usability
Browser compatibilities and implementation bugs
Hacks and workarounds
|
