To determine which CSS style in your style sheet will outrank the others you need to calculate the “Specificity” for each of the styles based on the selectors used to target the HTML element. To calculate use the following rules:

HTML Tag Selector: 1 point ( i.e. p, div, span )
CSS Class Selector: 10 points ( i.e. class=”redText” )
HTML ID Selector: 100 points ( i.e. id=”HeaderBox” )

Example Styles:

span { color:yellow; } => has a score of 1 = 1
#HeaderBox span {color:blue;} => has a score of 100+1 = 101
#HeaderBox .redText span { color:red; } => has a score of 100+10+1 = 111

Example HTML:

This text will be yellow.

If you need a common chunk of text added before content you can use Pseudo selectors to accomplish this. An example is adding a chunk of text to the front of all blockquote elements in your HTML defining the quote as belonging to a specific category.

blockquote:before { content: "Classical"; }

Or you can use pseudo selectors to add check marks to the front of all links which have been visited by the user.

a:visited { padding: 20px; background: transparent url(/images/check.png) no-repeat top left;

Here are some others you might find useful:

a:before { content:"click here"; }
a:after { content:"click here"; }
p:first-letter { font-size:20px; }

These only work in newer more advanced browsers ( down with IE6 )

a[title] { color:red; } this is how you select a tag using one of its attributes as a qualifier. In other words this selector will only apply the color red to links that have a title.

a[title=special] { color:green; } this one applies the color green to all links which have a title and that title equals “special”.