Cascading Style Sheets | WebReference

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets



Imagine a Web where there are no proprietary extensions. Where browsers compete in speed and utility, not by the number of new HTML extensions they have. Where designers have complete control over the layout and style of every element in their Web pages and one change can affect thousands of pages instantly. That's the promise of style sheets.

While this Web utopia won't happen tomorrow, it's fast approaching. The World Wide Web Consortium (W3C) has agreed on a the first version of style sheets, CSS1. CSS1, a simplified version of the full spec, extends HTML to provide support for separate style rules which suggest formatting for HTML elements. Explorer 3 supports a subset of the CSS1 spec, and Netscape 4 and Explorer 4 now support the spec.

Explorer 3.0 and Netscape 4 also support (in an ActiveX control called HTML Layout Control, and natively in Netscape 4) the next version of style sheets, CSS2. Based on the draft W3C note "Frame-based layout via Style Sheets" CSS2 adds layout capabilities to style sheets, neatly incorporating frames into style sheets that content can "flow" into. The latest specs can be found at


Style vs. Structure

Style sheets work by separating style (CSS1) and layout (CSS2) from the structure of content. Style rules can be embedded inside a page, but are ideally stored in a separate referenced HTML document - a style sheet. It is this separation that gives style sheets their power. You can change the overall look of an entire page or even entire Web sites by changing one style rule or sheet.

Style sheets are engineered with the future in mind. As the Web spreads across the planet's appliances, devices other than browsers (referred to in the spec. as user agents [UA]) will enable viewing, hearing, and even feeling the Web. Style sheets' independence of style from structure makes it easier to adapt the Web to different technologies and ways of experiencing those technologies. The blind, for instance, could have a special sound-oriented style sheet that specifies speech parameters, intonation, reader style, and preferred speech plug-in. Set-top Net boxes like WebTV could invoke special TV-optimized style sheets that enlarge letters, shrink wide tables, and simplify layouts.


Desktop Publishing Meets the Web

Style sheets work on the Web like desktop publishing programs do now. Documents can be instructed to take most of their formatting instructions — fonts, spacing, margins — from a separate document. The idea is that by separating style from structure, either can be changed without affecting the other.

Style sheets use common desktop publishing terminology. You can precisely set margins, leading, typefaces and sizes, backgrounds for any element, spacing around elements, x,y, and even z positioning (CSS2). No more crude workarounds for HTML's limitations, style sheets allow designers much more control over the look and layout of their pages.


Follow the Rules

Style sheets influence or suggest how HTML documents should be rendered through style rules. The rules specify how to render HTML elements like <P>, <HX>, and <TABLE>. Each of these rules can be grouped together to form a style sheet — a group of one or more style rules. Each HTML page can be influenced by one or more style sheets.

Styles rules can be embedded inside a page or referenced in a separate file. You can attach multiple style sheets to influence a single HTML document which "cascade" according to additional rules. Since multiple style sheets can influence the presentation simultaneously conflicts can arise. Conflict resolution is an integral part of the CSS spec, and is based on each style rule having a weight. Cascading refers to the order in which these conflicting styles are resolved.

By default, the weights of the reader's rules are less than the weights of the author's. Both reader and author rules override the UA's default values. In general the most specific style wins, and the last instance of duplicate rules takes precedence. There are two advantages to multiple simultaneous style sheets:


A style sheet designer can combine several (partial) style sheets to reduce redundancy: Also, corporate webmasters can design a corporate-approved style sheet with the company's colors, while division webmasters can use their own division-approved style sheets.

@import url(;
@import url(;
H1 { color: red }     /* override imported sheets */

Author/Reader Balance

Both readers and authors can influence the presentation through style sheets. While author style rules default to greater weight than reader rules, readers can override author styles with popup menus.

Style sheets' separation of form from function gives them a number of advantages:

So instead of "hard coding" style with tags like FONT and SPACER, designers can easily change the look of entire Web sites with one change to a style sheet.


Style Sheet Tutorial

Advanced CSS Layouts
Learn how to create complex table-like layouts with CSS. We replicate's front page using only CSS and lots of iterations. By Rogelio Vizcaino Lizaola and Andy King.
The Evolution of Style Sheets
A brief look back and forward at how style sheets have evolved, and where they're going. By Alan Taylor.
Part 1: Style Syntax
Learn the rules behind cascading style sheets with working examples, sample code, and key terms defined. Learn about inheritance and why they call them "cascading." By Andrew King.

For more information:

W3C Technical Reports
A list of all the current and future specifications of the W3C, including style sheets v. CSS1 and CSS2. URL:
Microsoft's Developer's Workshop
Explorer 3.0 is the first commercial browser to support style sheets, and Microsoft has some great tips, including a style sheet gallery that shows what you can do with style sheets.
CSS1 not supported in Internet Explorer 3.0
Examples of CSS1 omissions and bugs in Interenet Explorer 3.0.
Web Style Sheets
A good jumping off point for information about CSS1 and 2, including the full spec and resource links.
Dynamic HTML Lab
Our own expert columnist on Dynamic HTML, which uses Style Sheets extensively for positioning, overlaying and animating layers, and control over the page's appearance. By Peter Belesis.


A comprehensive Cascading Style Sheets editor.

Comments are welcome

Revised: Oct. 31, 2001