Using Adobe GoLive CS, Part 3 - Creating a Class Style
(Page 11 of 15 )
Defining a class style is not much different from defining an element style, but unlike an element style, which automatically adheres to every occurrence of a specific HTML tag in a page, a class style needs to be manually applied wherever it is desired. Class style names begin with a . and won't work properly without it. Let's try one. Click the New Class button at the bottom of the CSS Editor and change the name of the style to .bodyclass.
In the Font Properties area, choose White for the Color and Navy for the Back Color and 16px for the type Size. Hold down the Create New Font Family button and choose Trebuchet Set. The preview gives you a very clear idea of how this style will look (see Figure 9.83).
Figure 9.83 The New Font Family pop-up menu. Notice how the CSS Editor gives you a preview of your style as you edit properties.
Note - Whereas clicking the pop-up next to a color well provides a list from which to choose, clicking into the color well opens the Color palette, and clicking on the black triangle in the lower-right corner of the color well opens a temporary Swatches palette.
Now click the Margin and Padding Properties button, and under Padding type 5 into the All field. When you click out of the input field, the attribute will automatically fill in for all four sides (see Figure 9.84).
Note - The CSS Editor uses pixels by default in all the input fields. If you'd like to change to points, picas, inches, ems, percentage, or another unit, click the pop-up next to the field and make your selection.
Figure 9.84 You can define Margin and Padding values for any side, or for all of them. If all sides are to use the same setting, you need to define only the All field and the others will be filled in automatically.
Click the Border and Outline Properties button and make sure that Border is active. Type 2 into the All input field, and choose Lime from the color list and Solid from the border type pop-up (see Figure 9.85). Save your changes and go over to your HTML page. Type the words try it! and select them. In the toolbar, click the Apply CSS Style button. Holding your mouse over the check boxes invokes a style preview.
Moving the mouse across the check boxes allows you to see how the style will look applied as an inline style, a block style, a paragraph style, and so on. Click the inline style box to both apply the style and dismiss the Apply CSS Style window simultaneously, and then preview your page.
Figure 9.85 Add a border to finish off your style.
 This chapter is from Teach Yourself Adobe Creative Suite, by Mordy Golding (Sams, 2004, ISBN: 067232752X). Check it out at your favorite bookstore today.
Buy this book now. |
Next: External CSS >>
More Web Authoring Articles
More By Sams Publishing
