Create Custom Hyperlinks by Using Cascading Style Sheets
A D V E R T I S E M E N T
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:
| 1. |
Start FrontPage and create a new, blank page. |
| 2. |
On the View menu, click
Page, and then at the bottom of the
page, click Code. |
| 3. |
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>
|
| 4. |
Insert the following code in the
<body></body> area of the page:
|
| 5. |
On the File menu, click
Save. |
| 6. |
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. |
| 7. |
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:
| 1. |
Start FrontPage and create a new, blank page. |
| 2. |
On the View
menu, click Page, and then at
the bottom of the page, click Code.
|
| 3. |
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>
|
| 4. |
Insert the following code in the
<body></body> area of the page:
|
| 5. |
On the File
menu, click Save. |
| 6. |
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. |
| 7. |
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:
| 1. |
Start FrontPage and create a new, blank page. |
| 2. |
On the View
menu, click Page, and then at
the bottom of the page, click Code.
|
| 3. |
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>
|
| 4. |
Insert the following code in the
<body></body> area of the page:
|
| 5. |
On the File
menu, click Save. |
| 6. |
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. |
| 7. |
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:
| 1. |
Start FrontPage and create a new, blank page. |
| 2. |
On the View
menu, click Page, and then at
the bottom of the page, click Code.
|
| 3. |
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>
|
| 4. |
Insert the following code in the
<body></body> area of the page:
|
| 5. |
On the File
menu, click Save. |
| 6. |
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. |
| 7. |
On the File
menu, point to Preview in Browser,
and then click the Web browser that you want to use to preview
the page. |
|
