Tutorials - CSS - Classes

Now you've got the hang of CSS, you're probably wondering just how useful it is. It's great that you can style all the elements on your page, but what happens when you want one  element styled in one way, and another  element styled differently? This is where classes come in. You can easily define classes in your internal or external style sheet. In this example, we'll define the 'para1' and 'para2' classes for the  element, and show you how it works:

p.para1 { color: green; }
p.para2 { color: orange; }

That is how easy it is to create classes for your selectors in CSS! To use them, you set the class="" attribute in your HTML element to the class name you want to load.

<p class="para1">This text is in class para1</p>
<p class="para2">This text is in class para2</p>

This text is in class para1

This text is in class para2

As you can see, we have styled the  element in two different ways using the class="" attribute.

An Important Note

It is important to note that class styles will take priority over non-class styles. For example, if you defined p { font-size: 12px; color: blue; } and then defined p.class { font-size: 24px; }, then created a paragraph element using  you would find that this element would inherit color: blue; but would be in font-size: 24px; as the class overrides the base styling for the element.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.