One of the problems with HTML is that it mixes markup for structure (such as for a section header) with markup for visual presentation (such as for bold font). Originally, HTML was intended to provide just a structural markup, with the user-agent exercising control over presentation. However, web page authors quickly wanted to have more control over presentation and HTML was adapted to suit this desire.
A better approach is to separate these specifications of structure and style, so that the style of the presentation can be altered independent of the document itself. With style abstracted from the document, it is possible to develop style sheets that specify the presentation of elements and that can be reused for multiple documents or changed to provide different presentation.
With style abstracted from the document, it is possible to combine multiple style specifications. Then, multiple style sheets can cascade into a stylistic specification with an ordering governing the general priority of different style specifications. From lowest to highest, the general priority is:
Browser defaults
External style sheet
Internal style sheet
Inline style specification
The W3C is standardizing Cascading Style Sheets (CSS).
CSS Level 1 was recommended in December 1996 and revised January 1999.
The CSS Level 2 Recommendation was issued in May 1998. CSS Level 2, Revision 1 is a Candidate Recommendation (February 2004). These notes reference Revision 1, even though it is only a candidate recommendation.
CSS Level 3 is under development.
Additional CSS standards are being developed for mobile devices such as phones and PDAs, printers, and television sets.
Recent browsers from both MS IE and Mozilla Firefox support CSS. Many HTML authoring tools also support for CSS. The W3C CSS homepage has an extensive list of software supporting CSS.
The basic syntax for a style rule is:
selector { property-name : value }
where selector identifies the element or tag for the style setting, property-name is the name of the style property, and value is the value to be used for the property. For example:
body { color: black }
would set the presentation color in the body element to black.
The curly brackets can contain multiple property-value pairs for a selector, each separated by a semi-colon:
body { color: black; font-family: arial, sans-serif; font-size: 14pt }
The syntax for the selector allows for not only single elements, but also:
Selector grouping, for listing multiple selectors, e.g.,
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2, h3 { font-family: sans-serif }
Wildcard (or universal selector), for specifying all selectors, e.g.,
* { color: black; font-family: sans-serif }
Descendent selectors, for selecting elements within other elements, e.g.,
h1 { color: red }
em { color: red }
h1 em { color: blue }
Child (direct descendent) selectors, for selecting elements directly within other elements, e.g.,
body > p { text-indent: 0 }
Adjacent element selectors, for selecing an element directly following a sibling element, e.g.,
h1 + h2 { margin-top: -5mm }
Attribute selectors, for selecting elements a) if a specified attribute is set, b) if a specified attribute is set to a specified value, c) if a specified attribute value is a list of space-separated words which contains a specified word, or d) if a specified attribute value is a list of hyphen-separated words which begins with a specified word, e.g.,
h1[title] { color: blue }
span[class=example] { color: blue }
span[class="example"][lang="en"] { color: blue }
span[names~="cse.unl.edu"] { color: blue }
*[lang|="en"] { color: blue }
Class selectors, shorthand for class attribute-value selection, e.g.,
*[class~="example"] { color: red }
*.example { color: red }
.example { color: red }
ID selectors, shorthand for id attribute-value selection, e.g.,
h1#chapter1 { color: blue }
Pseudo-elements, e.g.,
p:first-line { text-transform: upper-case }
p:first-letter { color: green; font-size: 200% }
p:first-letter { color: green; font-size: 200% }
h1:before {content: counter(chapno, upper-roman) ". "}
Pseudo-classes, e.g.,
div > p:first-child { text-indent: 0 }
a:link { color: blue }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }
:lang(fr) { color: red }
Style properties are inherited from parent elements, but the rules that are more specific have priority and will over-ride inherited rules.
Comments are between "/*" and "*/", e.g., /* this is a comment */.
There are over 100 CSS properties, including:
Background properties:
background, background-color, background-image, etc.
Text properties:
color, text-align, text-indent, etc.
Font properties:
font, font-family, font-size, font-style, etc.
Border properties:
border, border-top, border-left, etc.
Margin properties:
margin, margin-top, margin-bottom, etc.
Positioning properties:
position, width, height, etc.
Counter and list properties:
counter-reset, counter-increment, list-style-type, listy-style-image, list-style-position, etc.
Table properties:
table-layout, border-spacing, empty-cells, etc.
and many other properties.
The allowable values are property dependent. If a value is not allowed for the property, the rule will be ignored. Likewise, if there are other syntax errors the property will be ignored.
Style sheets can be given externally, internally, or inline.
An external sytle sheet can be applied to multiple documents. The document links to the external style sheet in the document head. For example:
<head>
<link rel="stylesheet" type="text/css" href="csepages.css" />
</head>
The rel attribute identifies the link relationship as a stylesheet, the type attribute identifies the type of stylesheet as CSS, and the href attribute gives the URL.
An internal style sheet can be contained within the head element in a style element. CSS elements can be hidden from non-conforming user-agents within HTML comments. For example:
<head>
<style type="text/css">
<!--
h1 {color: red}
p {margin-left: 20px}
body {background-color: white}
-->
</style>
</head>
The HTML style element allows specification of the media type. For example,
<style type="text/css"
media="projection">...</style>
<style type="text/css"
media="print">...</style>
An inline style sheet can be attached to an element in the document with the style attribute. In this case, the selector is not required. For example:
<p style="color: red">
This text is red.
</p>
The W3C has a CSS validation service.
The W3C provides a suite of example core style sheets and a previewer of the style sheets.
The W3C CSS homepage also lists a variety of CSS authoring tools and CSS-capable browsers.