CSS Classes Tutorial

CSS Classes...

As you've learned, an override is a very easy way to make exceptions for a style that you've implemented.

But, a lot of the time, you'll want to do the same override multiple times and it would be tiresome to keep writing the same set of style rules every time you wanted to use them.

That's where CSS "classes" come in...

In a Class of Their Own...

Before we begin, let's clean up our code a little so that it's easier to see what's going on. Go back and remove all of your previous styles. (Copy/paste the whole thing over yours to make it easier)...

									<html>

  								  <head>

  								    <title>ChangRox.com</title>

  								    <style type="text/css">

  								    </style>

  								  </head>

  								  <body>

  								    <p>Hello World!</p>

  								    <p>Welcome to ChangRox.com!</p>

  								    <p>The site for extolling the virtues of Chang.</p>

  								  </body>

  								</html>

Save/refresh and the page is back to plain old black and white with the default font of Times New Roman. Pretty ugly, I know. So lets change the background and font by adding this...

									<html>

  								  <head>

  								    <title>ChangRox.com</title>

  								    <style type="text/css">

  								      body {background-color: silver; font-family: arial;}

  								    </style>

  								  </head>

  								  <body>

  								    <p>Hello World!</p>

  								    <p>Welcome to ChangRox.com!</p>

  								    <p>The site for extolling the virtues of Chang.</p>

  								  </body>

  								</html>

Save/refresh, and now all of the text inside the <body></body> tags is Arial and the background has changed to a grayish color.

Creating a CSS Class...

Let's say that in our page we know that we'll be using some red text more than once. As previously stated, we could write inline style for each instance of red text, but that's not very efficient. Instead let's create a CSS class by adding this...

									<html>

  								  <head>

  								    <title>ChangRox.com</title>

  								    <style type="text/css">

  								      body {background-color: silver; font-family: Arial;}

  								      .crrt {color: red;}

  								    </style>

  								  </head>

  								  <body>

  								    <p>Hello World!</p>

  								    <p>Welcome to ChangRox.com!</p>

  								    <p>The site for extolling the virtues of Chang.</p>

  								  </body>

  								</html>

We've just created a CSS class called "crrt". In this case, crrt means, Chang Rox Red Text. The actual name of the class means nothing, I just made that up. The class could have just as easily been named "dingleberries" because with just a few exceptions, you can name the classes anything you want.

Note that unlike when you add declarations after an HTML selector (body, p, etc.), classes that you create MUST start with a dot (.).

CSS Class Implementation...

If you save/refresh right now, you won't see a bit of difference in the page. That's because we haven't done anything to implement the class that we just created. To remedy this, add the following to the first paragraph...

									<html>

  								  <head>

  								    <title>ChangRox.com</title>

  								    <style type="text/css">

  								      body {background-color: silver; font-family: Arial;}

  								      .crrt {color: red;}

  								    </style>

  								  </head>

  								  <body>

  								    <p class="crrt">Hello World!</p>

  								    <p>Welcome to ChangRox.com!</p>

  								    <p>The site for extolling the virtues of Chang.</p>

  								  </body>

  								</html>

Save/refresh and the first paragraph turns red. That's because by inserting class="crrt" into the first paragraph tag, we've instructed the browser to apply all of the style attributes of the class, crrt, to the tag.

Also note that the dot (.) is NOT used when implementing the class inside of HTML.

If you wanted to just effect a few words with the new class, you could insert it inline like this...

									<html>

  								  <head>

  								    <title>ChangRox.com</title>

  								    <style type="text/css">

  								      body {background-color: silver; font-family: Arial;}

  								      .crrt {color: red;}

  								    </style>

  								  </head>

  								  <body>

  								    <p class="crrt">Hello World!</p>

  								    <p>Welcome to <span class="crrt">ChangRox.com!</span></p>

  								    <p>The site for extolling the virtues of Chang.</p>

  								  </body>

  								</html>

Save/refresh and you'll see that only our spanned text is affected by the class, crrt, in the second paragraph.

The Usefulness of Classes...

Until now, we've seen pretty much the same things, but part of the usefulness of classes is that we can call to our classes from just about any HTML tag. If we had done this, <body class="crrt">, ALL of the text in the body of the page would have been red. If you had a bit of text that you had made bold by using...

my bold text here

...you could make it bold and red by doing this...

my bold text here

Now, like I said, we could make bold red text that way. But, what if we knew that we would be using bold red text multiple times in our page? Using multiple declarations is a much better way to do it. Click the link to learn how.