CoffeeCup - HTML Editor, Flash & Web Design Software

Style sheets open up a whole new world of customization for HTML. Style sheets give you control how characters, words, and lines. You can 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 changes to text on mouse over.

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 there are two options under the CSS button:

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

The Style Sheet Attribute Wizard is used if you have already created a style sheet, and just wish to create the style.

Once you have the wizard open, you can specify the format you want that particular style to take.

If you are editing a pre-existing 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 enter the style sheet wizard, select Apply Style Sheet to HTML tag H1, then use the wizard to select decoration=underline. From now on, any <H1> tags will automatically be underlined.

What if you only wanted some of your <H1> tags to be underlined? Applying a style sheet with the method described above will not work. Instead, we must define our own style sheets. To do this, enter the style sheet wizard, and select New Style Sheet Class. In this example, we have created two unique style sheets, named first and second:

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

Then, in your page, you could reference one or the other styles by referencing the tags like this:

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

Now you have different style called first & second that you can apply to your tags using a class="" decloration. If you leave out the class="" tags, the text would follow the normal rules of a <H1> tag.

If you want to learn more about the capabilities CSS, this tutorials: