Style sheets aim to make the web faster and more manageable by separating content from presentation. They also provide web authors with greater control over rendering without resorting to the sometimes shady techniques used to produce compelling visual design from HTML documents.

Unfortunately, implementation of the CSS spec among the mainstream browsers vendors has been up to now incomplete and incompatible, slowing the use of style sheets by designers. The adoption of Level 2 provides implementors with a complete, stable document developed with the contribution of a broad range of industry leaders, including Netscape and Microsoft. Coupled with the push of XML, this promises to make style sheets an essential piece of web technology in the years to come.

An interview with W3C's Chris Lilley.

Chris is Chair of the CSS&FP Working Group. He was also a member of the IETF HTML Working Group and is one of the authors of the PNG Specification.

CL: That's correct. That was before I joined W3C.

CL: People have been asking me this for a while. They ask, "When is PNG going to take off". And I reply, "Well, about three months after Netscape Navigator supports it. Now Netscape supports it so we should see it take off soon.

CL: Well, it means that we finished work on it. We've been working on the specification for about 18 months. We started with the CSS2 spec and released various working drafts about different areas and consolidated all those into a single CSS2 specification. The working draft was further reviewed and eventually went to the membership as a proposed recommendation. This means the working group is done. And the membership voted yes. They liked it, they thought it was good, they had some comments which we incorporated, and now we have a recommendation.

CL: It’s a stable document. It can be implemented with confidence we judge it will improve the quality and interoperability of the web.

CL: There's a bunch of features actually, some of which were already implemented on an experimental basis in existing browsers. Such as positioning. Some call it layering. You can take blocks of text out of the content and position them the way you want in the document. You can put images on top of everything, of course. That's for positioning. It tends to be used quite widely with scripting so you can switch things on and off . There is Z-ordering so you can move things backwards and forwards and make them visible.

CL: Yes, that's right. If you have a transparent or semi-transparent format like PNG, you can get very nice effects by overlaying things.

Another thing is downloadable fonts. People have been asking for is for a while. CSS1 did have a font model. You could specify a font, but it had to be called by that name on the client system and that was hard to arrange -even though you could specify the font names in a list. So what we have done is added more information to the style sheet so the client can figure out what type of font is being asked for. So the client can do an intelligent match or the font can indeed be downloaded over the web.

CL: Well, you can't use names. CSS1 uses names. If you specify "Times" and someone has "Tymes" spelled with a 'y', or Timpani, it won't be found. But we use something called a Panose-1 number, a series of measurements that can be made on the font and which define the type of serif, how much the serifs stick out, the width and height… We can classify fonts based on these measurements. Windows 95 already uses that. In the "Font Viewer" it is possible to sort the fonts by how similar they a selected font. So you can already see this at work.

CL: Fonts must available in the right format. Unfortunately, there are multiple font formats available at the moment. That's okay, we knew that would happen. You can indicate in the style sheet which font format you want to use, and you can use multiple formats if you wish. To serve these fonts you need to subset them somewhat so you only use the characters that you need. They are also compressed, and put on the server. The style sheet uses special rules, called @font-face rules. They describe the various features of the fonts. If there is a match and it includes an URL, the client downloads the font.

CL: Some foundries will let you do this and others won't. You need to look at your licencing agreement. Word and Acrobat documents can already contain embedded fonts. Some tools look at an embedding bit [in the font definition] and prevent you from embedding a font that is not marked.

CL: Its not installed, its available only for that document.

CL: That's right. You can specify that a given element is a table cell or a table row. You can specify various table algorithms to be used. Some algorithms let you specify the width, and so on. In CSS1 we depended very much on the browser dependent style sheet. When a document is downloaded without a style sheet it still gets rendered if it is HTML. We encapsulate all the rendering that happens out of the browser default style sheet. It doesn't need to be a style sheet internally, of course, but that is how we conceptualize it. We take this out in CSS2 and make it more explicit so you can control how tables are rendered. You can also take any element in an XML document and say, "This is a table cell", "This is a table row". So it doesn't have to be formatted as a table widget to be rendered as a table. There is built-in intelligence. Table cells or rows know they need to be turned into tables. You can select any random element and make it a cell, and the client will build a one-cell table around it.

CL: Selectors were beefed up quite a bit. You can do more much more complicated selects. It was possible in CSS1 to select an element on its name, class or id, or select an element inside another element, or an ancestor of an element. CSS2 allows you can define an element to be an immediate child or sibling of another element, and you can associate the element to specific attributes and indicate that an attribute has a given, fixed value.

TNC: Level 2 also introduces the concept of media types. An element can be associated with multiple style sheets. Each sheet indicates how the element must be rendered on a different output device -screen, printer, for example.

CL: Yes. A style sheet section can be wrapped up in an @media rule. You can set up a general style sheet with fonts, colors… and you can also set up a style sheet applied only to print, with different margins and a smaller font size, for example. And a screen style sheet could include color changes that don’t apply to print. Most noticeably, media types were added that support aural rendering of the document so that it possible to not only view the document, but also hear it. This has advantages because it is not always possible to see things. While you're driving, for example, you don't want to be looking at a web page. This can also be applied to viewing the web off a TV. There are pictures, headlines, …You don’t read text off a TV, its spoken to you. This let's you specify that certain elements are spoken. You can change their 3D position because we have full 3D positioning. If the document were a play, you could keep track of who is speaking more easily by changing the voices and their positions..

CL: Existing HTML pages are full of formatting tags that make it difficult to navigate for people who use a voice browser, for example. The audio capabilities obviously help a great deal. One of the co-authors of the audio CSS spec is blind and relies on the specification daily to use the web. This proves that it works. The very act of separating presentation from content immediately increases accessibility. For example, web pages often have side bars or navigation bars. This is usually done using a table. This doesn’t work very well because the first line of the navigation bar runs into the first line of the content, and second line of the navigation bar runs into the second line of the content… You could instead make that navigation bar a list somewhere and move it to the left using positioning, and end up with a nicer but also more manageable presentation. And you can also, using a script, move the navigation bar elsewhere if the window narrows and there is no more room for it. So the accessibility options and design capabilities are pretty much mixed together. You no longer need to compromise design in order to offer accessibility. With CSS2, you get the both of both worlds. You can improve visual design and accessibility at the same time.

CL: Positioning and downloadable fonts have already been implemented. Aural cascading style sheets are being implemented in a couple of test browsers. A small manufacturer can easily bring out a piece of consumer electronics that is just a voice browser. By getting rid of the screen in many portable devices, you can end up with a small device that is capable of surfing the web.

CL: They are both on the press release we issued and were both excited about the spec being finished. They both pushed very hard to get the best features included and to achieve interoperability. It was very good to see them working together with the other Working Group members on this. They've committed to implement more of CSS2 in the generation 5 browsers. So I'm confident. We have quite a bit of CSS implemented already. The next generation of browsers will incorporate much more. Netscape recently demonstrated a version of Navigator using style sheets to render XML documents. This is very promising.

CL: Both CSS and XML are style sheet languages. CSS is fairly widely deployed and is purely declarative. It's not a programming language. By design, certain things cannot be done. For example, you cannot make every third line green except on a Wednesday. To do that, you need to involve scripts. XSL gives you access to scripting. It also provides the ability to completely redo a document. The document tree can be rearranged as part of the rendering process.

CL: The idea is that XSL will take the best ideas of both CSS2 and DSSL, an ISO specification for style sheets particularly strong on print media. CSS2 and XSL will use the same underlying model. The two Working Groups are working together to ensure that the underlying model is actually similar. "Color" or "margin" means the same thing in both models.

CL: We are meeting in two weeks with the XSL WG, in Paris, to work on the joint model. We will be helping with XSL as it goes forward. We also plan to work on CSS3. There's a bunch of good ideas that didn't make it into CSS2, but they came too late. We plan to publish a note explaining presenting these ideas -increased internationalization, even more accessibility, additional media types…

CL: Absolutely, because the people writing these browsers are in the Working Group. That's one of the benefits of Working Groups. Anyone can write a spec. But in this case, the spec has been written by key players in the industry, and they have made commitments to implement it.

CL: XML will be big. HTML has been successful. The good thi>ng about HTML is that is has a fixed tag set. The bad thing about HTML is that is has a fixed tag set. I expect people to start using XML and build XML applications. You can't really render an XML document without a style sheet, so this will push the separation of structure and content.

TNC: Chris, thank you for joining us today.

• Chris Lilley's page at W3C
• W3C issues CSS2 as a recommendation, announcement
• CSS2 specification