CSS Syntax Basics

Now suppose you would like your style definition to apply to more than one HTML tag. You do this by separating each of the tags you want to use with a comma. Just like this:

h1,h2,h3,h4{color:red;}

This is an h1 header.

This is an h2 header.

This is an h3 header.

This is an h4 header.

This makes all your h1-h4 headers red. They will still maintain their default sizes and boldness, unless you change that too.

"That's great!", you say, "But what if I don't want all instances of a tag to appear with the styles I've declared?" Then you use the tag with a class or id selector. Like this:

h1.myColor{Color:red;}
for a class and this:
h1#myColor{Color:red;}
for an id.

The dot (.) declares it as a class. The myColor is the name of the class. The name can be anything you want it to be but should probably be something descriptive so you'll have some idea what it does. Since the class is associated with an HTML tag it is called a dependent class.

The pound sign (#) declares it as an id. Again give it a unique name. Here's something important to know about an id style, you should only use "1" instance of it. Since it's for a scripting language to refer to it, if more than one instance of it does occur (you use it in the id attribute of more than one tag), it will apply to only the first tag. Multiple uses will only confuse things and scripts may not work as desired.

Since you've applied a class or id to the selector it won't appear in any of the h1 tags unless you refer to it in that tag by doing this:

<h1 class="myColor">Text goes here.<h1>
for a class and this:
<h1 id="myColor">Text goes here.<h1>
for an id.

You can only apply it to h1 tags, it will not work with any others. Notice that you do not use the . or # when you go to use the class or id, this is only so the style sheet will know which type it is.

Again you say,"That's great!, but what if I want to use it willy nilly for any tag I wish?" Just leave off the HTML tag portion and start with the dot (.) or pound (#) sign. You can then apply it to any tag you wish. Just remember the id should be used only once so stick with the class unless you have reasons not to. Applying them to the tags with class="" or id="" attributes remains the same.

Syntax/Basics Page 1. Syntax/Basics Page 3.