XHTML and CSS - Classes
Classes
In this tutorial I'm going to show you how to control styles by using something called a class. Before we have been using elements to apply styles to everything on the webpage that was the same element, for example if we had 8 paragraphs and we applied a style to the paragraph tag it would effect all 8 paragraphs, but what if you want half of your paragraphs to be red and the other half to be blue, in order for us to get more control over our webpage we need to use something called a class. First let's make two paragraphs and then we'll use classes to style them differently to each other.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The first thing you need to do in order to make a class is use a period/a dot, where you would normally put your element in CSS and give it a name right after the dot, I'm going to call my first class redtext and set the property's to make text red so it looks like this.
<html> <head> <title> This is the title. </title> <style type="text/css"> .redtext { color: red; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Next I'm going to add a class called green text and set the property's to make the text green.
<html> <head> <title> This is the title. </title> <style type="text/css"> .redtext { color: red; } .greentext { color: green; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
If you view your page now you'll see that nothing has changed and everything is plane, that's because we haven't applied the classes to the paragraphs yet. In order to apply a class to a element you have to set the class attribute equal to the class you want to use, you set it to the class name without the period, that is just a marking that CSS needs to know it's a class.
<html> <head> <title> This is the title. </title> <style type="text/css"> .redtext { color: red; } .greentext { color: green; } </style> </head> <body> <p class="greentext">This is a paragraph.</p> <p class="redtext">This is another paragraph.</p> </body> </html>
Now when you view your page you'll see that both paragraphs have changed color, so now we can separate our elements and use any style we want on each element without effecting others.

Page generated in 0.0034 seconds.