06-CSS Class

0
294

This tutorial is all about CSS Class.
CSS is not useful if you can’t utilize the different types of formats for a single HTML tag. But,  with the use of classes, it allows you to do such thing.

 

Classes are simple and all you have to do is to add an extension to the common CSS code. Take note that you must specify this extension  in your HTML.

 

Example:

CSS codes:

p.red{
color: red;
}
p.blue{
color: blue;
}

HTML codes:

<html>
<body>
<p>A normal paragraph.</p>
<p class=”red”> A paragraph that uses the p.red CSS code</p>
<p class=”blue”>A paragraph that uses the p.blue CSS code</p>
</body>
</html>

 

Result

A normal paragraph.

A paragraph that uses the p.red CSS code

A paragraph that uses the p.blue CSS code

 

 

 

Another Example:

CSS codes:

p {

color: blue;

font-size : 28px;

}

p.red{
color: red;
}
p.blue{

font-size : 15px;
color: blue;
}

HTML codes:

<html>
<body>
<p>A normal paragraph.</p>
<p class=”red”> A paragraph that uses the p.red CSS code</p>
<p class=”blue”>A paragraph that uses the p.blue CSS code</p>
</body>
</html>

Result

A normal paragraph.

A paragraph that uses the p.red CSS code

A paragraph that uses the p.blue CSS code

 

 

Readers might read also:

 

Facebook Comments
(Visited 20 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here