ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

06-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

 

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!