Psychology Wiki

This material has been copied over from Wikipedia and needs 'translating' for the Psychology Wiki.

HTML

Cascading Style Sheets
Character encodings
Layout engine comparison
Dynamic HTML
Font family
HTML editor
HTML element
HTML scripting
Unicode and HTML
Web colors
W3C
XHTML

In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

Assessment | Biopsychology | Comparative | Cognitive | Developmental | Language | Individual differences | Personality | Philosophy | Social |
Methods | Statistics | Clinical | Educational | Industrial | Professional items | World psychology |

Psychology: Debates · Journals · Psychologists


Overview[]

CSS is used by both the 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 content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS 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. Similarly, identical HTML or XML markup can be displayed in a variety of styles, 'brands', liveries or colour schemes by using different CSS.

CSS information can be provided by various sources:

  • Author styles (style information provided by the web page author), in the form of
    • external stylesheets, i.e. a separate CSS-file referenced from the document
    • embedded style, blocks of CSS information inside the HTML document itself
    • inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute.
  • User style
    • a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
  • User agent style
    • the default style sheet applied by the user agent, e.g. the browser's default presentation of elements.

CSS specifies a 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.

Advantages of using CSS include:

  • Presentation information for an entire website or collection of pages can be held in one place, and can be updated quickly and easily.
  • Different users can have different style sheets: for example a large text alternative for visually-impaired users, or a layout optimised for small displays for mobile phones.
  • 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 one or more comma-separated selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself 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: 0;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: blue;
}

These are six rules, with selectors p, h2, .note, p#paragraph1, a:hover and #news p.

Property values are specified by, for example, 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 matches those elements that have a class attribute containing the token 'note'. For example:

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

In fact, .class selectors involve a special kind of attribute matching, as opposed to testing for equality. Since the HTML class attribute is defined as a whitespace-separated list of tokens, a class selector is evaluated against each of them separately.

The fourth rule will match the one and only p element in each HTML document whose id attribute is set to paragraph1: It will have no margin within its rendering 'box' as its margin width is set to zero.

The fifth rule defines the hover style 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.

The last rule matches those p elements that are within an element whose id attribute has the value news; an example of a descendant selector.

A CSS stylesheet can contain comments; the syntax for comments is similar to that used in the C programming language

/* comment */

In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Here are some examples of selector syntax:

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 (e.g links inside lists) the selector is li a
class or id attributes
e.g. .class and/or #id for elements with class="class" or id="id"
Adjacent elements
e.g. for all p elements preceded by h2 elements, the selector would be h2 + p
Direct child element
e.g. for all span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span
By attribute
e.g. for all <input type="text"> the selector would be input[type="text"]

In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where the style would be applied on an element only if it is in language "c".

Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility.

In the following example, several selectors are grouped using comma separation[1]. The rule sets the font for all HTML headings.

h1, h2, h3, h4, h5, h6 {
    font-family: "Arial", sans-serif;
}

To use a CSS stylesheet, save the CSS code in a file such as example.css and then either link to it or import it from HTML or XHTML web pages using one of the two following formats:

<link rel="stylesheet" href="example.css" type="text/css" />
<style type="text/css">
   @import "example.css";
</style>

In the first example, note that the /> syntax only applies in XHTML; If you are writing HTML, close an empty element such as this with >.

To apply a CSS stylesheet to an XML document, add the following processing instruction, as per the XML example below:

<?xml-stylesheet type="text/css" href="example.css"?>

History of CSS[]

Style sheets have been around in one form or another since the beginnings of SGML in the 1970s. 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, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This gave the designer more control over site appearance, but HTML became more complex to write and maintain. Variations in web browser implementations made consistent site appearance difficult, and users had less control over their web browsing experience.

Seeing the need for an improved web presentation system, Håkon Wium Lie (known today as the CTO of Opera Software) proposed Cascading Style Sheets (CSS) in 1994. 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.

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.

Håkon's proposal was presented at the "Mosaic and the Web" conference in Chicago, Illinois 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 chaired by Steven Pemberton. This resulted in W3C adding work on CSS to the deliverables of the HTML editorial review board (ERB). Håkon and Bert were the primary technical staff on this aspect of the project, with additional members, including Thomas Reardon of Microsoft, participating as well. By the end of 1996, CSS was ready to become official, and the CSS level 1 Recommendation was published in December.

Development of HTML, CSS, and the DOM had all been taking place in one group, the HTML ERB. Early in 1997, this was split into three working groups: HTML WG, chaired by Dan Connolly of W3C, DOM WG, chaired by Lauren Wood of SoftQuad, and CSS WG, 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, with a first public Working Draft on 4 November 1997. It was published as a W3C Recommendation on 12 May 1998. CSS level 3, which was started in 1998, is still under development as of 2005.

Difficulty with adoption[]

Although the CSS1 specification was completed in 1996, and Microsoft's Internet Explorer 3 was released in that year featuring some support for CSS, it would be more than three years before any web browser achieved near-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 2006, no browser has achieved full implementation of CSS2. Properties specific to aural and paged media remain the least well supported.

Because early browsers such as Internet Explorer 3 and 4 and Netscape 4.x had support for CSS that was patchy and full of bugs, the presence of a decreasing but still significant number of users of these old browsers, even many years after they had become obsolete, was an important factor in preventing designers from adopting CSS in the early days.

When later more modern 'v5' browsers eventually began to offer a fairly full implementation of CSS, many of their implementations of CSS were still incorrect in certain areas, and were fraught with inconsistencies, bugs and other quirks. The proliferation of such CSS-related browser bugs, quirks and inconsistencies, and the variation in feature support in CSS implementations has made it difficult for designers to achieve a consistent appearance across platforms. Because of these problems, authors have commonly had to resort to using CSS hacks and workarounds, and CSS filters in order to obtain consistent results across web browsers and platforms.

A 'CSS filter' is a coding technique that aims to effectively hide or show parts of the CSS to different browsers, either by exploiting CSS-handling quirks or bugs in the browser or by taking advantage of lack of support for parts of the CSS specifications. Using CSS filters, some designers have gone as far as delivering entirely different CSS to certain browsers in order to ensure that designs are rendered as expected. Because very early web browsers were either completely incapable of handling CSS, or render CSS very poorly, designers today often routinely use CSS filters that completely prevent these ancient browsers from 'seeing' any of the CSS. For example, CSS filters are very often put in place to exclude Netscape 4.xx and Internet Explorer 4, ensuring that only more recent 'v5' browsers 'see' the CSS.

An example of a well-known CSS browser bug is the Internet Explorer box model bug, where box widths are interpreted incorrectly in several versions of the browser, resulting in blocks which are too narrow when viewed in Internet Explorer, but correct in standards-compliant browsers. The bug can be avoided in Internet Explorer 6 by using the correct doctype in (X)HTML documents. CSS hacks and filters are used to compensate for bugs such as this, just one of hundreds of CSS bugs that have been documented in various versions of Internet Explorer, Netscape, Mozilla, and Opera.

Even when the availability of CSS capable browsers made CSS a viable technology, the adoption of CSS was still held back by designers' struggles with browsers' incorrect CSS implementation and patchy CSS support. Even today, these problems continue to make the business of CSS design more complex and costly than it should be, and cross-browser testing remains a necessity. Other reasons for continuing non-adoption of CSS are: its complexity, inertia and authors' lack of familiarity with CSS and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing, and less frequently a requirement to deliver consistent appearance even to users of ancient non-CSS-capable browsers.

Currently there is strong competition between Mozilla's Gecko layout engine, Opera's Presto layout engine, and the KHTML engine used in both Apple's Safari and KDE's Konqueror browsers - each of them is leading in different aspects of CSS. As of 2006, Internet Explorer remains the worst at rendering CSS as judged by World Wide Web Consortium standards.

Problems with browsers' patchy adoption of CSS have led the W3C to revise the CSS2 standard into CSS2.1, which may be regarded as something nearer to a working snapshot of current CSS support in HTML browsers. CSS2 properties which no HTML 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 became a Candidate Recommendation on February 25, 2004; but was pulled back to Working Draft on June 13, 2005 to fix various issues (in some cases, to match more closely to browser implementation).

Media type[]

Media Type text/css is registered for use with CSS by RFC 2318 (March 1998).

As of 2006 some older web servers are still configured to serve CSS files with the media type application/x-pointplus. As early as July 1996 the Net-Scene company was selling PointPlus Maker to convert PowerPoint files into Compact Slide Show (CSS) files, and web servers were configured to send the x-pointplus media type to prompt browsers to launch the free PointPlus Viewer plugin. Since the plugin was listed in the directory for Netscape Navigator 3.0, the popular Netscape Enterprise Server was distributed with this mapping. When reading external style sheets some web browsers ignore or translate the PointPlus media type, but some (notably Firefox) comply with the media type and will not render the external CSS file as a style sheet.

Use of CSS[]

CSS is designed to allow the separation of presentation and structure. Prior to CSS, nearly all of the presentational attributes of an HTML document were contained within the HTML code; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, in the midst of the HTML code. CSS allows authors to move 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">''Usage of CSS''</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: italic large "Times New Roman", serif;
}

Thus, presentation is separated from structure. (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.) 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 the output device 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 presentational markup, which gives example CSS code, along with the deprecated tags.

Example of an XHTML document utilizing CSS[]

<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en">
    <head>
        <title>XHTML &amp; CSS</title>
        <style type="text/css">
        body {
            background: #fff;
            color: #000;
        }
        h1, h2 {
            font-style: italic;
            font-weight: bold;
            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.

Example of applying CSS to 'plain' XML[]

XML-CSS-example

This example XML file, styled by the CSS stylesheet below, seen in Mozilla Firefox.

An XML file containing the following - note the xml-stylesheet processing instruction:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css.css"?>
<schedule>
	<date>Tuesday 20 June</date>
	<programme>
		<starts>6:00</starts>
		<title>News</title> 
		With Michael Smith and Fiona Tolstoy.  
		Followed by Weather with Malcolm Stott.
	</programme>
	<programme>
		<starts>6:30</starts>
		<title>Regional news update</title>
		Local news for your area.
	</programme>
	<programme>
		<starts>7:00</starts>
		<title>Unlikely suspect</title>
		Whimsical romantic crime drama starring Janet 
		Hawthorne and Percy Trumpp.
	</programme>
</schedule>

And a separate file called css.css (in the same folder in this case):

@media screen {
	schedule {
		display: block;
		margin: 10px;
		width: 300px;
	}
	date {
		display: block;
		padding: 0.3em;
		font: bold x-large sans-serif;
		color: white;
		background-color: #C6C;
	}
	programme {
		display: block;
		font: normal medium sans-serif;
	}
	programme > * { /* All children of programme elements */
		font-weight: bold;
		font-size: large;
	}
	title {
		font-style: italic;
	}
}

Note the definition of the display property in some cases, in other cases this defaults to 'inline'. Setting this is seldom necessary when styling HTML or XHTML, where such properties are predefined.

CSS limitations[]

Most problems attributed to CSS are actually results of browser bugs or lack of support for CSS features. The most serious offender among current browsers is Microsoft Internet Explorer, whose version 6 lacks support for about 30 percent of CSS2 properties, and, more significantly, misinterprets a significant number of important properties, such as "width", "height", and "float".

However, current CSS specifications do have some genuine shortcomings.

Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets.
One block declaration cannot explicitly inherit from another
Inheritance of styles is performed by the browser based on the containment hierarchy of DOM elements and the specificity of the rule selectors, as suggested by the section 6.4.1 of the CSS2 specification [2]. Only the user of the blocks can refer to them by including class names into the class attribute of a DOM element.
Vertical control limitations
While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, require complicated and unintuitive code.
Absence of expressions
There is no ability to specify property values as simple expressions (such as height: 100% - 3em + 4px;). However, that can be achieved by, height: 100%; margin: -1.5em 0; padding: 2px 0;.
Lack of orthogonality
Multiple properties often end up doing the same job. For instance, position, display and float specify the placement model, and most of the time they can't be combined meaningfully. A display: table-cell element cannot be floated or given position: relative, and an element with float: left should not react to changes of display.
Unexpected margin collapsing
Margin collapsing is frequently not expected by authors, and no simple side-effect-free way is available to control it.
Float containment
CSS does not explicitly offer any property that would force an element to contain floats. Multiple properties offer this functionality as a side effect, but none of them are completely appropriate in all situations.
Lack of multiple backgrounds per element
Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect. This is addressed in the working draft of the CSS3 backgrounds module,[3] but widespread implementation is unlikely for several years yet.
Inability of children to override some properties set on a parent
This problem affects publishing sites where portions of the same page are often written by different vendors. For instance, if one individual sets overflow:hidden on one element, this can't be overridden within a child element. Although this makes sense in a single-author environment, this can negatively affect a multi-author environment where most of the content should be contained, but there's a menu that, by design, has to escape out of container. Being able to explicitly set an override in a case like this would be useful, since the only way to do this currently is by using Javascript to manipulate the DOM. Another example is not being able to override relatively positioned parents set by a different vendor on the same page, so that the absolutely positioned child elements are not appearing in the correct location.

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.

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.

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. While it was a Candidate Recommendation for several months, on 15 June 2005 it was reverted to a working draft for further review.

CSS level 3 is currently under development. The W3C maintains a CSS3 progress report.

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.

References[]

See also[]

  • W3C
  • List of stylesheet languages
  • Comparison of layout engines (CSS)
  • CSS Zen Garden

CSS books[]

Wikibooks
Cascading Style Sheets may have more about this subject.


External links[]

Tutorials[]

Demonstrations[]

Resources[]

Validation[]

References[]

CSS discussions[]

Browser issues[]

About the box model[]

This page uses Creative Commons Licensed content from Wikipedia (view authors).