Classes

Sometimes you will want blocks of content to look unique, and consistent. For instance, you might wish to have a <p> element, and a separate <p2> element that is slightly different. Unfortunately, the <p2> element doesn't exist, and won't exist, unless you create it.

You already have experience redefining existing selectors in an HTML document. It's not much of a stretch to define your own unique selector using class. All you have to do is include a period before the selector name, then follow with the standard property and value declarations. The basic syntax for creating a unique class looks like this:

There are a few simple naming conventions you should follow when making up your own selector names. First of all, do not start the with a number because certain browsers (Firefox) will ignore the new selector. Also, you should try to assign real English names that relate to the intended purpose of the new selector.

For instance, the notes at the end of the document should have a unique visual format which sets them apart. Therefore, it makes sense to name a custom selector notes. This is how it would look added to the style section of the HTML document:

Now let's add some properties that will make the "notes" section unique, such as a slightly smaller font size. We are going to use the em unit we picked up in the last exercise so our page continues to scale properly. Since the paragraphs are set at 1em, we should set the notes section to be .8em:

That's it, now the notes class "exists" exists in your document. Now turn your attention to the body text, ALL the way down to the Notes section at the end of the document, so you can take advantage of this new class. There are a few different ways to take apply a class. The basic syntax of class used to modify an existing tag, looks like this:

So, If we want the notes selector to modify the paragraph content, our markup looks like this:

That's right, all you need to do is add class="notes" into every paragraph you want to modify. When you finish, the project will look something like this, depending on the typeface and color choices you have made: