› Dreamweaver tutorial: Advanced text formatting with CSS in Dreamweaver

Dreamweaver tutorial: Advanced text formatting with CSS in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Using contextual and pseudo-class selectors
  • Styling hyperlinks

This tutorial provides you with a foundation for working with Adobe Dreamweaver text formatting. It is the fourth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Advanced text formatting with CSS in Dreamweaver

Text on the web is necessarily limited due to the fact that designers cannot assume that fonts they choose in Dreamweaver will be available to the user. There is a small set of fonts that designers can use that are essentially guaranteed to be on all users’ systems. Given this limitation, you can use some of the properties in CSS to give your text a distinctive look. In this exercise, you will work with the line spacing of your paragraphs and lists, and the letter spacing of your headings.

1 In the CSS panel, double-click on the rule for p (paragraph) to open the CSS Rule definition dialog box. You will now override the default line-height for your paragraphs. If you have a print background, you may be familiar with leading, which is the amount of space between the lines in a paragraph. Line-height is the same thing as leading.

2 In the Line-height field, type 20; the value is automatically set for pixels. Press Apply, and you will see the space between your paragraph lines increase. Extra line-height can often make your text more readable, so it is great that you have this option in CSS. However, a problem may arise if you change the font-size. For example, setting the fixed value of 20 pixels looks good with 14-pixel type, but what if you were to later change the font-size of your paragraph? The 20-pixel line-height would look strange. A more flexible way to assign line-height is to use a percentage.

3 From Line-height drop-down menu to the right of the text field, choose percent (%). Change the value from 20 to 120, and press Apply, you won’t actually see a dramatic difference because the end result is similar, but by assigning line-height to 120 percent, your initial font-size isn’t as important. There will always be the height of the line plus 20 percent extra, no matter what the font-size is. Press OK.

Changing the line-height value of a paragraph to a percentage is more flexible than using pixels.

Notice that the list under Spring Events did not change. This is because the line-height property applies solely to paragraphs, not lists. If you want to make this list appear the same, you could always apply the same value of line-height. However, you will add extra space between the lines to make the list stand out from the rest of the page.

4 In the CSS Styles panel, double-click on the ul rule. The CSS Rule definition dialog box appears. In the field for line-height, type 150; then from the drop-down menu to the right, select percentage. Press OK, and you now have extra space between your list items. Now you’ll style your Heading 2 element.

5 In the CSS Styles panel, double-click the h2 rule. In the Text-transform section, click on the menu, and from the list, choose uppercase. Press Apply, and you will see your two headings, Spring Events and Rent Our Facility!, transform to uppercase. This helps your headings stand out and is a lot faster than retyping these headings by hand. Now you’ll add some space between all the letters.

Note

Transforming your text to uppercase is just a style; in the HTML, your original text still has the standard formatting. One of the few times this might be an issue is if your web page is being viewed without a style sheet; many cell phones and PDAs do not fully support style sheets (or use them at all), and so your text would appear lowercase as it is in the HTML.

6 Select the Block category in the CSS Rule definition dialog box. Block styles generally control the way text is displayed in the browser. In the field for Letter-spacing, type 5; then choose px from the drop-down menu to the right. Press Apply, and the two headings are extended. Each letter pair has 5 pixels of space between them. Press OK. When used well, letter-spacing can make your headings more readable and unique.

Adding letter-spacing and uppercasing to your
headings can make them stand out.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.