Most of the time when applying stylesheets it is not the toughest to create the right style, it often is more difficult to apply the style to the right area, and the right area only!
That’s why in this post I want to elaborate on the css selection syntax (this is the same used with jQuery also).
With examples of html and css I want to illustrate different ways to select the right element inside css (or jQuery).
First of lets start with the basics:
To select all of the same element you can simply use the name of the element. With this example all paragraphs (p) get a black color.

p { color: black; }

Links (a) are special is the way that they can have different states.

a:link { color: blue; }
a:hover { color: red; }
a:active { color: orange; }
a:visited { color: purple; }

How about selecting only links within paragraphs and giving them a different font-weight?

p a { font-weight: bold; }

“p a” means: all “a” elements who are inside a “p” element

<a>not bold</a>
<p><a>bold</a> not bold</p>

With this html and the previous css the first a would have a normal font-weight, the second however would be bold.
When a certain style applies to multiple elements you can use a comma to seperate several elements

p, a { background-color: yellow; }

In this example all “p” elements and “a” elements will have a yellow background.
It is also possible to combine different of the above methods:

p, a:active, p a {color: red; }

This means that all “p” elements, all “a” elements with status “active” and all “a” elements inside “p” elements have a red color.
This already provides a lot of possibilities to style a page. However this will mostly not be enough, you are bound to have different types of paragraphs or links. For this there are classes and ID’s to give to elements.
General rule is that an ID must be unique, which means that on every page not double ID’s are present. If multiple elements need the same style it is better to use classes.
In HTML and ID looks like this:

<p id="special">special text</p>

In css this element can be reached in one of the following ways:

#special {font-size: 110%; }
p#special {font-size: 110%; }

The first line means that all elements with ID “special” get a font-size of 110%. The second line means all paragraphs with ID “special” get a font-size of 110%.
In HTML a class looks like this:

<p class="underline">underlined text</p>

In css this element can be reached in on of the following ways:

.underline {text-decoration: underline;}
p.underline {text-decoration: underline; }

The first line means that all elements with class “underline” get an underline. the second line means that only paragraphs with class “underline” get an underline.
In my next post about CSS I will elaborate in what happens it one element is selected in multiple ways and which CSS style will be dominant.