Make Your Website Pretty (and Consistent) with CSS Classes

A class is a line of code you add to an HTML element, giving it a specific look depending on what is defined in a style sheet.

Classes can be a more difficult concept to understand, but they can make your life so much easier when it comes to styling a webpage. They can give your page a consistent look without much work at all. Here’s how they work:

Let’s say you want a blue border around certain elements, but you don’t want to program it each time you make a new element. That’s where a class comes in. Classes can be applied to any element, such as a div or a paragraph tag, a link or an image. Let’s start with the style.

In the internal or linked style sheet (note: this DOES NOT work with inline style), we’ll create a class called makemeblue. All class names are preceded by a period in CSS.

<style>
.makemeblue {

}
</style>

Now, let’s add the style for the blue border.

<style>
.makemeblue {
 border: 1px blue solid;
}
</style>

Now that we have our style set, let’s add it to a few elements.

<div class="makemeblue">This is a DIV</div>
<a href="#" class="makemeblue">This is a LINK</a>
<img src="http://www.ayso.org/Libraries/home-images/RegionToolkitBtn.png" class="makemeblue" />

This is how they look!

This is a DIV

This is a LINK



Classes can make your life so much easier when it comes to building pages. All you have to do is add it at the end of your element and you’re good to go! If you need to make changes to your style, you only make the change once and it fixes everything with that tag on your website. Cool right? Add any questions in the comment section!