Brought To You By
Tomlin Ventures Ltd

Using The Class And ID Attributes

Using the Class And ID selectors to style with CSS.

Now while type selectors are used to target every instance of an element within your HTML document this is not alway what you want to do. We will now take a look at some more specific selector, giving the webmaster the choice of which element or elements to style.

The most commonly used CSS selectors are without a doubt the ID and the class selectors. They are very similar to each other in the way they are used to style your HTML and very simple to use.

CSS ID Selectors

The CSS ID selector is as its name would suggest a style which is applied to specific page elements depending on their ID attribute. Meaning that only HTML elements containing the ID attribute with the same value which is referenced in the css code will adopt the given styles.
The easiest way to explain this is with an example as shown below.

<h2 id='highlight'>This is an example title with an ID attribute</h2>
<h2>This is an example title with no ID</h2>

The important part of the above code is the id='highlight' attribute that is applied to the first element, this is saying that the element has an ID of highlight.

Now we have assigned an ID to our element we can reference it within the CSS code as shown below.

#highlight		{font-size: 30px; color: blue;}

The reference itself is acheived by using the # character which basically stands for the ID, this is immediately followed by the ID name itself and thats it, just add your CSS styles and your done.

And the result...

CSS ID selectors

By using the ID seletor in this way you can easily style individual page elements but there is one very important point to remember. The ID attribute by definition must be unique meaning the the same ID must not be used more than once on any single page. With this in mind if you wish to style multiple elements on a page with the same style you must create seperate ID values and css code for each, alternatively you may be better off using the class attribute.

CSS Class Selectors

The class selector is much the same as the ID selector in that it can be used to style specific elements within the HTML document. The reference is assigned by the class attribute as opposed to the ID attribute. More importantly unlike the ID selector the class selector may be used on multiple elements on the same page making it a much more versatile selector.

Therefore, using the class selector your HTML code will look something like this.

<h2 class='highlight'>This is an example title with a class attribute</h2>
<h2>This is an example title with no class</h2>
<li class='highlight'>This is an example list item with a class attribute</li>
<li>This is an example list item with no class</li>

The CSS code...

.hightlight		{font-weight: bold; font-style: italic;}

The above code will style all elements with the class attribute value of highlight.

Notice that the class is referred to in the CSS code by using the " . " immediately followed by the class name, this is standard practice for referencing a class in.

The result...

CSS class selectors

That it can be used on multiple elements on the same page is a great benefit, using a combination of both the ID and class selectors it is possible to achieve full styling of your web pages with very few lines of actual CSS code.

Okay so there are the class and ID selectors fairly simple to use really. Hit the next article button to continue with the tutorial.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus