FP98: How to Create Cascading Style Sheets in FrontPage 98

Last reviewed: March 18, 1998
Article ID: Q180827
The information in this article applies to:
  • Microsoft FrontPage 98 for Windows

SUMMARY

This article describes how to create an external, embedded, and inline Cascading Style Sheet (CSS).

MORE INFORMATION

WARNING: ANY USE BY YOU OF THE CODE PROVIDED IN THIS ARTICLE IS AT YOUR OWN RISK. Microsoft provides this code "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.

Microsoft Technical Support will not resolve problems produced by editing the HTML that FrontPage generates. This HTML Code sample is provided as a convenience for authors seeking to extend the capabilities of FrontPage. For more information about writing HTML, please see the following Microsoft Web site:

   http://www.microsoft.com/workshop/author/newhtml/default.htm

NOTES:
  • To use the full functionality of Cascading Style Sheets, you will need a browser that can support them, such as Microsoft Internet Explorer 4.0. Some browsers will only support 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.

  1. In FrontPage Explorer, create a FrontPage web named "Style" (without the quotation marks).

  2. 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>
    
    

  3. On the File menu, click Save. In the File Name box, type "External.css" (without the quotation marks) and click OK.

  4. Switch to FrontPage Explorer and then import the External.css file into the Web by following these steps:

        a. On the File menu, click Import.
    

        b. Click Add File.
    

        c. Select the External.css file and click Open.
    

        d. Click OK.
    

  5. Create a new page in FrontPage Editor.

  6. Click the HTML tab located at the bottom of FrontPage Editor window.

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

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

  8. On the File menu, click Save. In the File Name box, type "Style1.htm" (without the quotation marks) 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.

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

  2. On the Format menu, click Stylesheet.

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

    NOTE: Be sure to type your code between the <!-- and --> 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}
    
    

  4. Click OK.

Inline Styles

To create an inline style, follow these steps:

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

  2. Place the insertion point in the top left corner of the page. Type some text on the web page. Select the text you just type and then click Hyperlink on the Insert menu.

  3. Select the page you want to use as the target of your hyperlink.

  4. Click Style.

  5. In the Style dialog box, do the following:

        a. Click the Colors tab.
    

        b. In the Foreground color list for, select Black.
    

        c. Click the Text tab.
    

        d. In the Weight list, click Bold.
    

        e. In the Decoration list, click None.
    

        f. Click OK.
    

  6. Click OK.

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

   ARTICLE-ID: Q179628
   TITLE     : FP98: What are Cascading Style Sheets?


Additional query words: 98 css ie4 fpeditor
Keywords : fpedit fphtml fpscript fpie4 kbdta
Technology : internet kbinetdev
Version : WINDOWS:98
Platform : WINDOWS
Hardware : x86
Issue type : kbhowto


THE INFORMATION PROVIDED IN THE MICROSOFT KNOWLEDGE BASE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. MICROSOFT DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING THE WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT SHALL MICROSOFT CORPORATION OR ITS SUPPLIERS BE LIABLE FOR ANY DAMAGES WHATSOEVER INCLUDING DIRECT, INDIRECT, INCIDENTAL, CONSEQUENTIAL, LOSS OF BUSINESS PROFITS OR SPECIAL DAMAGES, EVEN IF MICROSOFT CORPORATION OR ITS SUPPLIERS HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES SO THE FOREGOING LIMITATION MAY NOT APPLY.

Last reviewed: March 18, 1998
© 1998 Microsoft Corporation. All rights reserved. Terms of Use.