Selectors

When you need a certain markup for a HTML element, you do this by using lot's of tags in your HTML code. For instance, you may want your H1 elements to have blue text. In HTML you need to define this as follows: 

<H1><FONT color="blue">Blue text</FONT></H1>

In CSS this becomes: 

H1 {color: blue;}

This is what is called a "rule". This rule will cause all H1 elements to have a blue text. If you want to change it into another color, you just need to change the value "blue" to the color you want.

A CSS rule consists of two parts: the "selector" and the "declaration". In our example, H1 {color: blue}, H1 is the selector. It is that part of the rule that selects the portion of the HTML document to which the rule should be applied. In this case it's the H1 element.

The right part of the rule {color: blue;}, is called the declaration. It has a CSS property (color) and a value of that property (blue). The syntax is always a property, followed by a colon, and then a value. The declaration is terminated with a semicolon. All that is wrapped in curly brackets. If you use an incorrect property, your whole declaration will be ignored. Do you use an incorrect value, then only that value will be ignored (in most cases, depending on the browser).

So, in other words, in cases where you can have multiple values for the same property and you use a wrong value, the rest of the values will be validated.

For instance the property "font-family ". You can set that to have multiple values: 

P {font-family: "Trebuchet MS ", Arial, Helvetica, Tahoma, sans-serif;}
.

If you leave the " " out on Trebuchet MS, that will likely result in using Arial as font instead of Trebuchet MS.

What properties and values you can use and their behavior, you find at W3C.

Types of selectors

CSS has several types of selectors. Explaining all of them in detail would lead us to far. Instead i'll try to scratch the surface so you will have an understanding of what they do. For a really in depth study, you should look into the W3C specifications.

Type selectors

The most simple selector we already encountered:

H1 {color: blue;}
.

It selects an element of the HTML document: P, H1, BODY, etc.

Class and ID selectors

These two types have one thing in common: they can be used independently of HTML elements. They can be used on their own or in combination with an element selector. Confused? No need to be. Suppose you want only certain paragraphs to have blue text. P {color: blue;} will not do because that will turn all paragraphs in blue text. So, what you need is a selector you can use whenever you want, regardless of the HTML element. Enter the class and ID selector.

Let's start with the "class" selector. In our example, the class selector would look like this:

 P.blue {color: blue;}
.

But in order for that rule to work, you will need to modify your HTML like this: <P CLASS="blue"> this text in this paragraph needs to be blue</P>

What this means is: "any paragraph whose CLASS attribute has a value of "blue" will apply the following rule. (if you ever need a translation for CSS rules, check out SelectORacle).

Okay, but what if i want other parts of the document to have blue text and not just paragraphs? Do i need to make a rule for every part, for instance:

SPAN.blue {color: blue;}

No you don't: you can make a class selector without a preceding element: just plain .blue {color: blue;}. Now every element that has a CLASS attribute with a value of blue will have blue text.

The way a class selector works is that it references directly a value that is found in the CLASS attribute of an element. For the styles of a class selector to work, they must be associated with the element in question. How? By having the CLASS attribute of that element set to the appropriate value.

A class selector is always preceded by a period (.). The period is necessary for one reason:
it helps to keep the class selector separate from anything you would like to combine it with, for instance an HTML element like we had in our P.blue {color: blue;} rule.

Next we have the "ID selector". This selector is almost like the class selector, but it is preceded not by a period but by an octotorphe (#). Our "blue" rule would look like this:

#blue {color: blue;}

In the HTML code you don't use the CLASS attribute but the ID attribute, so every element whose ID attribute has a value of blue will have blue text color.

The big difference between Class and ID

You can use classes as much as you like: you can assign them to any number of elements. All other id's you use in your document: "#blue" for instance, can only occur once in your document while ".blue" can occur as many times as you like in the document.

You use a class whenever the same kind of information will be seen more then once in the document. An id must be used in case you have info that is unique in the document (footer, title, ...).

read here more on selectors

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo