Working with Styles

There are various ways to control the appearance of your web page. Take text for example. You can highlight some text and apply a font, size, colour, and enhancement such as bold or italic simply by clicking the buttons on the toolbar or, for more options, going to the Format > Font and Format > Paragraph dialogs. FrontPage's familiar interface makes it as easy as formatting your text in Word. But that's fine for that bit of text. You have to do it again when you need another bit of text to look the same way.

Styles provide re-usable collections of formatting instructions that you can design yourself, and call upon whenever you wish to help you bring consistency to your document.

Why Styles Are Useful

When you apply formatting instructions directly to text the instructions are added to the HTML of the page. Look at this example paragraph.

This paragraph should display its text in Arial, coloured green.

I made it look that way by typing the text then selecting the paragraph and choosing "Arial" and "green" from the appropriate controls on the toolbar. Its HTML code looks like this...

<p><font face="Arial" color="#008000">This paragraph should display
its text in Arial, coloured green.</font></p>

If my page is going to contain several paragraphs formatted the same way, a better way would be to create a "style" for my green text. Here's the same piece of text with formatting applied using a style...

This paragraph should display its text in Arial, coloured green.

It looks just the same as the previous example but it's code is quite different...

<p class="greenarial">This paragraph should display its text in Arial,
coloured green.</p>

The formatting has been applied by referring to a style that I had created. It appears as a "class" of the Normal or paragraph style <p>.

^ top

Creating a New Style

It is easy to define a new style. Follow these steps:

Choose Format > Style to open the Style dialog and click <New> button to open the New Style dialog.
In the Name (selector): box type dot (.) followed by a meaningful name for your style. You can use a mixture of letters and number but the name should not contain spaces. You can use the underscore character (_) if required...

Enter a name for your new style.

You can use the Style type: box to choose whether your style is a Paragraph style or a Character style. Paragraph styles are easy to apply to whole paragraphs - you just place your cursor in the paragraph and apply the style - but they have to apply to the entire paragraph. Character styles can apply to small sections of selected text, but if you want to apply them to an entire paragraph you have to select the entire paragraph first.
Now design your style by clicking the <Format> button and choosing Font from the menu. Make your choices from the dialog box that appears and click <OK>. You style can include as many or few instructions as you wish, relating to font, paragraph, border etc. They New Style dialog updates to show a preview and description of your style.
When you have finished designing your style click <OK> to close the New Style dialog and <OK> again to return to your document.

Take a look at the HTML of the document. You will see that the <head> section (at the top of the HTML page) now has a pair of <style> tags between which is the code defining your style...

An embedded style definition in HTML

To apply the new style to a paragraph, place your cursor within the paragraph and open the style list on the toolbar. You will see a list of user-defined styles at the bottom of the list. Click the one you want to apply...

The style list on FrontPage's formatting toolbar displays all the currently available styles.

Those marked with ¶ are paragraph styles.
Those marked with a are character styles.

The user defined style "greenarial" is at the bottom of the list.

You can create new styles or modify existing ones. You can also delete a user-defined style. In the Style dialog choose either HTML tags or User-defined styles to see the relevant list. For example:

If you want all your paragraph text to be in a specific font and size modify the <p> tag.
If you want all the text you use, including that in headings and tables, to be in a specific font or colour modify the <body> tag.
To control the appearance of individual heading styles, individually modify the <h1>, <h2>, <h3> etc. tags.

Because I created a new style rather than change a built-in one, I can apply it to several of the built-in styles.

This is my Heading 3 style

But I can apply my new style to it...

This is my Heading 3 style

by superimposing the my custom definition for "greenarial" on to the existing definition for the <h3> tag.

^ top

Cracking the Code

You don't have to use FrontPage's style tool to create a style sheet (although it is an excellent way of learning how to write the code). Don't be afraid of using FrontPage's HTML view to write and modify the code yourself.

The HTML code for styles is quite straightforward but can also very variable. You will often find that there are several different ways to create the same effect. Some will work better in one browser than in another.

HTML is a constantly developing language. The style tool in FrontPage helps you create the effects that the programmers were aware of when they wrote the program. There will almost certainly be more things that you can do.

A great deal has been written about Style Sheets - check out my recommended books and ask your favourite search engine. Be inspired by the work of others. If you see an effect you like on someone else's page and you want to know "What font is that?" or "How did she get that effect?", take a look at their code. Right-click on their page and (in Internet Explorer) choose View Source to open up their page's HTML in your text editor. Try it now! You'll see the code for my "greenarial" code near the top of the page.

^ top

What is a Style Sheet?

The term Style Sheet comes from the printing industry. It referred originally to a printed sheet containing examples of the various styles of type used in a particular publication and was used as a reference by the designers and printers. The term is still used in desktop publishing as any QuarkXPress users will know.

I've created what is referred to as an Embedded Style Sheet. Any additions or modifications I make to document's styles are included in the HTML code in the <head> section of the document between the <style> and </style> tags.

These style definitions can only be applied to the current document, but their use can be extended in two ways.

Create a basic document, containing whatever features you use on all your pages - perhaps a standard background and a table for text layout. Use the method described above to create style definitions and modify HTML tags to your own requirements. Save your document as FrontPage Template. When you need to create a new web page in FrontPage go to File > New and pick your template from the list. Your new page will be based on the template and will already contain the style definitions.
The template idea is fine, until you want to make global changes or additions to the design of your site. A better way to define styles is with a Cascading Style Sheet. This is a single document containing all your custom style definitions and modifications. All of your pages contain a link to your stylesheet. If you make a change to your Style Sheet, the change "cascades" down to all your pages.

In practice, many designers use a combination of templates and style sheets, and sometimes odd pages contain embedded style sheets too.

Follow this link to find out how to build and apply Cascading Style Sheets in FrontPage.

^ top

Hit Counter