CSS TUTORIAL



CSS Class


In the previous example we saw, how we could use CSS ID to use different styles on one or other element. Class is another concept used in styling and it is important that you understand it.
The CSS class selector is specifies style for a group of elements. The class selector is often used on several elements.Using class you can use the same style for many HTML elements. The class selector is defined with starting with a "." Let us understand it with an example. 
<html>
<head>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>

<body>
<h1 class="blue">Center-aligned heading</h1>
<p class="blue">Center-aligned paragraph.</p> 
</body>
</html>
This is a very simple example, but shows the concept. All we want to do is to define a class which will render the text in blue color. In the uage of this class we have applied it to the header as well as the paragraph. Notice how class has been used using class="blue".

You may like to try this code using online tool here

Explanation






Before you proceed further, you may like to experiment a bit on class. As an exercise, try to create two classes. The first class will align it in center and make it in red color. The second class will align it left and will have blue color.

Use the two class on two sets of header and paragraph.

It is time to take a coffe break. We promise to take up something very simple in the next post in the series of this tutorial - the comments in css.