FrontPage Template and Tutorial - Continued

Using simple CSS to control formatting.

Cascading Style Sheets (CSS) were introduced way back in 1996. Even 8 years later, many webmasters still haven't taken advantage of this *huge* time-saving technology. 

A cascading style sheet is a set of instructions in a linked external file or within the source code of a page that tells a browser how to render page elements - text color and sizes, page backgrounds, tables etc. 

How can using CSS help you? For example, let's say you have a 40 page web site and the main body text you use is 12pt. Times New Roman. This would entail numerous instances of repetition in your coding:

<p><font face="Times New Roman" size="2">This is a line of text</font></p>

If you wanted to change the font to Verdana, you would need to edit every single page to make the changes. By using a *linked* style sheet you only need to change one file and then the entire site would be updated. 

Using CSS also makes your coding a lot tidier through making the repetition of formatting instructions obsolete. Less code = faster download times.

Linked External Style Sheets 

This is just a text file, saved in your web with the tail extension of .css that contains a series of instructions. In this sample template web, the css file can be found in the "elements" folder in my free FrontPage template.

When a page in the web links to this file, the browser references the CSS instructions first before displaying the the page. To attach a CSS file in Frontpage:

• Have the page open in Edit (Normal mode)

• Go to "Format" on the menu, select "Style Sheet Links"

• Click the "Add" button

• Navigate to the .css file, highlight and click "OK"

If you are going to use this template as the basis of the site, you won't need to do this as it's already been done.

Understanding the CSS coding

Let's take a look inside the site.css file to gain a better understanding of how it operates. In the elements folder, open "site.css".

The first statement:

BODY {
background-color:#ffffff;
margin-bottom:0%;
margin-left:0%;
margin-right:0%;
margin-top:0%;
}

This controls the main body elements 

• The background-color sets the background color for the page in "hex" values

• The margin-x sets the size of the margins around the page 

The next statement:

TD       {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #273A5B;
            }

As this template is made up of entirely of tables, we need to specify how the fonts will be represented in the table cells, which is represented by TD (Table Data).

• The multiple fonts are listed in case a visitor to your site doesn't have the first font installed on their computer-  in that scenario the next font type will be used. Add as many fonts as you want, but it's recommended that you only used similar font types.

• The font-size is either a px (pixel) or pt (point) size.

• The font-color is the color that the font will be displayed using hex values.

• Note that ";" is used at the end of each line of values.

CSS gives you incredible flexibility. Here's another example. Your table text is in 10 pt. Verdana, but you have other tables or cells where you want Verdana 8pt, such as in the right menu on this page. 

Since you've already used the TD element in your CSS file, you'll need to create a new "class". Here's an example of this scenario:

.smallblue {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #273A5B;
}

When creating your own classes, you can give them any name, as long as it is a single word and is preceded by a "." as shown above. 

Applying formatting styles and classes is simple - just highlight the element; then select the class or style from the dropdown selector on the menu bar - it's usually on the left hand side in FrontPage. 

Other standard CSS elements included in the site.css file:

• A:link  - specifies how linked text should be represented

• A:visited - specifies how links that have been visited should display

• A:hover - specifies how links should display when a mouse is moved over them.

• H1  - Heading 1 style

• H2 - Heading 2 style

For other standard elements, view this CSS reference.

These examples are just the very basics - there's so much you can do with CSS.

Conclusion.

I hope this template and tutorial assists you in making better use of Microsoft FrontPage - it really is a wonderful web development software package; often criticized simply because Microsoft are the authors!

Good luck to you in your endeavors!