Style sheets open up a whole new world of customization for HTML. They give you control over characters, words, and lines, and allow you to change things such as the alignment of text, margins, padding, color, and font style. Once you get the hang of it, you can apply fancy tricks to your text, such as mouseover effects.

If you're ready to take the plunge into CSS, CoffeeCup HTML Editor is ready to make things as easy as possible.

You will notice that there are two options under the CSS button located on the Code Editor Toolbar: Style Sheet Wizard and Style Sheet Attribute Wizard.

The Style Sheet Wizard can be used for creating style sheet tags from scratch or editing existing style sheets. If this is your first time creating style sheets, use this option.

Use the Style Sheet Attribute Wizard if you have already created a style sheet and just wish to create a style. Once you have the wizard open, you can specify the format you want that particular style to take. If you are editing a preexisting tag, you don't have to do anything special — just reference the tag as you normally would, and the style you have specified will be applied.

For example, what if you wanted all <h1> tags to be underlined? To do this, you would open the Style Sheet wizard, select the radio button next to Apply Style Sheet to HTML Tag, and then choose H1 from the drop-down menu. Next, click OK. In the window that appears next, select underline from the Decoration drop-down menu.

And that's it! From now on, all your <h1> tags will automatically be underlined.

But what if you only wanted some of your <h1> tags to have a special appearance? Applying a style sheet with the method described above won't work. Instead, we must define our own style. To do this, enter the Style Sheet Wizard again, and then select the radio button next to New Style Sheet Class. Click OK, and in the window that appears, modify the style to fit your preferences. For this example, we will create two unique style sheets, named first and second. first is blue Algerian text, and second is red Britannic Bold text.

<!--
.first{font-family: Algerian; color: #0000FF}
.second{font-family: Britannic Bold; color: #FF0000;}
-->

Once you've exited the Style Sheet Wizard, you can reference one or both of these styles in your page using a class="" declaration, like so:

<h1 class="first">Your text here</h1>
<h1 class="second">Your text here</h1>

If you left out the class="" declaration, the text would follow the normal rules of a <h1> tag.

If you want to learn more about the capabilities of CSS, check out this tutorial at W3Schools: CSS Tutorial