Introduction to Style Sheets
Order of precedence
If more than one formating style applies to of a particular element within a HTML document, the resolution is made according to the following order of precedence:
- Inline style, eg., <B>
- Document-level style, placed within the <style>... </style>
- External style sheets, .css files
- Browser default values
Document-level style sheets
External style sheets
The formatting specifications between the comment tags <!-- and --> in a document-level style sheet are placed in a separate text file with the extension .css (in my case here, style.css). A link to the style.css document is placed within the <HEAD> container as follows:
<LINK rel="stylesheet" href="style.css" type="text/css" >Here is the text file: style.css
And here is the (revised) document. Look at the code.Types of selectors
- HTML selectors
- class selectors
- ID selectors
Style sheets for lists
- Basic list in a box
- Horizontal list
- Horizontal list separated by "pipe"
- Tabs
- Breadcrumbs
- Fancy buttons
Style sheet references
- BrainJar.com, check the tutorials
- Position is Everthing, a useful list of CSS examples and tutorials