File Specific CSS. Inside HTML doc or as a seperate file?

Question

What is the preferred method for organizing CSS that is only used by a single HTML page. Should I put the CSS in:

• a section in the HTML doc?
• a CSS file associated with the HTML doc? eg: contacts.html, contacts.css
• a master CSS file and organize it into sections indicated with header comments.

Answer 1

I'm assuming that there are other pages which use the master CSS file you mention. In that case I think the third option is best. I'm also assuming that this single HTML file also uses CSS from that master file.

The trouble with the first option is that it's not the way things are usually done, and so in the future when either you or someone else wants to change things it may take you/them a while to find out where the CSS is.

The advantage of the third option is if you want to change the way this contacts.html file looks you only have to go and look in one place - the master file. The CSS that applies to that page and others is there, and the CSS that applies only to that page is there. It also helps with performance because if visitors to your site have already visited the other pages then they have that file cached and they don't need to load it again.

Answer 2

If the CSS directives affect only one HTML document, it only makes sense to keep the directives in the document.

From a maintenance perspective, if the document's structure or content changes the CSS directives may need to change as well and, from a performance perspective, it does not make sense to force users to download directives for a single document when they visit other pages on the site.

Answer 3

Before answering this question, ask yourself a question, How do you centralise your codes? Is it based on type? or Is it based on modules / pages?

If it is based on types, it is better you centralise your codes in a particular folder of a single type only

css/
    index.css
    home.css
    aboutus.css

Or if it is based on modules then better centralize in a single page / module. Like

home.html (It will contain, markup, css and script that is related to home.html)
aboutus.html (..............

Answer 4

The third option – a master CSS file organised into sections – is definitely the best option for maintenance and performance. While it may seem better to use a STYLE element on individual pages, it is a false economy. In isolation, it is quicker (at least, in the short-term), but STYLE elements are not individually cached, and must be reloaded with the HTML every time.

Also, I think that it is easier to manage your CSS when it's in one external file (or even a group of smaller, modular files), than it is to go rooting through your file system, hunting for the odd STYLE element here and inline style rule there. Personally, it helps me to create a more consistent look and feel across a website.