- Creating and Applying a Custom Style
- Exploring Style Settings
- Redefining the Heading 3 <h3> Tag
- Positioning a Layer with a Style
- Creating a Hyperlink Rollover
- Creating an External Style Sheet
- Transforming the Property Inspector
- Converting Styles to HTML Markup (<font> Tags)
- Saving HTML Markup as an HTML Style
- Summary
- Q&A
- Workshop
Exploring Style Settings
The Style definition dialog box has eight panels 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 that category. Any settings that you do not need to set should be left alone. The following categories are available:
The Type panel defines type attributes, such as font and font size. These style settings can be applied to text or to objects that contain text.
The Background panel defines background attributes, such as color or image. These style settings can be applied to objects, such as layers and tables, where you can set a background.
The Block panel defines type attributes for paragraphs.
The Box panel defines attributes, such as margin size, that are applied to an object.
The Border panel defines attributes that are applied to objects that have borders, such as layers and tables.
The List panel defines list attributes, such as bullet type.
The Positioning panel defines layer attributes, such as visibility and z-index.
The Extensions panel defines miscellaneous attributes that are either future enhancements or for Internet Explorer only.
Table 15.1 lists the style settings available in the various categories of the Style definition dialog box.
Table 15.1 Style Settings in the Style Definition Dialog Box
Setting |
Description |
Type Panel |
|
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, overline, or line through the text. |
Weight |
Adds an amount of boldface to text. Regular bold is equal to 700. |
Variant |
Sets the small caps variant on text. |
Case |
Capitalizes the first letter of each word or sets all the text to lowercase or uppercase. |
Color |
Sets the text color. |
Background Panel |
|
Background Color |
Sets the background color for an object. |
Background Image |
Sets a background image for an object. |
Repeat |
Controls how the background image gets repeated. 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 |
The initial horizontal position of the background image. |
Vertical Position |
The initial vertical position of the background image. |
Block Panel |
|
Word Spacing |
Adds space around words. Use negative values to reduce the space between words. |
Letter Spacing |
Adds space between letters. Use negative values to reduce space between letters. |
Vertical Alignment |
Sets the alignment of the object relative to objects around it like the Alignment settings discussed in the section on images. |
Text Align |
Aligns text within an object. Choices are left, right, center, and justify. |
Text Indent |
Sets how far the first line is indented. Use negative values to set an outdent. |
Whitespace |
Sets how whitespace will appear in an object. Normal collapses whitespace, pre displays all the whitespace, and nowrap sets the text to wrap only when a <br> tag is encountered. |
Box Panel |
|
Width |
Sets the width of an object. |
Height |
Sets the height of an object. |
Float |
Sets on which side other objects (such as text) will float around the object. |
Clear |
Clears the floating so that objects (such as text) do not float around another object. |
Padding |
Sets the amount of space between the object and its border (or margin). |
Margin |
Sets the amount of space between the border of an object and other objects. |
Border Panel |
|
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. |
Style |
Sets the style appearance of the borders. The choices are dotted, dashed, solid, double, groove, ridge, inset, and outset. |
List Panel |
|
Type |
Sets the appearance of the bullets. The choices are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha. |
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 Panel |
|
Type |
Sets how the layer is positioned. The choices are relative (at the coordinates relative to its position), absolute (at the exact coordinates), and static (at its place in the document flow). |
Width |
Sets the width of a layer. |
Height |
Sets the height of a layer. |
Visibility |
Sets the layer's visibility. The choices are inherit, visible, and hidden. |
Z-Index |
Sets the layer's z-index (stacking order). |
Overflow |
Sets what happens when the layer's contents exceed its size. The choices are visible, hidden, scroll, and auto. |
Placement |
Sets the left, top, width, and height attributes for a layer. |
Clip |
Sets the top, bottom, left, and right clipping attributes for a layer. |
Extensions Panel |
|
Page Break |
Forces a page break during printing either before or after the object. This style is not widely supported but may be in the future. |
Cursor |
Changes the cursor when it is placed over the object. Supported only in Internet Explorer 4.0 or better. |
Filter |
Applies special effects, including page transitions, opacity, and blurs to objects. Supported only in Internet Explorer 4.0 or better. See msdn.microsoft.com/workshop/Author/filter/filters.asp for more information. |