One of my favorite tricks is to build into my web pages a link that will check the HTML page and the CSS stylesheet using the W3C validators.
However, one problem I find is that the convenient way to check the CSS for a website is to put all of the CSS into one file but the most convenient way to organize by CSS for a large site is to use separate files.
For validating the CSS, you want to put all of the CSS into one file. This makes it easy to create a link that will validate that file using the W3C validator. Putting everything in one file means you only have to have one link to test the CSS for a site and also makes sure that everything gets tested.
Under the "everything in one file" strategy, you end with a single declaration in the <head> region of your page that imports the CSS file
However, for a complex site it is more common to have separate CSS files - e.g. a file with the CSS for the default HTML tags, a file with the CSS for the header content, a file with the CSS for menu, etc.
... link href="default.css" type="text/css" ...
It is easy enough to attach multiple CSS files to your HTML content - you just have to use multiple link statements in the block. For example:
The problem here is validation. If I want to make sure that all my CSS content is valid, I have to validate each of these .css files separately... or do I?
... link href="default.css" type="text/css" ... ... link href="menu.css" type="text/css" ... ... link href="footer.css" type="text/css" ...
I've found that the way to get the best of both worlds is to take advantage of the CSS @import statement. Using this approach, I continue to keep my CSS content into separate, manageable sized, files - default.css, menu.css, footer.css, etc. Then I create a master CSS stylesheet that imports each of those separate files.
The master CSS file can be attached to the HTML content with a single statement
@import "default.css" @import "menu.css" @import "footer.css"
This master CSS file can also be validated by the W3C validator which is smart enough to process all of the included content - i.e. an error in either footer.css or menu.css would be reported.
... link href="master.css" type="text/css"
What is the catch? The @import statement is a fairly modern CSS construct and it isn't supported by all browsers. It is supported by the latest versions of Internet Explorer and Mozilla.