If you are a regular reader of our CSS articles, I am sure you know that the best way to utilize CSS in most cases is with an external style sheet by linking it between the head tags of your document. (If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, “External, Internal or Inline? Which Method is Best?”)
But did you know that you can actually use multiple style sheets with the same page? Why would you want to, you asked?
<link rel="stylesheet" type="text/css" href="styles/default.css"> <link rel="stylesheet" type="text/css" href="styles/docs.css" >
For example, the code above illustrates two linked style sheets that manage one web page. This code manages the default style of all your web pages and in addition it manages a support documentation directory with the docs.css file. Both stylesheets are located within a “styles” directory. This helps keep your default external style sheet from getting too lengthy. It is also quite easy to determine what style sheet controls a specific directory if you name it appropriately (as we have done in the examples).
<link rel="stylesheet" type="text/css" href="styles/default.css"> <link rel="stylesheet" type="text/css" href="styles/form.css">
Another example is if you wanted to manage different parts or elements of a web page. You might find it helpful to create a separate style sheet to control the appear of your web site’s forms, such as in the example code above.
You can make your style sheet structure as extensive as you wish. It really depends on how you intend to use them and the size of your web site(s) using them. I said “web sites” (as in plural) because you can link to other styles sheets on other domains too. (DO NOT link to other webmasters’ style sheets without their permission as that would be considered bandwidth theft and subject to having your website shutdown).
Let’s imagine for a moment that you own a network of 10 web sites. Each of them uses a similar style sheet. You could quite easily develop a parent style sheet of those style blocks that are common to all of your websites. Name it parent.css for example and upload it to one of your web site servers, Domain1.com, for example. Then link all of your other domains’ pages to it within the head section as shown above. By doing this you only have to update one style sheet to control all of your domains common styles. Then create a style sheet for Domain2.com that has unique styles specific to that domain and call it default2.css. And so on. You could upload these unique style sheets to Domain1.com’s server or store them on the server that corresponds to them.
Click here to sign up for FREE Tech. newsletters from Murdok!
BasicTemplates.com designs Website Templates with External CSS and has been providing webmasters worldwide with affordable template designs since 1994. BasicTemplates currently offers 650+ designs which may be purchased individually or get complete access to all templates via an affordable membership plan. Most templates were strategically designed with interchangeable graphics and elements to increase the potential number of design layouts for the end user. Each layout utilizes an external style sheet for easy site maintenance and to ensure fast page load.
