Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Using Multiple External Style Sheets
By BasicTemplates with External CSS

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.