Apply Styles Wisely | Speed Up Your Site[c] Web Site Optimization

Before you can optimize CSS, you need to understand the four ways to apply styles to (X)HTML documents :

External style sheets referenced by a link element
External style sheets referenced by an @import rule
Rules embedded in a style element
Inline declarations in style attributes

These methods are listed from the most abstract to the most specific. Let's use a minimal XHTML document to demonstrate them all (see Listing 7.1).

Listing 7.1 Four Ways to Apply Styles

 <!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Piet Mondrian's Home Page</title> <link rel="stylesheet" type="text/css" href="/css/global.css" title="default" />       <style type="text/css" media="screen">       @import ("/css/local.css");       h1 {color:green;}       </style> </head> <body>       <h1>Piet Mondrian: Abstract Impressionist</h1> <p style="color:red">Mondrian was one of the great abstract masters....</p> </body> </html>

In honor of Mondrian and efficiency, I recommend being as abstract as possible when applying styles. Try to use external style sheets wherever possible, and avoid embedding style elements and attributes within your (X)HTML. External style sheets are reliably cached, and reduce overall bandwidth usage. For maximum speed on high-traffic pages, however, you can embed rules in a style element or SSI them into the page to avoid an extra HTTP request. For more details on using style sheets and XHTML, see Chapter 5, "Extreme XHTML."