www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons CSS class and id Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
We have already learned that when we define a style for <h1>, the same gets applied to all of our level 1 headings. That's really very useful. But what if we want some of our level 1 heading to be formatted differently?

In such cases we can use the class and id attributes of our HTML elements to specify properties and then define styles for the selected elements.

Grouping elements with 'class'
The 'class' is an attribute used with many of the HTML tags. We use it to specify that the tag or element belongs to a specific class. For example in the following HTML code there are two <h1> headings and the both belong to different classes:

<h1 class="red">This heading appears in Red Color</h1><br>
<h1 class="orange">This heading appears in Orange Color </h1>

When we load the above in a web browser, both of the headings appear in the same style. The first one will not appear in Red and the second also will not appear in Orange. The reason is simple i.e. we have not yet defined styles for them.

We use the following syntax to define class based styles:

h1.red {
color: red;

h1.orange {
color: orange;

Note the use of the . between the HTML tag name and the name of the class. In fact we can omit the h1 from the above code and re-write the above code as follows:

.red {
color: red;

.orange {
color: orange;

When we omit the HTML tag name the class based style becomes general i.e. it can be applied to any HTML tag using the class attribute. On the other hand if we use the HTML tag name, the style can strictly be applied only to the specified tag.

Identification of elements using 'id'
In addition to grouping elements, we may, sometimes, need to identify one unique element. Identification of elements can be done by using the attribute id.

Note that there can not be two elements in the same document with the same id. For example in the following HTML code there are two <h1> headings and both have two different ids:

<h1 id="red">This heading appears in Red Color</h1><br>
<h1 id="orange">This heading appears in Orange Color </h1>

Now, let us take a look at the syntax of defining id based styles:

#red {
color: red;

#orange {
color: orange;

Note the use of the # symbol before the id name.

Next >>> Lesson No. 9: <span> and <div>

Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.