This article describes how to create custom hyperlinks by
using cascading style sheets (CSS) in Microsoft Office FrontPage 2003. It
contains examples that demonstrate how to use cascading style sheet features to
create custom hyperlinks.
Note This article uses cascading style sheet features that may not be
supported in all Web browsers. For more information, see FrontPage Help. To do
so, click
Microsoft FrontPage Help on the
Help menu, type
cascading style sheet
compatibility in the
Search bar, and then press
ENTER to view the topics that are returned.
Create Custom Hyperlinks by Using Cascading Style Sheets
The following examples demonstrate how to create custom hyperlinks
by using cascading style sheet features:
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 either receive an error message or the page may not
display correctly if you copy the examples directly from this article and paste
them to FrontPage. The angle brackets (< and >) may appear as HTML code.
To work around this behavior, first paste the code sample to a blank document
in Notepad, and then copy the code sample from the document in Notepad to your
page in FrontPage.
Example 1: Create Hyperlinks where Only Underlines Are Displayed in a Different Color
This example formats text of the hyperlink to the same color as
the text of the document. Only the underline of the hyperlink is displayed in a
different color. To create the custom hyperlink, follow these steps:
- Start FrontPage and create a new, blank page.
- On the View menu, click
Page, and then at the bottom of the page, click
Code.
- Insert the following code in the
<head></head> area 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>
- Insert the following code in the
<body></body> area 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>
- On the File menu, click
Save.
- In the Save As dialog box, specify a
location where you want to save the file, type Example1
in the File name box, and then click
Save.
- On the File menu, point to Preview
in Browser, and then click the Web browser that you want to use to
preview the page.
Example 2: Create Hyperlinks That Use Hover Buttons
This example creates hyperlinks that use hover-style buttons with
a solid background. To create the custom hyperlink, follow these steps:
- Start FrontPage and create a new, blank page.
- On the View menu, click
Page, and then at the bottom of the page, click
Code.
- Insert the following code in the
<head></head> area 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>
- Insert the following code in the
<body></body> area 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>
- On the File menu, click
Save.
- In the Save As dialog box, specify a
location where you want to save the file, type Example2
in the File name box, and then click
Save.
- On the File menu, point to Preview
in Browser, and then click the Web browser that you want to use to
preview the page.
Example 3: Create Hyperlinks That Use Outline Buttons
This example creates hyperlinks that use an outlined, hover-style
button. A colored box appears around the hyperlink text that creates an outline
effect. To create the custom hyperlink, follow these steps:
- Start FrontPage and create a new, blank page.
- On the View menu, click
Page, and then at the bottom of the page, click
Code.
- Insert the following code in the
<head></head> area 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>
- Insert the following code in the
<body></body> area 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>
- On the File menu, click
Save.
- In the Save As dialog box, specify a
location where you want to save the file, type Example3
in the File name box, and then click
Save.
- On the File menu, point to Preview
in Browser, and then click the Web browser that you want to use to
preview the page.
Example 4: Create Hyperlinks That Use a Different Text Formatting
This example formats the hyperlinks to use non-underlined,
italic, lowercase text. When you move your pointer over the hyperlink, text in
the hyperlink is converted to uppercase. To create the custom hyperlink, follow
these steps:
- Start FrontPage and create a new, blank page.
- On the View menu, click
Page, and then at the bottom of the page, click
Code.
- Insert the following code in the
<head></head> area 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>
- Insert the following code in the
<body></body> area 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>
- On the File menu, click
Save.
- In the Save As dialog box, specify a
location where you want to save the file, type Example4
in the File name box, and then click
Save.
- On the File menu, point to Preview
in Browser, and then click the Web browser that you want to use to
preview the page.