I've got class, kinda

I received an e-mail a while back from somebody asking the difference between the class and id selectors used in Style Sheets. If you've done much tinkering with your blog's layout you've definitely seen them in use. My initial reply was something you'd expect from an engineer, it was factually correct yet it didn't give them any useful information. So I dug a bit more and found a reference for Cascading Style Sheet Syntax on W3Schools Online Web Tutorials (a great spot for Style Sheet and other coding help).

The explanation in the extended entry was grabbed directly, without modification, from the W3School's CSS Syntax Tutorial.

Also posted at The Alliance

The class Selector

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

<p class="right" class="center">
This is a paragraph.
</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p> 

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

---

The id Selector
With the id selector you can define the same style for different HTML elements. The style rule below will match any element that has an id attribute with a value of "green":

#green {color: green}

The rule above will match both the h1 and the p element:

<h1 id="green">Some text</h1>
<p id="green">Some text</p>

The style rule below will match a p element that has an id with a value of "para1":

p#para1
{
text-align: center;
color: red
}

The style rule below will match any p element that has an id attribute with
a value of "green":

p#green {color: green}

The rule above will not match an h1 element:

<h1 id="green">Some text</h1>

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

---

CSS Comments

You can insert comments into CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the
browser. A CSS comment begins with "/*", and ends with "*/", like this:

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

If you have any questions about Cascading Style Sheets or HTML please drop us (basil or phin) a line and we'll see if we can't get the questions answered.