Exploring Style Settings
The CSS Rule Definition dialog box has eight categories with numerous settings you can use to define a style. As you are defining a style, select the panels to gain access to the settings for each category. Any settings that you do not need to set should be left alone. The following categories are available:
- Type—This category defines type attributes, such as font and font size. These style settings can be applied to text or to objects that contain text.
- Background—This category defines background attributes, such as color and image. These style settings can be applied to objects, such as layers and tables, where you can set a background.
- Block—This category defines type attributes for paragraphs.
- Box—This category defines attributes, such as margin size, that are applied to box objects, such as layers and tables.
- Border—This category defines attributes that are applied to objects that have borders, such as layers and tables.
- List—This category defines list attributes, such as bullet type.
- Positioning—This category defines layer attributes, such as visibility and z-index. See Hour 17, "Using Dynamic HTML and AP Divs," for an explanation of layers and layer attributes.
- Extensions—This category defines miscellaneous attributes that are either future enhancements or for Internet Explorer only.
Table 6.1 lists the style settings available in the various categories of the CSS Rule Definition dialog box.
Table 6.1. Style Settings in the CSS Rule Definition Dialog Box
Setting |
Description |
|
Type Category |
||
Font |
Sets the font family. |
|
Size |
Sets the font size and unit of measurement. |
|
Style |
Specifies the font as normal, italic, or oblique. |
|
Line Height |
Sets the height of the line of text and the unit of measurement. This setting is traditionally called leading. It is added before the line. |
|
Decoration |
Adds an underline, an overline, or a line through the text. You can set the text decoration to blink, or remove the decoration by choosing None (to remove the underline on hyperlinks, for instance). |
|
Weight |
Adds an amount of boldface to text. Regular bold is equal to 700 and normal, nonbold text is equal to 400. Many browsers only display 400, 700, and 900. |
|
Variant |
Sets the small caps variant on text. This displays with all the lowercase letters as uppercase letters but slightly smaller than the actual uppercase letters. |
|
Case |
Capitalizes the first letter of each word or sets all the text to lowercase or uppercase. |
|
Color |
Sets the text color. |
|
Background Category |
||
Background Color |
Sets a background color for an element. You can use this attribute to set the background color for the body (the entire web page), a table, a paragraph, or any element on the web page. |
|
Background Image |
Sets a background image for an object. |
|
Repeat |
Controls how the background image repeats. No Repeat displays the image only once; Repeat tiles the image horizontally and vertically; Repeat-x tiles the image only horizontally; and Repeat-y tiles the image only vertically. |
|
Attachment |
Sets whether the background image scrolls with the content or is fixed in its original position. |
|
Horizontal Position |
Specifies the initial horizontal position of the background image. |
|
Vertical Position |
Specifies the initial vertical position of the background image. |
|
Block Category |
||
Word Spacing |
Controls the space around words. Negative values reduce the space between words, whereas positive values increase the space. |
|
Letter Spacing |
Adds space between letters. Negative values reduce the space between letters, whereas positive values increase the space. |
|
Vertical Alignment |
Sets the alignment of the object relative to objects around it (these are the same alignment settings discussed in Hour 8, "Displaying Images"). |
|
Text Align |
Aligns text within a container such as a paragraph, a table cell, or the entire web page. Choices are Left, Right, Center, and Justify. |
|
Text Indent |
Sets how far the first line is indented. Negative values create an outdent. |
|
Whitespace |
Sets how whitespace appears in an object; by default, white space is disregarding when displaying HTML. Normal disregards whitespace, Pre displays all the whitespace, and Nowrap sets the text to wrap only when a break tag (<br>) is encountered. |
|
Display |
Sets how and whether an element displays. The None setting, for instance, hides the item on the page; the Block setting displays the element with a line break before and after; and the Inline setting displays the element with no line breaks. The None setting is useful when creating dynamic style sheets. For instance, creating a style sheet for a printable web page that sets buttons and unnecessary interface elements to None so that they are not printed. You'll learn more about this in Hour 14. |
|
Box Category |
||
Width |
Sets the width of an element. |
|
Height |
Sets the height of an element. |
|
Float |
Sets whether the element floats beside other elements and whether it floats to the left or the right of the other element. |
|
Clear |
Clears floating so that elements do not float around another element. |
|
Padding |
Sets the amount of space between the element and its border (or margin). |
|
Margin |
Sets the amount of space between the border of an element and other elements. |
|
Border Category |
||
Style |
Sets the style appearance of the borders. The choices are Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, and None (for no border). If the browser doesn't support one of the styles, it displays as solid. |
|
Width |
Sets the border thickness. You can set the widths of the top, right, bottom, and left borders separately. |
|
Color |
Sets the border color. You can set the colors of the top, right, bottom, and left borders separately. |
|
List Category |
||
Type |
Sets the appearance of the lists. The choices are Disc, Circle, Square, Decimal, Lower-Roman, Upper-Roman, Lower-Alpha, Upper-Alpha, and None. |
|
Bullet Image |
Sets a custom image for bullets. |
|
Position |
Sets whether the list content wraps to the indent (Outside) or to the margin (Inside). |
|
Positioning Category |
||
Type |
Sets how an element is positioned relative to the page. The choices are Relative (at the coordinates relative to its position on the page), Absolute (at the exact coordinates), and Static (at its place in the document flow). |
|
Width |
Sets the width of a container. |
|
Height |
Sets the height of a container. |
|
Visibility |
Sets the container's visibility. The choices are Inherit, Visible, and Hidden. You'll learn more about the attributes in this category in Hour 17. |
|
Z-Index |
Sets the container's z-index (that is, its stacking order). |
|
Overflow |
Sets what happens when the container's contents exceed its size. The choices are Visible, Hidden, Scroll, and Auto. |
|
Placement |
Sets the left, top, width, and height attributes for a container. These settings enable a container to be placed at an exact pixel position on the web page. The pixel position can sometimes vary a bit from browser to browser. |
|
Clip |
Sets the top, bottom, left, and right clipping attributes for a container. Clipping defines how much of an element is visible. |
|
Extensions Category |
||
Page Break |
Forces a page break during printing, either before or after the object. Be careful with this property; use it only when you absolutely must control where the page breaks for printing. |
|
Cursor |
Changes the cursor when it is placed over the object. This attribute is supported only in modern browsers and can confuse users, so use it only when it is necessary. |
|
Filter |
Applies special effects, including page transitions, opacity, and blurs, to objects. The filters included with Dreamweaver are supported only in Internet Explorer 4.0 and later. See msdn.microsoft.com/workshop/Author/filter/filters.asp for more information. You can hand-code filters for other browsers (check out www.mandarindesign.com/opacity.html). |