TYPES OF SELECTORS

 

So far, we've only dealt with tag selectors. This is where you change the style of a particular tag, wherever is appears in the page. However, there are 3 different selector types in total, and some special ones for links.

 

TAGS

 

This is the simplest type of selector. If you want to change how all tags across your page, this is what you use. A good example of this is removing the border around images when they are linked. By default, several browsers place a blue border around images. To get rid of this, first type the image tag selector, img. Then add the attribute border-style and set it's value to none. The final rule is shown here:

 

img

{

  border-style: none;

}

 

 

CLASSES

If you need to apply a CSS rule to several different types of tags or perhaps only a few tags instead of all of them, you can use the tags class attribute. Classes should be used on repeated elements. For example, you may want a style for a particular heading that will appear more than once on one page. The heading is actually a paragraph tag, but you don't want every p tag to look like a heading, so you give the ones you do a class like this:

 

<p class="myheading">my heading</p>

 

Now, to apply a style to a class, you simply use the class name with a preceding dot '.'

 

For example:

 

.myheading

{

  font-weight: bold;

}

 

This will make any tag with a class value of myheading have bold text.

 

 

IDS

Ids are very similar to classes, and can actually be used in exactly the same way, except that it would not pass the W3C requirements. Ids should be used for unique elements and thus should only be used once on each page. A good example of this is the container which holds all of the content in this page. I use a div tag with an id value of content, and then apply a style to that id to centre the container. Id's are assigned to tags just like classes except with the 'id' attribute.

 

<div id="content">...content here...</div>

 

And to apply a style to the id, use the same method as with classes, except using the hash '#' symbol instead of the dot.

 

For example:

 

#container

{

  ..centre code here (coming next!)

}

 

 

SPECIAL SELECTORS

There's a few selectors which break the rules, and are also known as advanced selectors. Links are the most common of these. The anchor tag 'a' has several states. A link can be normal, have the mouse hover on it, have been visited and can be active. The way to change these is to use the colon ':' character.

 

For example:

 

a:link

{

  color: #00FF00;

}

 

This will change all link's standard state to a red colour. The most common use for these selectors is to get rid of the automatic underlining applied by all browsers. The following will do this:

 

a:link

{

  text-decoration: none;

}

 

Now you may be thinking you have to write out a rule for each link state? Well there's a shortcut. You can use commas to seperate selectors of any type.

 

a:link, a:hover, a:visited, a:active

{

  text-decoration: none;

}

 

This will set all states of links to have no underline.