classes-in-cascading-style-sheets-css-

Classes are power mechanism available in CSS to control the layout and formatting of the page. Class allows us to combine elements into group. CSS rules are applied to a class. All the elements grouped in that class are effect by applied rules.

We can define as many classes  per page as we need.

Class can be applied to an element by using class=”name” attribute just after the opening tag within the element.

<p>This paragraph has red text.</p>
<p>This paragraph has dark gray text.</p>
<p>This paragraph also has dark gray text.</p>
Here identifiers are classes which can be used more than once. So one paragraph has been identified by “red” and rest by “default”.
The corresponding CSS uses a full stop (.) to define rules for a class.
.red {
color:#F00;
}
.default {
color:#333;
}
Classes can be used in a number of ways to enhance control. For example

Example 1.

<p>This paragraph has red text.</p>
<p>This paragraph has light gray text.</p>
CSS for above HTML
p {
color:#F00;
font-size:12px;
}
.bleached {
color:#CCC;
}
This stated that by default all paragraphs shall be red but for class .bleached it will be light gray.

Example 2.

<p>This paragraph has red text.</p>
<p>This paragraph has light gray text.</p>
<h3>Another Bleached class</h3>
Now look at following CSS rules
p {
color:#F00;
font-size:12px;
}
.bleached {
color:#CCC;
}
H3.bleached {
color:# #F4A460;
}
Notice last rule which stated that if H3 has .bleached class, its color should be Sandy Brown.

Comments are closed.