Formatting Characters

This tutorial will illustrate formatting characters in Dreamweaver CS5.

Now that we have some text on a page, let's look at doing some basic formatting. We'll start with formatting individual characters.

On this page there are two sentences of text. Select one word in the second sentence by double clicking on it, or by using click and drag to select. The word is now highlighted.

Now look at the Properties Panel. (If you don't have the Properties Panel open, you should remember how to open it. Try the Window menu for a start ...)

It's important now to realize that the Properties Panel actually tells you about whatever you've got selected - in this case one word. The various pieces of information in the Properties Panel relate to that selected word.

The buttons on the left of the Properties Panel let you choose between formatting HTML tags and modifying CSS.

Select HTML on the left, and look at some of the options.

The Format box says Paragraph, which in this context means that currently normal paragraph formatting is in effect. Leave that as it is.

Class styles can be used for consistent formatting. Class at the moment says None, so leave that as it is.

Bold and Italic buttons let you apply those styles. Click both and see the effect. Note that the Bold and Italic buttons themselves become prominent to indicate that they are selected.

Now select CSS on the left. For reasons that will become apparent later, select <inline style> as the Targeted Rule.

Then change the Font to the sans-serif combination of Arial Black, Gadget, sans-serif.

Note the effect on the selected word.

And finally, select a larger font size and font color. Here the new selection is 36 point and the color is a strong red.

More Dreamweaver 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: formatting Characters k in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!