By using simple, high-level selectors you can simplify your style sheets. Type selectors and the “universal” selector (*) match every instance of the element type in the document tree. You can use the pattern matching built into CSS to make your style sheets work for you.
For example:
div {font:90% arial,helvetica,sans-serif;}The div type selector matches every div element in the document tree. Of course you could use the body selector to set global styles for your document, and all the divs and paragraphs would inherit its properties (with some exceptions for Netscape 4.x that doesn’t inherit inside tables well):
body {font:90% arial,helvetica,sans-serif;}Avoid using overspecific style sheets like this:
.footerfont10pt {font-size:10pt;font-family:verdana...;}Peppering your code with numerous classes is similar to using the <font> tag in the early days of the Web. Type selectors and contextual selectors let your styles gracefully flow down the document tree. Placing XHTML content within styled containers is much more efficient.
The higher in the document tree you can go, the smaller and more powerful your style sheets. Type selectors apply styles to similar swaths of content. Combined with contextual and other selectors, type selectors can create efficient yet adequately specific style sheets. We'll cover contextual selectors in an upcoming tweak.
Further Reading
- Cascading Style Sheets, level 2 CSS2 Specification
- The CSS specification, from the W3C. By Bert Bos et al.
- CSS Home Page
- From the W3C
- CSS Optimization
- Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.