Style Sheets: Imported
Importing an external Style Sheet is similar to linking. The linking method cannot be combined with other methods, but you can combine importing with other methods. It is recommended that you always use a full path or full URL to all style sheet referenced URL's. Though the W3C specifications state that URL's should be relative to the location of the style sheet, some browsers use these paths relative to the document's location.
|
<html lang="en"><head> <h1>Style Sheets</h1> </body></html> |
Style SheetsCustomizing your web pages! |
We're using the CSS file, stylsht.css, that we used for the previous example here.
In this example, the browser first imports the main.css rules (the @import line must always be first), then add the embedded rules to it to get the full set of rules for this page.
Notice, however, that H1 has a rule both in the external Style Sheets file and in the embedded styles. What does the browser do in the face of this conflict? The embedded rules win out, and the text displays as orange Impact. As many Style Sheets can be imported as you want. You can then override them with embedded styles as desired.
|
<html lang="en"><head>
<h1>Style Sheets</h1> </body></html> |
An even better method would be to simply load a Linked style sheet first and then define your changes in another Linked or Embeded style sheet.
