Wednesday, November 4, 2009

Apply Styles Wisely




[ Team LiB ]









Apply Styles Wisely


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."








    [ Team LiB ]



    Posted by at

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)