External, Embedded and Inline CSS
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.
Embedded stylesheets follow a standard construct in the head of the document:
<style type="text/css">
h1 { font-size: 1.6em; }
</style>
Whereas inline CSS styles are placed directly into the element on the page:
<h1 style="font-size: 1.2em">
So what’s the real disadvantage of using embedded and inline CSS instead of external CSS files? The answer is probably self evident. How these cascade provides a little insight into their power, and power used blindly is often dangerous. When looking at which rules to apply (at least from a practical perspective) - the browser first considers the external CSS file, but if there is an embedded style that matches then that will be used instead to over-ride the external rule. And if there are inline styles in the elements themselves then they will be used in precedence to over-ride the embedded and external CSS. In simple terms, the closer you get to the specific element on a page then CSS will over-ride the previously less relevant rule.
For example. Given a rule in the external stylesheet:
h1 { font-size: 1.6em; }
And given an embedded rule:
h1 { font-size: .5em; }
and an inline style:
<h1 style="font-size: 1.2em;">
The result would be that the specific H1 element using the inline style will be displayed at 1.2em size. But other H1 elements on the page will be displayed at .5em. And, finally, H1 elements on the rest of the site will be displayed at 1.6em.
This is because its far more specific to state a rule on a precise inline element. The real down side is the need to extract all of this extraenous CSS if you ever want to do a redesign or change style rules throughout your website. On a very large site this might take someone considerable time and effort to visit every document for a manual Quality Assurance.
So, basically, now you should understand how CSS files work and where you need to keep your CSS rules - externally. This maintains separation of content from presentation.
There is a caveat, in my limited opinion. If, by chance, you have a single page where an anomoly occurs - for example a specialised chart which doesn’t exist anywhere else and is unlikely to ever be repeated on your site. Then its a fair comment that you might want to embed those styles onto that specific page in the head section. However, that’s a judgement call you’re now able to make yourself. If you choose to embed then document the embedding both within written report form and in your actual external CSS files. But consider seriously that you could also just as easily have that one page calling an extra one-off stylesheet to address that anomoly. It’s not a huge bandwidth cost, after all.
If you do break these simple guidelines and use embedded or inline CSS - do it with the knowledge of why it’s not recommended. Using styles within the document defeats a lot of the powerful benefit CSS can bring to your project. Keep your CSS external and harness the advantages that a best practice methodology offers.
