CSS Placement
So exactly how did I do it? Well since I don't want all my pages with a black background, just for this example, I created another external style sheet exactly like the one I use for this web site with one exception. At the very top I added this line to the style sheet:
Want to see it? Click HERE to view the imported.css code.
Look it all over and you'll see it's just a simple text file that declares our style rules.
Now you know the main styles I use to make this site work.
The @import tells your
browser to import the file in the url( ); part. In this case a file called
imported.css. The imported.css only contains one line:
body {background-color:#000000;}
and that's it. I then made a duplicate of the last page and changed the linked CSS
page from main.css to it's duplicate, with the import statement, called
import_main.css (the one you looked at above).
*Note* All external style sheets need to have the .css file extension. These are just simple text files (.txt) that have been given the .css extension instead. You can create them in a text editor but they must be saved as plain text (remember with the .css extension). You probably can also use that fancy HTML editor (if any) you're already using to make your web pages.
Since I only needed to use the imported style sheet once, I could have done it a lot simpler by using an embedded style sheet to change that one page to a black background but then it wouldn't have been imported and I would have had to lie about it. More on embedded style sheets later.
In order to link your page(s) to, or import into your page(s), an external style sheet you need to add the link or import codes between the <head> and </head> part of your page. The link code should look something like this:
@import url(myCSSpage.css)
</style>
In the link example the rel="stylesheet" tells the browser to expect a style sheet and the href="myCSSpage.css" tells it where to find it. The "type" tells it what kind of style sheet (if there is any other types besides text, I don't know about them).
In the import example, the opening and closing "style" tags are exactly the same ones you will use for an embedded style sheet but in this case only contains the URL to the location of your style sheet.
It is preferred that you should use the link code to bring external style sheets into your pages opposed to the the import code as some browsers may have trouble with importing them. Also it's less coding for you to type and less for your visitors to have to download. Just remember that to bring one style sheet into another, it must be imported but to bring one into a web page it can either be imported or linked (preferred).
