How To Define A CSS Class Style - The Class Selector

Guest Author - Diane Cipollo

There will be times when the built-in CSS styles are not exactly what you need. When this happens, you can create your own CSS rule with the class command. This CSS rule will be independent of any one HTML tag which allows you to use it on any HTML tag. In fact it can be applied to multiple HTML tags on a web page which makes it very versatile. You can see how this might be useful for streamlining your code.

The first step in creating a CSS class is to give it a unique name. Unlike the HTML selector which is derived from a part of an HTML tag, you can give the class command any name you want. You can use any letter or number combination to create this unique name. Then, as usual, this unique class name is followed by the CSS definitions. Let's take a look at an example of a CSS style that I have created to control the copyright text on a web page.

.class_name {definition; definition;}

.copyright_style {font-face: arial; font-size: 10px;}

As you can see from the example above, the CSS class begins with the unique name (copyright_style) and before the class name there is a period. To the right of the name are the definition(s) enclosed within curly brackets and each definition is separated by a semicolon.

You can place this CSS class inside the <style> tags in the head section of a web page or in an external CSS file. It will work throughout the entire web page. When you want to apply this CSS class to any HTML tag, you will use the class attribute within the HTML tag. The value for the class attribute is the unique name given to your CSS class. (class="value") In the example below I have applied it to the <p> tag. Notice that I have not included the period before the class name.