Handy
Tip: Be careful what you name your CLASS and ID selectors.
If you start them with a number, they won't work in Netscape browser.
|
Bookmark
This Page
CSS Tutorial #3
Importing a Cascading Stylesheet.
Importing an external stylesheet works much the same as linking.
Firstly make your text .css file. Call it "yourfile.css" and
include these styles;
H1 { color: yellow; font-family: times }
P { background: silver; font-family: arial}
(This will make all text on your page within H1 tags times, color yellow
and all text within P tags arial with a background of silver.)
You can over-ride the H1 tag and still retain the command for the P tag
just by adding a style in the command line like below.
<head>
<title>Stylesheet tutorial</title>
<STYLE TYPE="text/css">
<!--
@import url (yourfile.css);
H1 { color: blue; font-family: garamond; }
-->
</STYLE>
</head>
<body>
<H1>This is an example of CSS</H1>
<P>It's easy!</P>
</body>
Your browser first imports the "yourfile.css" rules and then
adds the embedded rules to it.
H1 has a rule both in the external stylesheets file and in the embedded
styles. The browser applies the rules of Cascading order of importance
which are;
Inline styles
Embedded styles
Linked styles
Imported styles
Default browser styles
You must always place the @import line first, before adding any embed
styles.
You can import as many stylesheets
files as you want and override them with embedded styles as desired. Unfortunately,
only IE 4 and 5+ support importing. Next CSS Tutorial; Working
with Fonts
|
|
Website
Design
|