Cascading Style Sheets (CSS) allow you to format a web page by setting font attributes such as small caps and changing the character spacing, paragraph properties, and borders and shading for text boxes. Style sheets can be applied to a web page in three ways:

• Embed a style sheet on a web page by listing the style attributes at the top of the page.
• Apply inline styles within the web page to add a style to individual elements of a page.
• Link to an external style sheet if several pages will have the same styles. By using this method, style attributes are only changed in one location and the changes are reflected on many pages. These external style sheets are saved as a separate file with the file extension .CSS.

Create an Embedded Style

1. Select Format|Style from the menu bar.
2. Click the New button to create a new style.
3. Type a period (.) followed by a name containing no spaces for the new style in the Name (selector) field. Below is an example of a style that will create red text.
   
4. Click the Format button to select an element the style formatting will apply to. In this example, the font colour will be changed first so Font... is selected from the menu.
5. From the Font dialog box, the font has been changed to Arial, size to 10 point, and colour to red. Click OK when the changes have been made.
   
6. Select other options from the Format button menu to change more element attributes. When all the styles have been selected, click OK on the New Style window and OK on the Style window.

Apply the New Style

To apply the style you have just created, highlight the text that the style will be applied to. The style is listed in the style menu on the formatting toolbar. Click the window and scroll down to select the style.

Inline Styles

Some formatting styles, such as font properties, borders and shading, are automatically applied to certain elements such as portions of text, paragraphs, and divisions. Other styles that are applied to tables and form elements can be manually added as described below:

1. Highlight the table or form element and select Format|Properties from the menu bar.
2. Click the Style... button on the properties window.
3. Styles you have already created are listed in the Class drop-down menu. Select one of these styles or click the Format button to change another property.
4. Press OK when finished.

Using Preset External Style Sheets

FrontPage comes with several preset styles that can be added to web pages. It is also helpful to review the code of these preset style sheets to gain a better understanding of CSS when you create your own style sheets. Follow the steps outlined below to save one of these styles as an external CSS to use on a web page.

1. Select File|New|Pages from the menu bar and click the Style Sheets tab.
   
2. Highlight the choices to view descriptions for each of the styles and click OK.
3. The style sheet code will appear in the window. Save the style sheet using the .CSS extension.

Create an External Style Sheet

To create an external style sheet from scratch, follow these steps:

1. Select File|New|Pages, click the Style Sheets tab, and choose Normal Style Sheet.
   
2. A blank page will appear on the screen with a small Style toolbar. Click the Style... button on the toolbar.
   
3. Highlight an element from the Styles list that the style will be added to and click the Modify... button. For example, select the "body" tag from the list and we will change the default text style for the page.
4. Click the Format button on the Modify Style window and select the elements that will be formatted. To change the default text style in this example, select "Font...". Choose "Arial" from the font list and "10pt" from the size listing.
   
    

   TIP - As discussed in the text tutorial, it is advantageous to include several similar fonts in case a visitor to your site does not have the particular font you chose on their computer or is using a different operating system. Similar sans-serif fonts are Arial, Verdana, Geneva, and sans-serif while serif fonts are Times New Roman and Times. Type the font names in the Font box above the scrolling menu, separating each name with a comma.

   
   Click OK when finished.

5. Click OK on the Modify Style window.
6. Notice on the style window that this style is now listed. Click OK to exit the Style window or select another element to modify.
7. Save the style sheet in .CSS format.

Link to an External Style Sheet

After you have created an external style sheet, it must be linked to a web page for the styles to be applied to the page.

1. Open a web page and select Format|Style Sheet Links from the menu bar.
   
2. Click the Add... button on the Link Style Sheet dialog box.
3. Select the .CSS file and click OK.

To remove an external style sheet link from a page, highlight the style sheet in the list and click the Remove button.

Edit an External Style Sheet

1. Open the .CSS file in FrontPage.
2. Select Format|Style from the menu bar.
3. Highlight the style from the list that needs to be changed and click the Modify button.
   
4. Make the necessary changes by selecting options from the Format button menu.
5. Click OK when finished and save the style sheet.

« Navigation Bars	Cascading Style Sheets	Modifying Themes »

Copyright © FGCU 2004
 

This article is from the FGUC, all credit should be given to them for this excellent tutorial.

All pictures and text belong to the FGUC