Index | Next

Typography

Within Dreamweaver, the best way to control text is by using a Cascading Style Sheet (CSS). This is a separate file linked to your page that controls presentation information.

Open index.htm. Make sure the Design Panel set is open and you can see the CSS Styles panel. Note the four buttons at the base of the window.

The first (left) button is the Attach Style Sheet button. click this button and browse to text.css to attach this style sheet to your page. Make sure 'Add as Link' is checked.

Now it's time to add a style. For the purposes of this exercise we will redefine the <h1> tag. Click on the button second from left. This brings up the new css style dialog.

 

Click on the Tag radio button and then select h1 from the (long) list of names in the pull-down menu. Click on OK. The CSS Style Definition dialog opens. This allows you to apply text attributes to the tag <h1>. Notice the categories box on the left-hand side. Choosing one of these categories will bring up more options.Make a range of selections and then click OK.

The modified h1 tag is now available. To use it, click in the preview window of index.htm and type a sentence. When you have finished click once within the sentence, then click the <p> tag in the tag inspector. Finally choose h1 from the Format box in the top left corner of the properties inspector to apply the style.

To edit the style further, highlight it in the CSS Styles panel, then click the third-left button (Edit Style) at the base of the panel.

In a similar fashion create styles for headings <h2> to <h6>, and the paragraph <p> tag.
Make sure you save text.css when you have finished.