First time visitor? The tutorials start here.

Styling Class Names with CSS

Previously, you learned how to style xHTML tags with CSS, based on their tag name. In my last article, you learned how to add class names to xHTML tags. Now, you will learn how to target and style those class names with CSS.

As a refresher, if you want to style all of the paragraphs on a page, you would target it with a p, because the tag for a paragraph is <p>.

For example:

p { margin-bottom: 1em; }

To target a class, you simply put a dot before the class name. Americans would call this a period; others might call it a full-stop.

If the class name is “intro,” you would target it with .intro, like so:

.intro { font-weight: bold; }

That’s pretty much the bottom line. The list of attributes you can use for classes is exactly the same as the attributes you can use for xHTML tags, and I’ll get into those attributes soon. For now, let’s style the classes that you added to your practice page:

Practice

Open practice.htm in your browser. You will not need to open this page in the editor this time, because we are only styling what is already there.

Open /styles/style.css in Crimson Editor.

At the end of your css file, add this:

.second {
	text-indent: 0;
	color: #000000;
}

Save that file, then refresh practice.htm in your browser. The paragraph is no longer indented, and the text is black. Notice how you have just overridden the indentation and color that you gave to your <p> tags. The same thing also happened when you defined “intro”. This is the “Cascading” in “Cascading Style Sheets” (CSS), which I’ll get into soon.

For now, add this to your CSS:

.highlight { 
    background-color: #ffff00;
    color: #000000;
}

Save that, then refresh your browser. Now, every place where you added <span> tags with the class of “highlight” is highlighted.

Now for the real test. Let’s see if you can style the span tags that you created your own class name for, defining the font’s color to be #0000ff and giving it a font-weight of bold.

This might be a good time to browse around some of the CSS properties and play around with some of them in your practice files.

Next, I’ll introduce you to another xHTML tag, which is used mainly for layout: The xHTML <div> tag.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.