W3C day (Evolve 2001)
7 May 2001
Cascading Style Sheets
WYSIWYG editing demo: Amaya
Max already talked about XSL, CSS's big brother, in a way. XSL is also easy to parse and extensible, but doesn't aim to be simple to write, is not very suitable for WYSIWYG editing and is not very compact (because it is in XML).
On the other hand, XSL includes transformation and a more advanced set of properties for printing (think of tables of content, tbale of figures, sorted indexes, parallel columns, etc.)
P { color: red }H1 EM { text-decoration: underline }P:before { content: "--- " }* { color: inherit }Priorities: browser default < reader < author < reader important
Both author and user can also specify alternative style sheets
The best browsers allow the user to switch style sheets on and off and allow different styles to be selected. Author may also provide alternative styles for the user to chose from.
User style sheets are supported by many browsers Konqueror, Opera, Internet Explorer, Mozilla/Netscape, Amaya...
Alternative style sheets are supported by Mozilla/Netscape and Amaya.
File "bw.css" shows everything in white on black:
* { background: black !important;
color: white !important }
Dean said that if he had had time, he would have shown how to render his slides in white on black. With this style sheet, you can do it yourself (in the browser, thus without actually altering any of Dean's own style sheet).
File "boxes.css" outlines all elements in a document:
* { border: 1px solid red;
padding: 1px;
margin: 1px }
No '!important', because I don't want to remove the margin, border and padding of elements that already have some of those, in order to not disrupt the layout created by the author too much.
File "no-images.css" replaces images by their ALT attributes
(see next slide)
img { width: 0 !important;
height: 0 !important }
img:before { content: "[" attr(alt) "]";
color: #FF0 !important;
background: #F00 !important;
margin: 0 0.33em !important }
File "no-tables.css" removes tables:
TABLE, TBODY, THEAD, TFOOT, TR,
TD, TH { display: block }
File "lynx.css"
Just for fun (because "view source" works better...):
file "user.css" shows every element enclosed in <tag> & </tag>
We'll see some of the properties later.
Contrary to what Ivan just said, CSS was not developed for HTML, but for a subset of SGML, that I called "SGML-lite" and that included HTML. XML turned out very similar to SGML-lite.
I could talk about a lot of things: when CSS was first invented (1994), standardized (1996), what it can and cannot do, why it is a good idea to separate the content and the style, what that means for accessibility, what accessibility features are in CSS, what media CSS supports, what products there are and which are coming soon, etc. But instead I hope to just wet your taste with a feature of CSS that is less often talked about: the reader's style sheet, with which the reader can set presentation defaults, and even override the author.