Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > CSS Tutorial
$0 Web Hosting

The class selector allows you to style items within the same (X)HTML element differently. This is similar to inline styles, except with class the style can be overwritten by changing stylesheets. You can use the same class selector over and over again within an (X)HTML file.

For example, let’s define the sentence “This is an example” with the following,

The Code

p {
font-size: small;
color: #333333;
}

Now, lets change the word “example” to orange bold text, while leaving the rest of the sentence untouched. We would do the following to the (X)HTML file.

The Code

<p>This is an <span class=”orangeboldtext”>example</span>.</p>

Then in the CSS file, we would add this style selector:

The Code

.orangeboldtext {
font-size: small;
color: #FF5A00;
font-weight: bold;
}

The final result would look like this:

Output

This is an example.

Note that a class selector begins with a (.) period.

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)