FP98: How to Create Cascading Style Sheets in FrontPage 98 (180827)

MORE INFORMATION

Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. NOTES:

To use the full functionality of Cascading Style Sheets, you need a browser that support them, such as Microsoft Internet Explorer 4.0. Some browsers support only certain aspects of Cascading Style Sheets. Your results may differ, depending on the browser you are using.
Do not use themes for this demonstration or the examples will not work properly.

External Style Sheets

To create an external style sheet, follow these steps.

In FrontPage Explorer, create a FrontPage web named Style .

On the Windows Start menu, point to Programs, point to Accessories, and then click Notepad. Type the following code:

      <STYLE TYPE="text/css">
      <!--
      BODY {background-color: white}

      H1 {font-size: 12pt;
          font-family: "Arial";
          color: black}

      P  {font-size: 10pt;
          font-family: "Times New Roman";
          color: black}

      a {text-decoration: none;
         font-weight: bold;
         color: black}
      -->
      </STYLE>

On the File menu, click Save. In the File Name box, type External.css and click OK.
Switch to FrontPage Explorer and then import the External.css file into the Web by following these steps:
1. On the File menu, click Import.
2. Click Add File.
3. Select the External.css file and click Open.
4. Click OK.
Create a new page in FrontPage Editor.
Click the HTML tab located at the bottom of the FrontPage Editor window.

Type the following HTML code between the <HEAD> and </HEAD> tags:

      <WWLINK REL="stylesheet" HREF="external.css" TYPE="text/css">

On the File menu, click Save. In the File Name box, type Style1.htm and click Save.

NOTE: The Style1.htm file and the External.css files should be saved in the same folder.

Embedded Style Sheets

To create an embedded style sheet, follow these steps:

NOTE: Do not use themes for this demonstration or the examples will not work properly.

In the FrontPage Editor, create a new page. To do this, click New on the File menu.
On the Format menu, click Stylesheet.

In the editor window in the Format Stylesheet dialog box, type the following code.

NOTE: Be sure to type your code between the  tags.

      BODY {background-color: white}

      H1 {font-size: 12pt;
          font-family: "Arial";
          color: black}

      P  {font-size: 10pt;
          font-family: "Times New Roman";
          color: black}

      a {text-decoration: none;
         font-weight: bold;
         color: black}

Click OK.

Inline Styles

To create an inline style, follow these steps:

In the FrontPage Editor, create a new page. To do this, click New on the File menu.
Place the insertion point in the top left corner of the page. Type some text on the page. Select the text you just typed and then click Hyperlink on the Insert menu.
Select the page you want to use as the target of your hyperlink.
Click Style.
In the Style dialog box, do the following:
1. Click the Colors tab.
2. In the Foreground Color List For, select Black.
3. Click the Text tab.
4. In the Weight list, click Bold.
5. In the Decoration list, click None.
6. Click OK.
Click OK.

For more information about Cascading Style Sheets, please see the following article in the Microsoft Knowledge Base: