FrontPage 2003 Tutorial

HOW TO: Create Custom Hyperlinks by Using Cascading Style Sheets in FrontPage 2003

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.


For a Microsoft FrontPage 2002 version of this article, see 287706.

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.


In This Task

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, including, but 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 the tools that are used to create and debug procedures.

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.

back to the top


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

back to the top

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

back to the top

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

back to the top

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

back to the top

REFERENCES

For more information about cascading style sheets in FrontPage 2003, see FrontPage Help. To do so, on the Help menu, click Microsoft Office FrontPage Help. In the Search for box, type cascading style sheets, and then press ENTER to view the topics that are returned.

For additional information, click the following article numbers to view the articles in the Microsoft Knowledge Base:

196488 FP2000: 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 FP2000: Creating Hover Effects for Form Buttons using DHTML and CSS