FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

CSS Class

A few lessons ago, we learned about selectors. You may recall that selectors are the things we apply a style against. In our examples, our selectors were all HTML elements. For example, we decided to make the h1 element blue.

Now, that works well if you want all headings to be blue. But what if you only want some of your headings to be blue? Perhaps you want the color of your headings to reflect the section of the site that you're in.

Sounds like you need to use classes!

In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the element to the style by declaring a style for the class, then assigning that class to the element.

CSS Class Syntax

You declare a CSS class by using a dot (.) followed by the class name. You make up the class name yourself. After the class name you simply enter the properties/values that you want to assign to your class.


.class-name { property:value; }

If you want to use the same class name for multiple elements, but each with a different style, you can prefix the dot with the HTML element name.


html-element-name.class-name { property:value; }

CSS Class Example


<head>
<style type="text/css">
h1.css-section { color:#000099 }
p.css-section { color:#999999; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>

This results in:

CSS Class

CSS classes can be very useful

Cascading Rules of Classes

If you have already applied a style to an element, the element will first use those styles, then the ones defined in the class.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/tutorial/css_class.cfm">CSS Class</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites