Nesting Stylesheets

Suppose that you have two or three stylesheets using different media attributes. Each will have some stylesheet definitions that are specific to that media. A lot of the content though will be common between the stylesheets but not necssarily between all of the different media that you are specifying stylesheets for.

To handle this situation with a minimum of coding we need a way to link a stylesheet that contains common definitions into those stylesheets that require those definitions. With the exception of Netscape 4, all of the common browsers allow us to do this using the @import command. For example:

@import url(common.css);

When you incorporate this command into another stylesheet (or between the style tags within a web page) then the content of the referenced stylesheet will be substituted for the command before the styles are applied to the page.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow