## Working with styles

Freeway allows you to save a particular combination of text formatting settings and give them a memorable name, such as Mainheading. You can then apply the same settings to other selections of text simply by selecting the style you have defined from the Styles and Colors palette.

Styles provide a convenient way of ensuring consistency throughout your Web site by allowing you to apply a predefined group of settings in a single operation. In addition, if at a later date you decide to change the design of your site, you can simply edit the definition of a style, and any text defined with that style will immediately be updated to reflect the change.

#### Attributes

Each style consists of a list of attributes, such as Font, Size, and Align. The attributes are divided into CSS attributes and graphic attributes, and into character attributes and paragraph attributes.

#### CSS and graphic attributes

CSS attributes are applied to text in HTML items. Graphic attributes are applied to text in graphic items, and GIF text in HTML items.

You can choose which attributes to view by choosing CSS Attributes, Graphic Attributes, or CSS and Graphic Attributes from the View pop-up menu at the bottom of the Edit Style dialog box.

When an attribute, such as Font, has different options for CSS text and graphic text, the Edit Style dialog box shows two controls to allow you to set each option independently:

#### Character and paragraph attributes

In the Edit Style dialog box the attributes are divided into Character and Paragraph sections.

Character attributes can be applied to individual characters in a section of text.

Paragraph attributes apply to the whole paragraph, or all characters in the paragraph.

In addition, the Graphic Attributes include a Graphic Text Effects section listing text effect attributes which can be applied to characters within graphic text:

### To define a new style

- Click the styles icon at the top of the Styles and Colors palette to display the document styles.
- Click the options icon at the top right of the Styles and Colors palette and choose New Style... from the pop-up menu:

The Add Style dialog box will be displayed to allow you to define the new style:

- Enter a name for the style in the Name box.
- To specify the HTML tag to be used for text in this style optionally enter the tag in the Tag field.

You can choose a predefined tag from the pop-up menu.

For example, to use one of the standard HTML heading tags enter the appropriate tag h1, h2, or h3 in the Tag box. This ensures that visitors to your site with older browsers that do not support CSS styles will see the text in an appropriate weight of heading.

- To define character formatting for the style click the + to the right of the Character heading, then choose the character attribute you want to define from the pop-up menu:

A control will be added to the Character section to allow you to set the value of the attribute:

- Repeat for any other character attributes you want to define for the style.

You can remove an attribute by clicking the – to the right of the attribute in the Character section of the Add Style dialog box.

- To define paragraph formatting for the style click the + to the right of the Paragraph heading and choose the paragraph attribute you want to define from the pop-up menu:

A control will be added to the Paragraph section of the Add Style dialog box to allow you to set the value of the attribute:

When you have specified the characteristics of the style you want to define:

- Click the OK button to define the style.

The new style will be shown in the document styles panel of the Styles and Colors palette. If it includes paragraph formatting a paragraph symbol will be shown to the left of the style name:

### To define a style based on existing text

If you have already formatted text using the menus and the options in the Inspector palette, you can create a named style based on this formatting.

Freeway creates a temporary style for each new combination of formatting you define in your site, with a name such as .style1, .style2, etc., and these are listed in the Styles panel of the Styles and Colors palette below the permanent styles.

- Click the temporary style while holding down [Command] and choose Edit Style... from the pop-up menu:

The Edit Style dialog box will be displayed to allow you to edit the definition of the style.

- Enter a name for the style and select Permanent to make it a permanent style.
- Proceed as for defining a new style above.

### To apply a style to text

- Select the text and click the style name in the document styles panel of the Styles and Colors palette.

Contents