External, Embedded and Inline CSS
Sunday, July 27th, 2008
Understanding where to put your CSS (Cascading Stylesheets) rules requires an understanding of the three alternatives at your disposal.
- External Stylesheets – called by @import or link elements
- Embedded Styles – placed between style tags in the document
- Inline Styles – placed directly into the element itself
Best practice web standards development methodology is to use, in nearly every single instance, external stylesheets to deliver your CSS rules to a page. This allows a separation of content (XHTML or HTML) from presentation (CSS) across the whole project. The real power of this is that you can then maintain your presentation / design, and even redesign, without touching the potentially huge number of content pages of your website. Using a set of stylesheets which take advantage of the cascade, inheritance and specificity will give you a robust and powerful development methodology. Calling an external style sheet (number 1) is as simple as placing the following link element in the head of your document.
<link rel="stylesheet" type="text/css" href="styles.css" />
However, CSS can be placed into the document itself either embedded between style tags (number 2) or directly inline (number 3) on an element itself. This automatically breaks the separation of content from presentation and it is highly ill-advised to make either of these an ongoing strategy for delivering your CSS.
