10.5 Defining a Style

Finally, we come to defining a style. By now, hopefully you understand the context in which you define and apply CSS styles. In the New Style dialog box (see Figure 10-5), click the OK button after choosing the type of CSS style to create and deciding where to store it. This step opens the Style Definition dialog box. Figure 10-7 shows one of the eight panes of this dialog box. Its title becomes "Style definition for stylename " if you edit a style that is stored internally; it becomes "Style definition for stylename in stylesheet.css " if you edit a style stored in an external stylesheet.

10.5.1 The Style Definition Dialog Box

Let's see how to set the attributes for a new style that you are defining. To define a new style, use Text figs/u2192.gif CSS Styles figs/u2192.gif New Style (or the New Style button in the CSS Styles panel) to open the New Style dialog box. Once you've made your selections in that dialog box (see Figure 10-5), click the OK button to reach the Style Definition dialog box discussed here. Double-clicking an existing style also brings you directly here (allowing you to edit an existing style's attributes).

The Style Definition dialog box contains 8 categories through which you can customize roughly 60 attributes for a style. You'll probably use only a small fraction for any single style rule. When you're done defining the style's properties, click the OK button to save your style (the choice of where to save it and what to call it was made earlier in the New Style dialog box). The Style Definition dialog box doesn't include support for all CSS2 attributes. See Section 10.7.2 later in this chapter for information on adding attributes by hand.

Defining (creating) a style is not the same as applying (using) it. Although we've already alluded to how styles are applied, we'll cover it in more detail later.

Dreamweaver can't display many of the properties that it lets you set for a style (these properties are indicated by an asterisk in the various panes of the Style Definition dialog box). Use the Preview in Browser option (F12) to test your pages. Each of the eight categories is discussed in the following sections.

Default values are shown in constant-width bold. Italicized values, such as length , are placeholders. Recognized units are px, pts, cm, mm, in, em, ex, and %, such as 10px, 12pt, 1cm, 10mm, 2em, 0.5in, or 10%.

Options for which you can select one of multiple choices are shown separated by a vertical bar ( ) and enclosed in square brackets ([ ]). Double vertical bars ( ) indicate a non-exclusive choice. Remember that not all browsers support all properties; some browsers may support a property but not support all attribute values specified in the CSS standard. Dreamweaver shows you only a subset of the attributes available in the CSS1 and CSS2 standards. Other CSS1 and CSS2 attributes can be entered by hand. CSS Type properties category

The properties in the Type category of the Style Definition dialog box affect text appearance. The options are shown in Figure 10-7 and summarized in Table 10-3, where the defaults are shown in bold.

Figure 10-7. Style Definition: Type properties
Table 10-3. CSS Type properties


CSS code


font: [ font-family ] caption icon menu messagebox smallcaption statusbar window document workspace desktop info dialog button pull-down-menu list field inherit ]


font-size: [ 9 10 12 14 16 18 24 36 xx-small x-small small medium large x-large xx-large smaller larger length percentage inherit ]


font-style: [ normal italic oblique inherit]

Line Height

line-height: [ normal number length percentage inherit]


font-weight: [ normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit]


font-variant: [ normal small-caps inherit]


text-transform: [capitalize uppercase lowercase none inherit]


color: [ rgbvalue colorname ]


text-decoration: [ none [underline overline line-through blink] inherit]

See Section 10.8.3 later in this chapter for details on using the @font-face directive to ensure that a font is available on the user 's system. CSS Background properties category

The properties in the Background category of the Style Definition dialog box affect the appearance of the background of HTML objects, including the document itself, text, images, layers , and tables. The options are shown in Figure 10-8 and summarized in Table 10-4.

Figure 10-8. Style Definition: Background properties
Table 10-4. CSS Background properties


CSS code

Background Color

background-color : [ rgbvalue colorname ]

Background Image

background-image: [ url none ]


background-repeat : [no-repeat repeat-x repeat-y repeat ]


background-attachment : [fixed scroll ]

Horizontal and Vertical Position

background-position: [ percentage length ] [ top center bottom] [ left center right] inherit]

Example 10-4 defines a style that sets the background image of the page and prevents it from scrolling when the page content scrolls (although the background-attachment property doesn't work in NN4). It also prevents the image from being tiled and gives much greater control than the background attribute of HTML <body> tag (the latter can be set under Modify figs/u2192.gif Page Properties).

Example 10-4. Type selector defining Background properties
 body { background-attachment: fixed;         background-color: #FFFFFF;         background-image: url(/books/2/363/1/html/2/layout_r3_c1.gif);         background-repeat: no-repeat;         background-position: left bottom} CSS Block properties category

The properties in the Block category of the Style Definition dialog box affect the appearance of block objects, such as images, tables, div elements, and paragraph text. The options are shown in Figure 10-9 and summarized in Table 10-5.

Figure 10-9. Style Definition: Block properties
Table 10-5. CSS Block properties


CSS code

Word Spacing

word-spacing: [ normal length inherit]

Letter Spacing (kerning)

letter-spacing : [ normal length percentage inherit]

Vertical Alignment

vertical-align : [baseline sub super top text-top middle bottom text-bottom percentage length inherit]

Text Align

text-align: [ left right center justify string inherit]

Text Indent

text-indent: [ length percentage inherit]


white-space : [ normal pre nowrap inherit]

Many browsers do not support letter spacing, and Internet Explorer ignores the whitespace attribute. When using the sub and super options for the vertical-align attribute, reduce the font size in the Type properties pane of this dialog box. CSS Box properties category

The properties in the Box category of the Style Definition dialog box affect the margins and padding of block objects. The options are shown in Figure 10-10 and summarized in Table 10-6.

Figure 10-10. Style Definition: Box properties

The margin properties define the spacing between the borders of two adjacent objects, such as an image on a page. The padding properties define the spacing immediately surrounding an object, such as a table cell . The border options, set in the Border properties pane, define the spacing between an object and its own borders, such as the borders of a table. The default padding is zero for most objects, but margins should be set explicitly to zero if desired because the default margins are usually nonzero. However, most spacing options don't show up in Dreamweaver, so be sure to preview your changes in a browser.

Table 10-6. CSS Box properties


CSS code


width: [ length percentage auto inherit]


height: [ length percentage auto inherit]


float: [left right none inherit]


clear: [ none left right both inherit]

Padding: Top

padding-top: [ width inherit]

Padding: Right

padding-right: [ width inherit]

Padding: Bottom

padding-bottom: [ width inherit]

Padding: Left

padding-left: [ width inherit]

Margin: Top

margin-top: [ width inherit]

Margin: Right

margin-right: [ width inherit]

Margin: Bottom

margin-bottom: [ width inherit]

Margin: Left

margin-left: [ width inherit] CSS Border properties category

The properties in the Border category of the Style Definition dialog box affect the border color and spacing of objects such as images, tables, paragraphs, and layers. The options are shown in Figure 10-11 and summarized in Table 10-7.

Figure 10-11. Style Definition: Border properties

The default border spacing is 1 for most objects. The margin and padding spacing are set in the Box properties pane.

Table 10-7. CSS Border properties


CSS code

Top Width

Border-top-width: [medium thin thick length ]

Right Width

Border-right-width: [medium thin thick length ]

Bottom Width

Border-bottom-width: [medium thin thick length ]

Left Width

Border-left-width: [medium thin thick length ]


Border-color: [ color transparent inherit]


Border-style: [none hidden dotted dashed solid double grooved ridge inset outset inherit] CSS List properties category

The properties in the List category of the Style Definition dialog box affect the appearance of formatted lists, including bullet placement and appearance. The options are shown in Figure 10-12 and summarized in Table 10-8.

Figure 10-12. Style Definition: List properties
Table 10-8. CSS List properties


CSS code


list-style-type: [disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none inherit]

Bullet Image

list-style-image: [ url none inherit]


list-style-position: [inside outside inherit]

NN4 doesn't support the list-style-image attribute. Dreamweaver doesn't display the full spectrum of values (there are about 50!) available for the list-style-type property in CSS2. CSS Positioning properties category

The properties in the Positioning category of the Style Definition dialog box affect the positioning, visibility, and overflow settings of objects. The options are shown in Figure 10-13 and summarized in Table 10-9. These options are a very cumbersome way of defining layers. You're better off using Dreamweaver's visual tools for this purpose, as discussed in Chapter 4.

Figure 10-13. Style Definition: Positioning properties
Table 10-9. CSS Positioning properties


CSS code


position: [static relative absolute inherit]


visibility: [inherit visible collapse hidden]


z-index: [auto integer inherit ]


overflow: [ visible hidden scroll auto inherit]

Placement: Left

left: [ length percentage ]

Placement: Top

top: [ length percentage ]

Placement: Width

width: [ length percentage ]

Placement: Height

height: [ length percentage ]

Clip: Top Right Bottom Left

clip: [rect ( t , r , b , l ) auto inherit]

CSS supports fixed as another possible value for the position attribute, but that value is not available in this dialog box. CSS Extensions properties category

The properties in the Extensions category of the Style Definition dialog box affect the way a document appears within a browser. The options are shown in Figure 10-14 and summarized in Table 10-10.

Figure 10-14. Style Definition: Extensions properties
Table 10-10. CSS Extensions properties


CSS code

Page Break: Before

page-break-before: [ auto always avoid left right inherit]

Page Break: After

page-break-after: [ auto always avoid left right inherit]


cursor: [ auto crosshair default default e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize e-resize w-resize text wait help inherit]


filter: [alpha blendtrans blur chroma dropshadow fliph flipv glow gray invert light mask revealtrans shadow wave xray]

The page-break-before and page-break-after properties affect page breaking when a web page is printed, but no current browser supports either property. The filter property is supported by IE for Windows only. The cursor property is supported in NN6, IE5, and Opera 5 (and later versions).

Dreamweaver in a Nutshell
Dreamweaver in a Nutshell
Year: 2005
Pages: 208

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net