CascadingStyleSheets

MeatballWiki | RecentChanges | Random Page | Indices | Categories

: http://www.w3.org/Style/CSS
: See also CssDiscussWiki

Cascading style sheets are replacing such things as and (bold and italic) tags. They separate data from representation.

An HTML document can consist of a style sheet and content to render. The style sheet will suggest what fonts to use, what colour to make the text, etc.

As a result, HTML 4.0 Strict is essentially just SemanticTag?s and a handful of LayoutTag?s. RenderingTag?s have been removed and shunted to CSS. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {
    font-weight:bold;
    text-decoration:underline;
    color:red;
}
-->
</STYLE>
</HEAD>
<BODY>
This is bold, underlined, red text.
</BODY>
</HTML>

[The  tags inside the <STYLE></STYLE> tags is an HTML/XML/SGML (whatever) comment. This is so older browsers that don't recognize the <STYLE> tag don't die parsing the style sheet syntax.]

The "Cascading" part should really be called "hierarchical." Style sheets can actually be embedded in the HTML document itself, inline with the tags. These "lower" sheets override styles "above" them in the hierarchy. Thus, you can have sheets within sheets within sheets. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {
    font-weight:bold;
    text-decoration:underline;
    color:red;
}
-->
</STYLE>
</HEAD>
<BODY>
This is bold, underlined, red (<SPAN STYLE="color:blue">blue</SPAN>)text.
</BODY>
</HTML>

To embed the style sheet as a separate file, a hack (for what else could it be called?) has been introduced with the LINK tag:

style.css

BODY {
    font-weight:bold;
    text-decoration:underline;
    color:red;
}

example.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<LINK HREF="style.css" TYPE="text/css" REL=STYLESHEET>
</HEAD>
<BODY>
This is bold, underlined, red (<SPAN STYLE="color:blue">blue</SPAN>)text.
</BODY>
</HTML>

CascadingStyleSheets are really useful to allow painless customization of look and feel across a whole website. Set all documents to one style sheet, change one line in the style sheet, and suddenly all text on your site is purple and not red.

Most modern browsers do support CSS1 (ratified 1996), some support CSS2 (1998) which includes PositionalCascadingStyleSheets? (which many CSS 1 implementors support anyway). CSS3 is coming out soon and there is mention of BehavioralExtensionsToCascadingStyleSheets. See this excellent [comparison] of browser support for CSS.

New on the map is ExtensibleStyleLanguage? (XSL) that will probably make CSS obsolete sometime.

HTML already lets you use and instead of and , if that's what you want to do.

This is worth thinking about. People use anyway, and not necessarily because they are ignorant or stupid. -- DaveHarris

No, they aren't stupid. They are in fact the easiest ways of inserting bold somewhere. Image bold text! or bold text! Ah! and tags are nice because they are SemanticTag""s and they have the chance to render differently for:

Different languages/locales.
Visually impared people.
People running skinnable browsers. ;)

However, is far easier to write than anything. Actually '''bold text''' is even easier and much more readable. However, single quotes don't really scale to a large set of style information. Trade offs, trade offs. -- SunirShah

I disagree about triple-single-quote being readable, but never mind. I think some people use because it does exactly what they want. They want to have fairly low-level control over how their stuff looks. serves other people (and perhaps all that some really want is a shorter synonym) but not everyone wants the abstraction.

It is a bit like functional languages trying to hide the mutable state. Sometimes mutable state matters, and then the language merely forces us to work with a state model which is implicit rather than explicit. -- DaveHarris

Everything you said is undeniable, so I'll let that go. I am curious about, "I disagree about triple-single-quote being readable," though. Please elucidate. -- SunirShah

It's hard to distinguish from double-single-quote, single-double-quote-and-a-single-quote, etc. I often "quote" in italics, for example. -- DaveHarris

I've found the joy and wonder of UserStyleSheets, and they've been making me smile. There are a number of tags out there that should be shot, <blink> and being two of them. But with UserStyleSheets, you can nuke 'em. Six easy lines will put the FONT tag out of business. You can also use them for debugging tables, just by specifying borders for TD and TABLE in the UserStyleSheet of a debug client.

It isn't obvious where UserStyleSheets are set in InternetExplorer, and in MozillaBrowser they switched the hardcoded position somewhere between Milestones 16 and 18 and only documented it in Bugzilla, but there's enough working to have some fun.

OddMuse allows users to specify CSS files (one or more!) as a parameter. This parameter will be stored in the users's cookie, so from then on, the user will be using the style sheet he supplied. For an example, see the Oddmuse manual:

http://www.emacswiki.org/cgi-bin/oddmuse/User_Style_Sheet

Providing your own style sheet makes hacking the user style sheet unnecessary.

CategoryWebTechnology

CascadingStyleSheets

Discussion