Create a Website
CSS Tutorial
FREE Domain!
Any web hosting you subscribe with DotEasy will get you a FREE domain name registration.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE domain name today!
Home > CSS Tutorial
SSD Web Hosting with FREE Domain

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:


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)