Adding CSS
Inline Styles:
An example of an inline style is below:
<div name=”myDiv” style=”background-color:black;”></div>
The css property “background-color” is only applied to the div “myDiv”. Inline styles should be used only when the more conventional methods (below) will not help.
Internal Style Sheet
When you have a page which has a unique style, using an internal style sheet may be the best option. See example below:
<head>
<style type=”text/css”>
p {margin-left:20px}
body {background-image:url(”images/bkground_image.gif”)}
</style>
</head>
As you can see the style sheet must be added between the <head></head> tags. This code will set all <p> tags within the current page to have a left margin of 20pixels and set the background image of the body.
External Style Sheets
When you need styles applied to many pages, an external style sheet is ideal. If an external style sheet is linked to all the pages on a site, one change here can change the look of the entire website. An example of an external style sheet is below:
p {color:red;font-size:14px;}
External style sheets should have a .css extension. They should only contain css code.
To link an external style sheet to a page, use the following code:
<head>
<link rel=”stylesheet” type=”text/css” href=”main_style.css” />
</head>
Again, notice the above line is located between the <head></head> tags.
How css cascades
When a tag has a number of css styles applied to it, which one will it use?
The priority order for css is as follows (1 is highest and 4 lowest priority):
1. Inline style
2. Internal Style Sheet
3. External Style Sheet
4. Browser Default
So an inline style will override everything else.
Note: If the external style sheet is linked in after the internal style sheet, the external style sheet will have the higher priority.