Cascading Style Sheets: The Definitive Guide, Second Edition

Chapter 13. User Interface Styles

The vast majority of CSS is concerned with styling documents, but it turns out that CSS offers a passel of useful interface-styling tools—for more than just documents. For example, Mozilla developers created its browser’s interface (and that of many Mozilla clones) using a language called XUL. XUL employs CSS and CSS-like declarations to present the navigation buttons, sidebar tabs, dialog boxes, status boxes, and other pieces of the chrome itself.

Similarly, you can reuse aspects of the user’s default environment to style a document’s fonts and colors; it’s even possible to exert influence over focus highlighting and the mouse cursor. CSS2’s interface capabilities can make the user’s experience more enjoyable—or more confusing, if you aren’t careful.

System Fonts and Colors

There may be times when you want your document to mimic the user’s computing environment as closely as possible. An obvious example is if you’re creating web-based applications, where the goal is to make the web component seem like a part of the user’s operating system. While CSS2 doesn’t make it possible to reuse every last aspect of the operating system’s appearance in your documents, you can choose from a wide variety of colors and a short list of fonts.

System Fonts

Let’s say you’ve created an element that functions as a button (via JavaScript, for example), and you want it to look just like a button in the user’s computing environment. By doing so, you make the control more ...