HTML class means we provide same css to group of elements.
Suppose we have 10 elements and we want to write equal css for every elements
then we never write CSS code 10 times, we just write CSS one time and that
class name be given to all elements.
Examples is below:-
Here in below examples we want to change font color and back ground color .
Example 1:- Apply css to total elements without writing class attribute in every elements.
<style>
.elements p{
color:red;
background-color: gray;
}
</style>
<div class="elements">
<p>content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
<p>content5</p>
<p>content6</p>
<p>content7</p>
<p>content8</p>
<p>content9</p>
<p>content10</p>
</div>
Example 2:- Apply css to total elements by writing class attribute in every elements.
<style>
.myCSS{
color:red;
background-color: gray;
}
</style>
<div id="elements">
<p class="myCSS">content1</p>
<p class ="myCSS">content2</p>
<p class="myCSS">content3</p>
</div>
Example 3:- Apply css to some elements by writing class attribute in that elements.
<style>
.myCSS{
color:red;
background-color: gray;
}
</style>
<div id="elements">
<p class="myCSS">content1</p>
<p>content2</p>
<p class="myCSS">content3</p>
</div>
Edit HTML Class Example in Editor
Suppose we have 10 elements and we want to write equal css for every elements
then we never write CSS code 10 times, we just write CSS one time and that
class name be given to all elements.
Examples is below:-
Here in below examples we want to change font color and back ground color .
Example 1:- Apply css to total elements without writing class attribute in every elements.
<style>
.elements p{
color:red;
background-color: gray;
}
</style>
<div class="elements">
<p>content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
<p>content5</p>
<p>content6</p>
<p>content7</p>
<p>content8</p>
<p>content9</p>
<p>content10</p>
</div>
Example 2:- Apply css to total elements by writing class attribute in every elements.
<style>
.myCSS{
color:red;
background-color: gray;
}
</style>
<div id="elements">
<p class="myCSS">content1</p>
<p class ="myCSS">content2</p>
<p class="myCSS">content3</p>
</div>
Example 3:- Apply css to some elements by writing class attribute in that elements.
<style>
.myCSS{
color:red;
background-color: gray;
}
</style>
<div id="elements">
<p class="myCSS">content1</p>
<p>content2</p>
<p class="myCSS">content3</p>
</div>
Edit HTML Class Example in Editor
No comments:
Post a Comment