Oct 11, 2015
by: Drew
CSS Classes About CSS Classes and its usefulness

In this short tutorial, I will explain a little about CSS Classes and how useful they are when formatting an HTML document. If you are familiar with CSS, then this tut is for you, otherwise, I would recommend reading a beginners guide to CSS before attempting to understand Classes. With that said, let's begin.

So what is a class? A class in CSS is basically a set of instructions to how text and/or objects in the HTML environment will look. You can control everything from simple text manipulations such as color, weight, etc, to positioning, visibility and dimensions. However, the true benefit of a class is the fact that anything that shares a class name will receive the same set of formatting. For example, you can have the first and last paragraphs in a body of text to have a font size of 20px, weight of bold and alignment to the right. One thing I should mention is that a class cannot be treated as an ID in regards to DHTML. Some people will try to use DOMs to control classes. Remember, an ID is an identifier for a single object, whereas, a class can be for more than one. Here's how you would write a class;

<p class="c_1"> Here is line one </p>
<span class="c_2"> This is my second line </span>
<div class="c_3"> And my last line </div>

If you notice, I pretty much can put a class name in any html tag. Also notice that I close each tag.....including the "p" tag. Yes, very important to do so. Besides, closing it as such makes it XHTML/XML compatible. Now that we've got the class names established, let's go ahead and toss in some formatting. In your head, or external source, you can do something like below;

.c_1 { color: #ff0000; font-weight: bold; font-size: 14px; }
.c_2 { color: #0000ff; text-decoration: underline; font-size: 19px; }
.c_3 { font-weight: bold; font-size: 26px; text-align: right; }

Notice how I reference each class name with a dot (period) preceding it, then I toss in my formatting. Now, anytime you decide to give a tag a class name, it will inherit the set of formatting for that particular name. Using the examples above, here's what it would look like;

Here is line one

This is my second line
And my last line

Below, I'm going to use the .c_2 class name and apply it to a "td" tag in a table. Remember, the above example uses a "p", "span" and "div" tags within a table.

Hello World!

Utilizing classes makes writing mark-up so much quicker, cleaner and less of a headache. Well, this ends this quick tutorial. Until next time...happy coding!

Copyright 2008 - 2022 All Rights Reserverd, Dream Designs.