I’ve had a lot of questions lately from readers and other designers/developers I know about using multiple stylesheets and how to keep them integrated with each other with out having to edit each stylesheet individually when making global changes.  The answer is At-Rules: At-rules help consolidate global styling from multiple stylesheets into one source.  Below I will touch on how to use these properly on your websites to help make future CSS adjustments a breeze when having multiple stylesheets.

Importing additional style sheets

The import at-rule will attach another style sheet to your current one. So if you wanted to apply some styling from your “home.css” stylesheet to your “innerpage.css” stylesheet for example, you would just open the innerpage.css and add the following:

@import url(home.css);

Then just add your “inner.css” to any pages that you would like to have carry the styling of the “inner.css” and “home.css” like so:

Media Types

One item to also note is that you can set a global style within the stylesheet for different types of media as well.  So let’s say that you wanted to sent a few global print stylings, this is example what it would look like in your css:

@media print{
       p {
           font-size: 12pt;
           color: #000;
       }
}

You can set your media type to be any of the following, just please note that for IE only All, Screen and Print are supported.

• screen – computer screens.
• print – printers.
• aural – speech synthesizers.
• handheld – hand held devices.
• projection – projectors.
• all – all of the above

There are other great ways to use At-rules, for styling printable web sites and such but these few tips should help you assign global styling that is easy to adjust from time to time, as you will only have to change the parent files.  Good luck and happy styling!