|
Using the CSS Style Definition Dialog Box The Style Definition dialog box is a powerful tool that allows web designers to define styles easily and effectively for CSS. Dreamweaver offers the Style Definition dialog box as a comprehensive compilation of style definition opportunities for nearly every available CSS style. It provides eight categories of style definition, allowing for a staggering total of 71 different style options. The convenience and depth of this tool gives designers unprecedented discretion when choosing page designs. However, since CSS is a relatively new design tool, support for many of these CSS options is limited in older browsers.
|
Option |
Function |
| Font | Specify the font style or font family from the Font pull-down list. If your desired font is not listed, you can edit the list of available fonts. |
| Size | Select a size and measurement system for the specified font from the Size pull-down list or enter a value in the Size text box. |
| Weight | Specify the weight, or boldness, of text. You can
select predetermined settings from the Weight pull-down list,
or enter values manually. HINT: The weight of normal text is 400 and the weight of bold text is generally 700. |
| Style | Assign normal, oblique, or italic attributes to text. |
| Variant | Render text as small-caps, a font style that displays all letters in uppercase with capital letters appearing larger in size. |
| Line Height | Specify the leading, or height of the line, and its
system of measurement. HINT: To maintain sufficient white space between lines, line height is usually set a couple of points higher than the font size. For an overlapping effect, you can set the line height a couple of points lower than the font size. |
| Case | Render text uppercase, lowercase, or capitalized. |
| Color | Determine the text color by entering the color name, value, or choosing a color swatch from the color picker. |
| Decoration | Specify the decoration for text by checking any or all of the available categories: overline, underline, line-through, blink, or none. |
Background Options
Next to the options available in the Type category, the Background options are the most useful. CSS has liberated designers from the constraints that HTML imposes on the use of background images. Before CSS, background images were automatically tiled, giving designers little leverage when using background images. However, designers can now specify an image's location on the page, as well as whether or not the image repeats, creating a new dimension of possibilities for web design.
Option |
Function |
| Background Color | Determine the selection's background color by entering the color name or value, or choosing a color swatch from the color picker. |
| Background Image | Choose a background image from the Background Image pull-down list or click BROWSE... to select one. |
| Repeat | Select the tiling options for a background image. |
| Attachment | Specify whether the background image remains anchored in its original position or scrolls with the page. |
| Horizontal Position | Position the background image horizontally, in relation to style sheet text or graphics. |
| Vertical Position | Position the background image vertically, in relation to style sheet text or graphics. |
Tiling Options for Background Images
Option
Result
No repeat one instance of the image is displayed in the upper-left corner Repeat the background image is tiled vertically and horizontally Repeat-x the background image is tiled horizontally Repeat-y the background image is tiled vertically
Block Options
HTML restricts much of the opportunity for formatting page layout that print documents offer. However, you can space and align text manually with the Block category, remedying many of the formatting restrictions of HTML.
Option |
Function |
| Word Spacing | Specify the spacing between words by selecting a negative or positive value from the Word Spacing pull-down list. |
| Letter Spacing | Use positive or negative values to increase or decrease the spacing between the letters of a word. |
| Vertical Alignment | Specify the vertical alignment of text within the specific style. |
| Text Align | Specify text alignment by choosing left, right, center, or justified. |
| Text Indent | Indent a block of text by specifying a value and it system of measurement. |
| Whitespace | Determine the appearance of extra spaces and tabs, which are usually collapsed by default. Select pre to preserve all white space, and nowrap to wrap text when a <br> tag is present. |
| Display | Specify how a tag is represented by selecting an option from the Display pull-down list. |
Box Option
The Box category's primary function is similar to that of tables in that it is used to define the spacing and placement of elements, usually images, on a page.
Option |
Function |
| Width | Specify the element's width. |
| Height | Specify the element's height. |
| Float | Place the element on the right or left margin. |
| Clear | Keep a layer from appearing on a selected side of an element. |
| Padding | Designate the amount of space separating the element and the border or margin. You can designate padding values for the left, right, top and bottom independently. |
| Margin | Control the amount of space between the borders of the element and other elements on the page by designating values for the top, right, bottom, or left. |