Addressing a Common Problem
One of the questions that I have been asked a lot lately is: “How do I know when it’s appropriate to use embedded or inline styles?” The answer is one that I will give from my perspective and experience.
In an ideal world, I’d love to see everyone use external style sheets exclusively so that the complete separation between the content and style is truly enforced. However, practicality often comes crashing through that dreamy ideal.
There are a lot of web programmers out there who have many projects to handle, or maintain very large sites. Each of those has unique aspects, and not all fit the ‘ideal’ mold for fully extenal style sheet use. Keeping this in mind, I’m going to draw the line very clearly and simply. This is when I think you can use an embedded and inline style:
You can use an embedded style when you are adding a style element to a page that will not exist on any other page on the website. If it is used on other pages, it is more appropriate to use an external style. I don’t think it is ever truly acceptable to use inline styles. Any inline style should fit the criteria for when it is acceptable to use an embedded style. I think that inline styles are better placed in an embedded style.
Now, you can surely do anything using external style sheets. However, when handling a website that has many many pages, the concept of having to manage a style sheet that contains hundreds (if not thousands) of lines of various style rules can seem daunting. There is another alternative.
A common solution to dealing with a website project that contains periodic changes throughout is to create a secondary style sheet that is for the ‘special’ exceptions that take place in your pages. For instance, let’s say that all of your pages have the same layout – well, then you can put all of that style information into one css file (ex: base.css). However, let’s say that you have various small style rules. Perhaps it is red text for the word ‘New’ on the products page, or something similar.
Now, an acceptable thing to do is to make a secondary style sheet that holds all of the extra styles that you use infrequently on your website (ex: extra.css). On those pages, you would call both style sheets, but remember to list the link to the secondary style sheet after after the style sheet that holds all your primary formatting. Example:
<link rel="stylesheet" href="base.css" type="text/css" />
<link rel="stylesheet" href="extra.css" type="text/css" />
Following the rules of the cascade, the second style sheet will override any rules of the first one. That is one alternative to using an embedded sheet if you have a lot of random extra styles. However, overall, only use embedded styles when it only applies to a rare instance. If you have a lot of those single instances, you can choose to put them all together in an extra style sheet to make them easier to maintain.
~Nicole
