CSS Placement
As I stated on the last page, the code for importing a style sheet into a page looks pretty much like the code for embedding a style sheet into a page. Remember for these everything goes between the <head> and </head> tags.
<style type="text/css">
All your style rules go here!
</style>
</head>
Why would you want to do this when you can just make an external document to control your styles? Say you only have one page your making, then it doesn't make much sense to create a separate document for your styles unless you like keeping track of two documents.
Maybe you have a style sheet for a whole web site but need to change something for just one page. If you hadn't already notice, the font for this page has changed. It went from a standard Arial to an italic Times New Roman. That is if you have these fonts on your computer. Otherwise they went from a sans-serif to an italic serif font. I also made it 2 points bigger since serif fonts can be harder to read sometimes.
Now what's nice about what I've done here is that all I changed about the style was the few things I just mentioned. Everything else that was previously declared about the style such as the color of the font still remain or have been "inherited" from the external style sheet. This inheritance is yet another example of the cascading part of style sheets. The farther from the top you get the more influence or power the styles have on what they are meant for. But as long as you haven't completely overwritten them, the parts of the previously stated styles not overwritten still apply.
While we're on the subject, let me elaborate a little more on this inheritance thing. At the very top of the heap are the default values for tags. Things such as black text and a white background for the body <body> of a web page or center alignment for a horizontal rule <hr> who's width is set to less than 100% of the width of the page. Next comes the external style sheets then the embedded and finally the inline styles.
Styles from the very top of the heap are inherited all the way to the bottom unless overwritten along the way. Styles you defined in an external file sheet can be added to in an embedded style sheet or an inline style without loosing what you've previously defined about them.
Take this paragraph for example. I originally declared the style for all my paragraphs in the external style sheet. I over wrote the font size and family and added the italic style in the embedded style sheet. Now I've added the underline with an inline style (<p style="text-decoration:underline">). I've done all this to the <p> tag yet the styles from the higher levels such as the text color I defined in the external sheet made it all the way to be displayed.
Also if I have one tag nested inside another such as <p><strong>bold text</strong></p>, the innner tag "inherites" the properties of the outer one.
Inheritance is a powerful thing and something to keep in mind when defining your styles. Now on to the last position for your styles, the inline style.
