CSS - Embed, Import, or Linked

Many developers struggle with cascading style sheets, and the various ways of using them in web pages. Overall, linked style sheets are your best choice for your web pages, because they allow your a user's browser to cache the entire sheet for all pages that use it, reducing download time to display and render all pages which use these linked style sheet files. Linked style sheets are external sheets often shared by many web pages, which means maintaining and managing your CSS style sheets, as well as overall look-and-feel, is much easier over time. Below is an example of an XHTML compliant "link" style sheet tag for connecting a style sheet to your web page:

<link rel="stylesheet" media="screen" href="styles/mysheet.css" type="text/css" title="my linked style sheet" />

If you want to use embedded, imported and linked style solution however, you should be aware of the various issues involved in their support and use, as well as cascade rules. We have provided some information to help you. In general, you should use them in the following "integration-type" order in your web page (below). This order addresses many issues with cascades of styles, older browser issues, and browser support for the various types of CSS styles attached to a page. This order maximizes your chance that a specific style will be supported and render correctly in a variety of browsers, old and new:

1. Embedded Style Sheets - Believe it or not, embedded CSS is the least valuable of all the style sheet solutions. Adding styles in a block in the head of your web page makes managing web page styles a page-by-page task, and is very tedious. It also slows down web page rendering as users must re-render and deliver the whole style sheet set on every page request from the server to the browser. Believe it or not, the <style> tag used in embedded solutions is not 100% supported on all web browsers or devices, and does require use of a CDATA wrapper in order to support XML validation of the tag and its style content. Therefore, on devices like some handhelds, html emails, and older desktop browsers, such style solutions may fail, or not validate. However, in general, most modern agents support them. And, embedded styles do have their place. They are still widely supported by newer browsers on desktop computers, so are a powerful way for creating "offline page layout" (when the user is not connected to the Web but viewing a web page offline). Also, certain local page features (page-by-page specific formats) benefit from embedded design. And pages that must cascade over linked styles can be done very effectively using embedded style sheet solutions. You can actually place embedded styles before or after a linked style tag, and in most modern browsers, it will cascade over all linked style sheet rule. So, even though it appears prior to linked and imported styles here, the style, by default, are applied last and take precedence over linked and imported styles, regardless of the order. Because embedded styles in general, must be managing on each and every page, even if generated dynamically, because of the download hit you take and management headache then create, we do not recommend them as a viable web page solution, except in cases where a page-level design is necessary, and linked sheets would be overkill.
2. Imported Style Sheets - Imported styles, though used less than embedded in many sites, is increasingly an important and powerful way to link style sheets to a web page. You can even place imported style links inside linked style sheet pages, and connect one linked sheet to dozens, and therefore use a single CSS page to manage your complete CSS design for a whole site, rather than dozens of linked pages inside the head of the page. Import connects your web page or style sheet to other sheets quickly and is widely supported in newer agents. In addition, imported style sheets are not viewable by older browsers, like Netscape 4 series, and even some alternate newer browser (cell phones). This allows you another advanced technique in say, developing a linked sheet for the older and newer agents in say pixel-based fonts (which agents like Netscape do better at) and connect imported sheets with relative font units (like "em" and "%", which allow flexible font resizing), which will not be seen by Netscape 4 browsers and some mobile agents. Overall, we recommmend you use this tag inside the linked style sheets, rather than the web page itself, for ease of maintenance, hiding sheets from Netscape 4, and better order and application of "imported" styles in the page.
3. Linked Style Sheets - We recommend you begin to use linked style sheets (in combination with imported sheets) when designing all your web page CSS designs and style sheet solutions. Linked style sheets are widely supported in even very old browsers and a wide array of devices. Only html email and a few mobile agents are shown to have issues, and in those cases we recommend limited use of "inline" styles inside tags to address those agents. Overall, linked style sheets improve browser style sheet caching, website design maintenance, speed of development, ease of use, and style rule organization. All modern browsers and devices support linked style sheets in the head of the web page, including Netscape 4, most mobile agents, and newer agents arriving on the scene. (We did note that one older version of Windows Mobile devices did not support linked styles, but has been updated in the past few years). Because linked style sheets are universally supported, they should be appllied last. As mentioned above, this order does affect cascade of style sheet rules in terms of the linked and imported style sheet order, but is not affected by embedded sheets, which will cascade over all linked sheets, regardless of order. So, keep that in mind. Finally, be sure you add all your imported style links into the main linked style sheet for each of the main media "types" (screen, handheld, alternate, print, etc.). This gurantees that your web page content performs well, and is supported visually, across many different browsers and user agents.

Looking for great standards-based Website Products for your website? Get GiantIsland Web Products!