Cascading Style Sheets 101
Applying CSS
CSS is applied to web pages in 3 ways:
Link element:
<link href="css.css" rel="stylesheet" type="text/css">
Is placed between the head element in the top of an html document. It links an external CSS document to the web page. This allows any number of web pages to have the same style(s). This is where CSS shows it's true power as is allows one to make site wide changes in one document. Imagine if you had a thousand page site coded with font elements all specifying the use of Ariel as the font. Now your boss tells you to make all the fonts sans serif. If you use CSS you have to make only a few quick changes in one CSS file rather than changing the font elements on a thousand web pages!!!
Style element:
<style type="text/css">
<!--
body {background-color: #ffffff;
font-family:font-family: "MS Sans Serif", Ariel, Geneva, sans-serif;}
-->
</style>
This is also placed in between the head elements of a page but will apply styles to that particular page only.
Note that after the start of the style element is <!-- and before the element is closed --> is placed for broswers that cannot render CSS - if you don't do this, older broswers will print out the style definations as if it were text.
In line:
<span style="color:#ff0000;">RED TEXT!<span> This uses style as an attribute of the html element - and applys the style specified until that element is closed.
So what does the cascading mean in style steets. Basicly it means the closer a style is to the element the higher precedence it takes. This is also known as inheritance (we will get to that later). For example suppose you have an external stylesheet that says all h1 elements will be 30 pixels, a font of arial and be black. You can override that rule by placing either a style element deffinition in the head of the page or by using a style attribute like this:
<h1 style="font-family:courier; font-size: 10px; color: #0000cc;">
The is the result of the in line rule for this h1 element
</h1>This is the code for h1 elements in the head of this page. As you can see by the result:
<style type="text/css">
h1 {font-family:ariel;
font-size: 30px;
color: #000000;
}
</style>
<h1>