Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
Search Engine Marketing
Internet Marketing
Affiliate Marketing
Email Marketing
Viral Marketing
Webmaster Resources
Business Resources
Make More Money
CSS
Web Design
Graphic Design
Color Theory
Product Reviews
Time Management
Business Ethics
Promotional Strategies
Glossary of Terms
Direct Mail Marketing
Telemarketing
Product Sourcing



Link to Us!

CSS
Email this article  :  Printer friendly page

Using Multiple External Style Sheets

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.

Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Order soon and get up to 5 FREE domains & more!
Host 6 Domains on 1 Account
5000MB and 400GB for $6.95 a month!

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates