Home > Articles > Graphics & Web Design > Dreamweaver & Flash

  • Print
  • + Share This
This chapter is from the book

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).

  • + Share This
  • 🔖 Save To Your Account