Several inline styles have been created in this file using the Inline Style wizard in Constructor. You can get to the Inline Style wizard using the Format | Style | Edit menu item. The styles created change the formatting of the text they are used on, and can be applied by selecting their names from the drop-down list in the formatting toolbar.
Style 1
This is a heading with style1 applied to it.
Here is some text for the paragraph after the heading
Here is another heading using the style
It was worthwhile using a style rather than just applying the font styles to each section of text as so much customisation was done to the font style as it would take a long time to reproduce the style on different sections of text.
Description
The inline style named style1 contains all the information used to change the style of the text from that used for this text and that you can see in the titles above. Since there is such a difference between the two styles, it would take many HTML tags to get the same effect, and if the style is used often in the same page, it is more economical to define a style once and reuse it than to keep on using the HTML tags for each section of text.
How to make it
Load the inline style wizard and enter ".style1" as the name of the style, taking care to include the dot at the start of the name. This dot is used by the browser to indicate that the style is one which can be used by the writer, rather than one which customises the display of an existing tag. If you just enter the name as style1, then the browser tries to change the appearance of text between <style1> and </style1> tags, which don't exist.
Next, we need to define what font is to be used. We are using 18 point MS Sans Serif font, so set the font name to MS Sans Serif and the size to 18. The text should be pale blue, so click on the coloured button and select an appropriate colour. Tick the bold and italic boxes to apply those effects.
Click on Next to finish changing the font. The next page of the wizard refers to the paragraph style of the font. We still want the text to be left aligned, so leave the Left box marked. We want some space above and below the text, so change the line height setting to 36 points. As the text is only 18 points, this should leave plenty of space around the text. We don't want to spread the text out across the line though, so don't change the letter spacing. Lastly, we want to use small capitals for the text, so select the small caps options. Click on Finish to create the style and add it to the page.
Now we have created the style, we have to use it. Enter the text as shown above in the example, select the parts which we want to apply the style to , and select the name of the style (style1, this time without the dot) from the style list. This is the drop-down list box on the left of the formatting toolbar. This creates the two tags needed to apply the style. If we want to use the style again, simply select the next section of text and select the name of the style again. If it is already shown in the list box, don't worry, just click on the down-arrow to the side of it and select it again.
Style 2
This is a heading level 2
Here is some text for the paragraph after the heading
Here is another heading level 2
If the document was originally written using heading level 2 for the paragraph headings, the easiest way to change the appearance of the page is to use a style to change how heading level 2 is displayed..
Description
The inline style wizard was used to modify the <H2> tag which is used to mark out heading level 2. This tag can be modified in the same way as you create a new style, and can be used effectively when altering an existing page which uses the heading tags. This saves going through the document and replacing every instance of the <H2> tag with font tags. Notice that the text is displayed slightly differently from the text in the first example. This is because heading level 2 already possesses some formatting options which have not been overridden.
How to make it
Load the inline style wizard again, and select Heading 2 from the drop-down name list. This will start editing the <H2> tag. You can then change all the options in exactly the same way as above for style1. Any text between <H2> tags will now have the new style applied to them. You can also apply the style in the same way as you originally applied heading level 2 - highlight the text you want and select the Heading 2 item from the style drop-down list box on the formatting toolbar. You can also use the same idea for changing the appearance of similar tags. Simply type the name of the tag in as the name of the style, without a dot at the start of the name. Any alterations you make will then be applied to all text between the opening and closing tags. Note that this is only available for certain tags, called block elements. These are tags which normally apply to the text between the two tags.