7. Adding new Styles

A Style is a definition on how a paragraph should be rendered (eg. shown on the page).

First a small tutorial on the differences between characters and paragraphs. A paragraph is a sequence of character which ends when the Enter-button is pressed. Usually a paragraph spans over several lines and includes several sentences, just like this paragraph starting with "First a small...". A paragraph style defines how the text of the entire paragraph should be formatted. The paragraph style can be overridden for a sequence of character by the character formatting tools, eg. bold and italic.

A good rule is to sparsely use character formatting (eg. changing the font size, font-family, colors etc.) on text. Use character formatting when changing only small portions of a paragraph.

The built-in styles are Heading 1 to 6 and Normal. Use Heading styles for headings and Normal for the text body.

To add a new style just click the Style Button on the Main toolbar (or Text Styles from the Styles menu).

This will bring up the Styles dialog.

Add a new style by clicking the Add button and name it Note (as shown below)

Use the Clone option and select Normal in the drop box. The clone option will duplicate an existing style, which in this case would be the normal style. Often it is easier to clone an existing style than to set all value manually.

Click OK to return to the list with styles

Now edit the new style (by selecting it and then click edit)

A style have font properties such as the font family, the font size and the font color as shown above. Some values such as the bold property has three values; On, Off and Default. The On and Off values merely turns on or off the Bold style. The Default value leaves the bold value unchanged neither forcing it to on or off. The context in which the paragraphs lies will determine the bold state.

Now set the Text color to value #FF0066 by clicking on the colored box

Color Picker

The color picker contains a list of the 216 web safe colors, which is guaranteed to work on displays set to only 256 colors. Today usually any color can be used.

Transparent turns the color off.

Link to Project Colors

Project colors are colors set in the Project Colors Dialog. Instead of hardcoding color values a project color can be used. By using appropriate project colors it's easy to change color scheme later for the web site.

Link to Document Colors

Every document has two optional color properties called the primary and the secondary color. Using these colors makes it possible to change the style for every page.

The Color Value

Note that color value (hex value) is shown at the top of the color picker dialog.

The currently selected color

The currently selected color has a small black square around it.

More Colors

Clicking the More Colors button will bring up the Full Color Picker.

Click on tab Layout

On the layout tab alignment, spacing and margins can be changed.

Note! Margins defines the distance to other items on the page and padding the distance to the paragraphs text.

Set all margins to 5 and the padding to 10 for left and right, 5 for top and bottom

Proceed to the Background & Borders tab

Set the background color to #FFFF99

Set the left border to width 7 pixels and color #FF0066 and set the other border to width 0

Getting the hang of it?

Manipulating styles is a powerful technique for creating consistant and professional looking web sites. Now lets use the new style.

Click OK to save the style and return to the list of styles. Close the list of styles dialog too.

Prepare to test the new style!

Start edit the Welcome page as shown below

Enter the text "Greatly..." as a new paragraph at the end of the document body (eg. place the caret at the end of the text and press the enter key).

Select the style "Note" from the drop-box above.

By selecting a style from the styles drop down box the current paragraph will change its apperance.