Up to now we have used the link element to associate external CSS files iwth XHTML pages. However, this can also be done with the "@import Rule". The "@import" rule is a CSS rule, not an XHTML element, like link. In order to use it in our XHTML pages, we need to wrap it in a "style" element; this makes it an embedded style. We might add this code into the head of our document:

<style type="text/css">

@import url(css/mystylesheet.css);

</style>

which is equivalent of

<link href="css/mystylesheet.css" rel="stylesheet" />

Both of these methods associate the style sheet with the page.

Typically, we can use one style sheet for the layout, one for text and others for large components such as the forms and menus that might appear in some pages but not others.

You can add a set of style sheets to an "import" style sheet, and then associate just this import styleet with all the pages that need those style sheets. This import style sheet, which lives in the CSS folder along with all the other style sheets, effectively acts as a pointer to a set of style sheets. By organizing different combinations of the site's style sheets in multiple import sheets, I can then, with a simple style tag in each page, associate a particular set of style sheets with any page that needs them.

Organizing your styles across multiple style sheets can really help you manage the numerous styles for your sites. However, don't split up your CSS for any given page into a very large number of style sheets. If you load more than say, five style sheets per page, even if they are not very big in kilobytes individually, you may start to see a slower page load performance. Often, more time is required to send the request and establish the connection for each file transfer than the time spent actually moving the data itself from server to browser.

Discussion around the site performance and links to tools like (Yslow and Firebug) can be found at:

htt://davidherron.com/book-page/190-measuring-website-speed.