How to create designer hyperlinks by using cascading style sheets in FrontPage 2002

Article translations Article translations
Article ID: 287706 - View products that this article applies to.
This article was previously published under Q287706
This article has been archived. It is offered "as is" and will no longer be updated.
For a Microsoft FrontPage 2000 version of this article, see 288784.
Expand all | Collapse all

On This Page

SUMMARY

This article describes how to create customized hyperlinks by using cascading style sheets (CSS).

NOTE: This article uses customized cascading style sheets that may not be available in all browsers. For more information about this topic, click Microsoft FrontPage Help on the Help menu, type compatibility in the Answer Wizard, and then click Search to view the topic.

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.
NOTE: You may receive an error message if you copy the examples directly from this article and paste them into FrontPage. The angle brackets (< and >) may appear as escaped HTML code (< and >). To work around this behavior, paste the script into a blank Notepad document, and then copy it from Notepad before you paste it into FrontPage.

Create Designer Hyperlinks by Using Cascading Style Sheets

The following examples demonstrate how to use customized settings of cascading style sheets to create personalized hyperlinks.

Example 1: Only Underlines Are in Color

This example allows the hyperlink text color to be the same as the text color of the document. Only the line under each hyperlink should appear in a different color.
  1. Create a new page in FrontPage.
  2. Insert the following code in the <HEAD></HEAD> section of the page:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
    a:link    { border-bottom-color: blue }
    a:visited { border-bottom-color: purple }
    a:hover   { border-bottom-color: green }
    a:active  { border-bottom-color: red }
    </style>
    					
  3. Insert the following code in the <BODY></BODY> section of the page:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    					
  4. View the page in Microsoft Internet Explorer 4.0 or later. The underlines for the hyperlinks should be in a different color from the text.

Example 2: Hover Buttons

This example creates solid hover-style buttons.
  1. Create a new page in FrontPage.
  2. Insert the following code in the <HEAD></HEAD> section of the page:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; padding: 3px }
    a:link    { color: white; background-color: blue }
    a:visited { color: white; background-color: purple }
    a:hover   { color: white; background-color: green }
    a:active  { color: white; background-color: red }
    </style>
    					
  3. Insert the following code in the <BODY></BODY> section of the page:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    					
  4. View the page using Internet Explorer 4.0 or later. The hyperlinks should appear as hover buttons.

Example 3: Outline Buttons

This example creates a special kind of hover button, where a colored box appears around the hyperlink text, creating an outline effect.
  1. Create a new page in FrontPage.
  2. Insert the following code in the <HEAD></HEAD> section of the page:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }
    a:link    { border-color: blue }
    a:visited { border-color: purple }
    a:hover   { border-color: green }
    a:active  { border-color: red }
    </style>
    					
  3. Insert the following code in the <BODY></BODY> section of the page:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    					
  4. View the page using Internet Explorer 4.0 or later. The hyperlinks should appear as hover buttons that are boxes around the text.

Example 4: Alter Text Styles

This example forces all hyperlinks to text that is non-underlined, italicized, and lowercase. Unvisited links appear in bold text, and links are converted to uppercase text when a user rests the mouse over the link.
  1. Create a new page in FrontPage.
  2. Insert the following code in the <HEAD></HEAD> section of the page:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; font-style: italic; text-transform: lowercase }
    a:link    { color: blue; font-weight: bold }
    a:visited { color: purple }
    a:hover   { color: green; text-transform: uppercase }
    a:active  { color: red  }
    </style>
    					
  3. Insert the following code in the <BODY></BODY> section of the page:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p>
    					
  4. View the page in Internet Explorer 4.0 or later. The text changes styles when you rest the mouse on it.

REFERENCES

For additional information, click the following article numbers to view the articles in the Microsoft Knowledge Base:
196488 Fs000: What are cascading style sheets?
205996 How to create cascading style sheets in FrontPage 2000
240972 How to remove underlines from hyperlinks in FrontPage 2000
222949 How to create hover effects for form buttons using DHTML and CSS in FrontPage 2000



Properties

Article ID: 287706 - Last Review: October 23, 2013 - Revision: 2.0
APPLIES TO
  • Microsoft FrontPage 2002 Standard Edition
Keywords: 
kbnosurvey kbarchive kbhowtomaster kbfunctions KB287706

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com