|
Lesson 4
A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:
<STYLE TYPE="text/css" MEDIA="screen, projection"><!-- @import url(http://www.htmlhelp.com/style.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black } --></STYLE>
Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT { background: aqua }, definition terms would still have a yellow background.
The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.
Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element
|