Create and Apply Text Styles

This tutorial will show you how to create and apply text styles in Dreamweaver CS5.

One of the most important aspects of presentation of web sites is the use of styles. A style is actually a combination of attributes, and styles can be applied to text, to graphics, etc. The attributes include color, fonts, sizes and so on.

The use of styles not only provides the ability to achieve the right visual impact with your web sites, but it also makes it easier to achieve consistency and maintainability.

Dreamweaver includes a number of pre-built styles, but you can also create your own. Let's take a first look at styles. We'll start with this page again.

Text Styles

We have already seen some of the physical tags that we can apply to text. For example, if you select some text on the page and click on the Format menu then hover over Style, you will see the Style fly-out which you can use to choose an effect for the selected text.

Choose Underline and look at the effect.

However, this formatting applies only to the selected text, and what we also want to be able to do is to create and use styles that we can reuse again and again.

Nowadays the preferred approach to styles for most people involves the use of CSS (Cascading Style Sheets). We'll be looking at this in detail later, but for now let's look at an example of creating and using a CSS style.

First of all, select the Format menu then hover over CSS Styles to see the fly-out menu.

Select New... and you will see the New CSS Rule dialog.

Leave the Selector Type as Class. Enter a Selector Name. This should begin with a period character. I've used .Test1. Leave the Rule Definition Selection as (This document only).

Press OK. The CSS Rule definition for .Test1 dialog appears.

Now select the font and other settings for .Test1. I've selected a font and other settings that will make this really stand out so that you can see where it is being used. I don't think the resulting visual effect will be very pleasing, however.

Click OK, and the Test1 style (actually CSS Rule Test1) is applied to the paragraph containing the cursor.

Now that we have that CSS Rule, we can use it anywhere we want to. Place the cursor in the third paragraph, select the Format menu and hover over CSS Styles. Note that Test1 is now on the menu.

Select Test1 and see what happens. Then third paragraph now also has the style applied.

We'll be looking at CSS in more detail later.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Controlling Line Spacing in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!