Transforming your text to uppercase is just a style in the HTML, your original text still has the standard formatting. Now you’ll add some space between all the letters. This helps your headings stand out and is a lot faster than retyping these headings by hand. Press Apply, and you will see your two headings, Spring Events and Rent Our Facility!, transform to uppercase. In the Text-transform section, click on the menu, and from the list, choose uppercase. Now you’ll style your Heading 2 element.ĥ In the CSS Styles panel, double-click the h2 rule. Press OK, and you now have extra space between your list items. In the field for line-height, type 150 then from the drop-down menu to the right, select percentage.
The CSS Rule definition dialog box appears. However, you will add extra space between the lines to make the list stand out from the rest of the page.Ĥ In the CSS Styles panel, double-click on the ul rule.
If you want to make this list appear the same, you could always apply the same value of line-height. This is because the line-height property applies solely to paragraphs, not lists. Notice that the list under Spring Events did not change. Press OK.Ĭhanging the line-height value of a paragraph to a percentage is more flexible than using pixels.
DREAMWEAVER TUTS PLUS
There will always be the height of the line plus 20 percent extra, no matter what the font-size is. 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. A more flexible way to assign line-height is to use a percentage.ģ From Line-height drop-down menu to the right of the text field, choose percent (%). 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. However, a problem may arise if you change the font-size. Extra line-height can often make your text more readable, so it is great that you have this option in CSS. Press Apply, and you will see the space between your paragraph lines increase. Line-height is the same thing as leading.Ģ In the Line-height field, type 20 the value is automatically set for pixels. If you have a print background, you may be familiar with leading, which is the amount of space between the lines in a paragraph.
You will now override the default line-height for your paragraphs. In this exercise, you will work with the line spacing of your paragraphs and lists, and the letter spacing of your headings.ġ In the CSS panel, double-click on the rule for p (paragraph) to open the CSS Rule definition dialog box. Given this limitation, you can use some of the properties in CSS to give your text a distinctive look. There is a small set of fonts that designers can use that are essentially guaranteed to be on all users’ systems. 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. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.Īdobe Dreamweaver Tutorial: Advanced text formatting with CSS in Dreamweaver It is the fourth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. This tutorial provides you with a foundation for working with Adobe Dreamweaver text formatting.
0 kommentar(er)
