CSS Classes, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Classes, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Classes.


     Back             Next     



In CSS sometimes we want to apply a special style to a particular element or a particular group of elements. In this CSS Tutorial lesson, we will take a closer look at how you can use class and id to specify properties for selected elements.

How can you color one particular headline differently than the other headlines on your website? How can you group your links into different categories and give each category a special style in Cascading Style Sheet? These are just examples of questions we will answer in this lesson.

Grouping elements with class in CSS

Let's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>

Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.
To achieve this, we divide the links into two categories. This is done by assigning a class to each link using the attribute class.
Let us try to specify some classes in the example above:

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>

We can hereafter define special properties for links belonging to whitewine and redwine, respectively.

a {
	color: blue;
}

a.whitewine {
	color: #FFBB00;
}

a.redwine {
	color: #800000;
}

As shown in the example you can define the properties for elements which belong to a certain class by using .classname in the style sheet of the document.

Identification of element using id in Cascading Style Sheet

In addition to grouping elements, we might need to identify one unique element. This is done by using the attribute id.
What is special about the attribute id is that there can not be two elements in the same document with the same id. Each id has to be unique. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id:

<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...

The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:

<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS Classes:

#c1-2 {
	color: red;
}

As shown in the example above we can define the properties in a specific element by using #id in the Cascading Style Sheet sheet of the website.

     Back             Next     
 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 221 visitors are online now