CSS Selectors

Every CSS style definition has two components: the selector, which defines the tags to which the style is applied, and the properties, which specify what the style does.

Tag Selectors

By naming a specific HTML tag, the style definition is applied to every occurence of the tag in the document. This is often used to set the basic styles for a website. 

  	body, p, th, td, div, ul, ol {
      font-size: 1em;
      color: #000000;
      }

Class Selectors

Used when you want to assign different styles to identical tags occurring in different places within your document. The period indicates that a class is being named instead of a tag.

	p {color: #0000ff; }
	.sidemenu {color: #ffffff; }

<p class="sidemenu">This text wll be white instead of of blue, <a class="sidebar" href="link.html"> and so will this link</a></p>

Pseudo-Class Selectors

The formatting of the <a> tag (anchor tag) has four states in CSS, the unvisited link color (a:link); the color it changes to after it has been visited (a:visited); the color that it changes to when the mouse hovers (a:hover); the color the link changes to when the link has been clicked on (a:active). Each successive state overrides the previous.

	a:link {color: #0000ff; }
   a:visited {color: #ff00ff; }
   a:hover {color: #00ccff; }
   a:active {color: #ff0000; }

ID Selectors

Similar to Class selectors, ID selectors are used to select one particular tag, rather than a group of tags. An ID selector is the ID preceded by a hash mark (#).

#sidemenu1 {color: #ffffff; }

<p id="sidemenu1">This paragraph is uniquely identified by the ID "sidemenu1".</p>

When to use a class and when to use an ID

The most important rule is that an ID must be used only once in a document, because it identifies the element to which it is applied. Once you have assigned an ID to an element, you cannot use it again within the document.

Classes may be used many times within a document. You can apply more than one class to an element, but only one ID is allowed.

IDs are used for main, structural and positioning elements on a page. For example: header, content, navigation, footer.