It is used to give same styling to one or more elements by creating a class selector by giving it a name and then applying it to those HTML tags to format. It is started with a dot then the class name is given by the user. The class name can be letters, numbers, and hyphens only. Class name must start with a letter and cannot include spaces. The usage of class name (top) is shown as
<style type=”text/css”>
.top {
margin: 10px 0;
padding: 20px 20px 20px 200px; border: 1px solid #FFF;
background-position: 20px 20px; background-repeat: no-repeat;
}
</style>
.top {
margin: 10px 0;
padding: 20px 20px 20px 200px; border: 1px solid #FFF;
background-position: 20px 20px; background-repeat: no-repeat;
}
</style>
<div class=”top”>
<h2>VSkills</h2>
</div>
<h2>VSkills</h2>
</div>
The example displays the usage of class selector which is given as “top” and is assigned to a div element. The dot before the class name specifies the reference being a class selector. The dot does not need to appear in the class attribute value. Usage of class name is irrespective of the type of
HTML element and thus can be applied to any element. It can be used to apply the same formatting to multiple elements that have different HTML tags.
But to apply CSS declarations to a specific elements having the class name, append the element name before the dot as –
div.top
{
margin: 10px 0;
padding: 20px 20px 20px 200px; border: 1px solid #FFF;
background-position: 20px 20px; background-repeat: no-repeat;
}
{
margin: 10px 0;
padding: 20px 20px 20px 200px; border: 1px solid #FFF;
background-position: 20px 20px; background-repeat: no-repeat;
}
The example shows restricted usage of class selector named “top”, assigned to a div element. There must not be a space between the element name and the class selector. Other rule blocks or declaration blocks using the class name can also be given. An element can also be assigned more than one class name as
class=”top panel”
The value of this class attribute have two class names “top” and “panel” separated by a space and the two classes may be referenced by two separate rules as
.top {
margin: 10px 0;
padding: 20px 20px 20px 200px; border: 1px solid #FFF;
background-position: 20px 20px; background-repeat: no-repeat;
}
margin: 10px 0;
padding: 20px 20px 20px 200px; border: 1px solid #FFF;
background-position: 20px 20px; background-repeat: no-repeat;
}
.panel {
background-image: url(logo.jpg);
}
background-image: url(logo.jpg);
}
Such multiple class names can also be chained together in the style sheet to refer to the elements with having both class names as values in their class name attributes. But this feature is not supported in IE6. The CSS will be as
.top.panel{
background-image: url(logo.jpg);
}
background-image: url(logo.jpg);
}
Class names should be chosen so as to describe the function of an element. Few rules for using class selector
- After the period, the name must always start with a letter like .9lives isn’t a valid class name, but .crazy8 is. Classes named .copy-right and .banner_image is valid but not .-bad or ._as_bad.
- Class names are case sensitive. Hence, .SIDEBAR and .sidebar are two different classes.
