Before moving on, we’ll quickly cover how to apply style properties to your documents. Remember, you have three methods to add style sheets: embedded, linked, and inline. We’ll discuss each one in turn.
Embedded Styles
All the styles are defined at the top of the HTML document within the <head> tags because they contain information about the entire document. The styles defined here apply only to the one document in which they appear. If you plan to use these same styles in another document, you need to add them there as well.
<head>
<style type=”text/css”>
table.nav {background:aqua}
table.rest {background:yellow;
text-align:center;
color:black}
a:link {color:red;
text-decoration:none}
</style>
</head>
The <style> tag almost always includes the type=”text/css” attribute, so you should get used to adding it.
Linked Styles
Linked style sheets hold all the style properties in a separate file. You then link the file into each HTML document where you want those style properties to appear.
<head>
<link rel=”stylesheet” href=”mystyles.css” type=”text/css”>
</head>
With this method, I’ve created a separate file called mystyles.css (for cascading style sheet) that contains all my style properties. You can see that the same type=”text/css” attribute shows up here. Following are the entire contents of the mystyles.css file. These are the same styles that showed up in the preceding embedded styles example, but now they appear in a separate text file.
table.nav {background:aqua}
table.rest {background:yellow;
text-align:center;
color:black}
a:link {color:red;
text-decoration:none}
Inline Styles
With inline styles, the style properties are added to the HTML tag as the tag is entered. This means that if I want the same style to appear on all the <h1> tags in my document, I would have to type those styles in all the <h1> tags. Look at the following example. I am still using the same style properties, as in the previous examples, but now you can see how the two tables would be created using inline styles.
<table style=”background:aqua” width=”100%”>
<table style=”background:yellow; text-align:center;color:black” width=”100%”>
Using inline styles, the <style> tag becomes the style attribute. Multiple style properties are still separated by semicolons, but the entire group of properties for each tag is grouped within each HTML tag. This type of style sheet is fine for documents in which you need to apply styles to only one or two elements, but you wouldn’t want to do all that work when you have a lot of styles to add.
Cascading Precedence
Web browsers give precedence to the style that appears closest to the tag. So, inline styles (which appear as attributes within the tag itself) are most important. Embedded styles (which appear at the top of the HTML file) are applied next, and linked styles (which appear in another file altogether) are applied last.
Imagine that you have created an embedded style for the <h1> tag, but want to change that style for one occurrence of the <h1> tag in that document. You would create an inline style for that new <h1> tag. The browsers recognize that fact and change the style for that tag to reflect the inline style.
Style sheet precedence is supposed to place more importance on embedded styles than on linked style sheets. In actual practice, however, you’ll find that both Internet Explorer and Netscape treat linked sheets as more important than embedded sheets (but they do treat inline styles as more important than either of the other two). You’ll find that you have better luck if you use either linked or
embedded styles, but not both.
Posted in 
Tags: 
