Cascading Style Sheets Tutorials and Lessons: Class and ID Selectors

Using Class and ID selectors

You have seen how to set up a stylesheet. And you know that if you set up a HTML selector, then all the HTML tags will have their values reset with the new values you specified. For example if you had this:

<STYLE TYPE = "text/css">

H1 {Color: Red}

</STYLE>

</HEAD>
<BODY>

Then all the H1 headings you used between the two BODY tags would have the text between the two <H1> tags coloured red.

In other words, to use your new HTML selector, you don't have to add anything else to your HTML code. Just use the tag in the normal way.

However, Class and ID selectors are slightly different - you DO have to add something else to your HTML code. We'll start with Class Selectors.

Using Class Selectors

To set up a Class, the code was this:

.ClassSelector {Property: Value}

First, you type a full stop. Then you type the name of your Class Selector (which can be anything you want). The Property and Value are then as normal. An example is this:

<STYLE TYPE = "text/css">

.FontOne {Color: Red}

</STYLE>

</HEAD>
<BODY>

The .FontOne is the Class Selector, a name we made up ourselves. In between the curly brackets, we're then saying "Every time this Rule is applied, the colour of the text will be red."

You can use this new Rule inside a normal HTML tag. Like this:

<H1 Class = FontOne>My Heading</H1>

When applying your new Class Selector Rule, the word "Class" is used. You then type an equals sign ( = ), followed by the name you gave your Class Selector. In our case, this was FontOne. But note that the full stop is now missing from the start of the selector name. If you put the full stop in, your Rule won't work.

The Class Selectors, however, come into their own with the <DIV> and <SPAN> tags. Examine this:

Using Class Selectors

The Class Selector is first set up in between the STYLE tags in the HEAD section of the HTML code. The Rule is then applied inside DIV and SPAN tags:

<DIV Class = FontOne>Class Selector</DIV>

<SPAN Class = FontOne>Class Selector</SPAN>

The result in a browser would be this:

Click here to see the Results

The same Class was applied to both the DIV and SPAN tags. But note the difference between the two: a DIV tag will insert a line break above and below; a SPAN tag won't.

Using ID Selectors

You use an ID selector in exactly the same way that you use the Class selectors. The only difference is in the word used when applying the Rule. Instead of Class = you use ID =

<DIV ID = FontOne>Class Selector</DIV>

But that's enough of the theory for now. Let's get some practical work done. We'll got through the various ways you can add a STYLE to your web pages using your HTML Editor.

<-- Back One Page Move on to the Next Part -->

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses