Getting Stylish: The Essentials

You already know about one way to style elements on the page ”the Format menu. Using the options of the Format menu, you can add style to individual headings, paragraphs and other page elements. Defining the style of elements in this way is easy, but you have to define the way each element looks individually.

Not only does it take a lot of time to define the look of each individual element, it s also difficult to maintain that way. Wouldn t you rather be able to define how you want a particular page element to look, and have FrontPage apply that definition throughout the page automatically? Probably so. And this is where style sheets come in handy.

Working with Style Sheets

When you work with style sheets, you refer to each element by its unique identifier, called a selector. The selector for a level 1 heading is H1, which is simply the markup tag for the element without the first and last characters (<>). Table 6-1 shows a list of the most commonly used elements and their selectors.

Table 1-1: Commonly Used Selectors for Page Elements

Element Name	Selector
Active Hypertext Link	A:active
Unvisited Hypertext Link	A:link
Visited Hypertext Link	A:visited
Data cell within a table	TD
Definition in a glossary	DD
Embedded objects	EMBED
Header cell within a table	TH
Hypertext link	A
Image	IMG
Input field	INPUT
Item in a list	LI
Level 1 heading	H1
Level 2 heading	H2
Level 3 heading	H3
Level 4 heading	H4
Level 5 heading	H5
Level 6 heading	H6
Numbered list	NL
Ordered list	OL
Paragraph text	P
Row within a table	TR
Table	TABLE
Unordered list	UL

You can define the formatting and positioning of any of these page elements, as well as other page elements that are available. This definition is then used throughout the page ”and you need do nothing more to have similar elements use the style already assigned.

For example, you could specify that all paragraphs use blue, 12-point Times New Roman on a gray background and have a solid inset border around them. Or, that all level 1 headings have a yellow background and brown text. If you later decide that you d rather have paragraphs use black, 11-point Helvetica on a white background with no border, or that all level 1 headings have a brown background and yellow text, simply make the changes to the style definition in one location. The style of all paragraphs or headings on the page is updated automatically. It s that simple, fast and effective.

To take the discussion a step further, you can also create definitions that are applied to multiple elements. You do this by defining a style class, and then applying the class to page elements that should use it. For example, you could create a style class that defines the basic formatting of all text on the page. This would ensure that all headings and paragraphs have the same basic formatting.

Adding Style Based on Element Type

Think about the kind of style improvements you d like to make in your Web pages. Go ahead, take a moment. What would you change if you had complete control over the appearance and positioning of elements on the page? Maybe you d like to set a background color for headings and paragraphs that s different from the page default background color . Maybe you d like to add decorative borders to headings or paragraphs. Or maybe you d like to position pictures in a very specific way.

Now that you re thinking about the style improvements you d like to make, you can add style based on element type by following these steps:

1. Select Format, Style to open the Style dialog box shown in Figure 6-1 on the following page. The Styles list should show a list of HTML tag selectors. If it doesn t, click the List selection list and then chose HTML Tags.

   
   Figure 6-1: Use the Style dialog box to create, modify and delete style definitions.

2. Select the identifier for the element you re defining, then click Modify. You should now see the Modify Style dialog box.

3. Click Format, and then use the following options on the shortcut menu to configure the style:

   • Font Displays the Font dialog box, which you can use to set font characteristics. You ll find options for setting the font face, style, size , color, effects, and character spacing within the text of the element.

   • Paragraph Displays the Paragraph dialog box, which you can use to set the alignment, indentation, and spacing before and after the element. You can also set the line spacing of text within the element.

   • Borders Displays the Borders And Shading dialog box, which you can use to add borders and padding around the element, and to fill the element s background with color, a picture, or a pattern.

   • Numbering Displays the Bullets And Numbering dialog box, which you can use to specify the bullets and numbering to use with any ordered and unordered lists the element may contain.

   • Position Displays the Position dialog box, which you can use to precisely position the element. The element position can be fixed within the page itself, or relative to other elements on the page.

4. Repeat Steps 2 and 3 for other elements you want to work with. When you are finished, click OK.

5. When you re finished with all style assignments, click OK to close the Style dialog box. You can update these style assignments at any time by repeating this procedure.

Using Style Classes

When you want to apply a style definition to multiple elements, you can use a style class. For example, if you want all table cells and table headers as well as all text paragraphs to have the same basic formatting, you can use a style class to do this.

Start by creating the style class:

1. Select Format, Style to display the Style dialog box, and then select New.

2. In the New Style dialog box, enter a name for the class, such as the one shown in Figure 6-2.

   
   Figure 6-2: Define the style class; be sure to use a unique name that is easy to remember and type.

   Note  

   The class name should be unique and easy to type. You'll use this name to refer to the class in your pages ”and in some cases, you ll have to type the class name by hand.

3. Next, specify whether the style type is Paragraph or Character.

   • Paragraph style types are for block-level elements, which can be aligned relative to other elements, and can also have borders and padding. Pictures, paragraphs, and headings are examples of paragraph styles.

   • Character style types are styles that apply to individual characters within block-level elements. Bold, italics, and underline are examples of character styles.

4. Click Format, then use the Font, Paragraph, Border, Numbering and Position options to configure the style.

After you create the style class, you can apply the class to any element in your Web page. For all elements except paragraphs and headings, apply the style class as discussed in the steps that follow:

1. Right-click the element, and then select the element s Properties dialog box from the shortcut menu. For example, with a picture, you d select Picture Properties.

2. In the Properties dialog box, click Style to open the Modify Style dialog box, shown in Figure 6-3.

   
   Figure 6-3: Choose the class you want to use.

3. Using the Class selection list, choose the style class that you want to use.

4. Click OK twice.

For paragraphs and headings, apply the style class by highlighting the text that you want to style and then selecting the appropriate style on the Style selection list. For example, if you created a style class called classA, you could select several paragraphs by clicking and dragging the mouse until the paragraph text is selected. Then you could click the down arrow on the Style selection list and then click classA.

Once you get used to working with style classes, you may also want to add style classes to paragraphs and headings by completing these steps:

1. Click Code to switch to code view. Locate the tag that defines the start of a paragraph or heading that you want to work with, such as <p> or <h1>.

2. Within the tag, after the tag selector, type class= className , where className is the actual name of the class you created after the selector name within the HTML tag. For example, if you created a class called classA, and you wanted a paragraph tag to use this class, you would type class= classA and the paragraph tag would look like this: <p class= classA >.

3. Click Design to switch back to design view. Now use the Format Painter to apply the format to other headings and paragraphs on the page. To do this, position the insertion point within the paragraph or heading to which you applied the style class, then click Format Painter on the Format toolbar. Afterward, click within the paragraph or heading to which you want to apply the style class. Repeat this step as necessary.

Removing Style Classes

If you later decide that you don t want to use a style class, you can remove the style class by completing the following steps:

1. Select the element or elements you want to change. You ll select most elements by clicking on them. For paragraphs and headings, however, you must position the insertion point within the paragraph or heading, and then triple click.

2. Press Ctrl+Shift+Z to remove the style class definition.

Aha!  

Remove Style Class Definitions
In most cases, selecting the element and then using Ctrl+Shift+Z to remove the element s formatting is the fastest way to remove style class definitions. If you have a lot of definitions to remove, you could also change to code view, and then remove the class definition from the elements themselves .