Microsoft KB Archive/825450

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

Article ID: 825450

Article Last Modified on 1/9/2006

-

APPLIES TO


 * Microsoft Office FrontPage 2003

-





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



IN THIS TASK
 SUMMARY Create Custom Hyperlinks By Using Cascading Style Sheets 

Example 1: Create Hyperlinks Where Only Underlines Are Displayed in a Different Color

 

Example 2: Create Hyperlinks That Use Hover Buttons

 

Example 3: Create Hyperlinks That Use Outline Buttons

 

Example 4: Create Hyperlinks That Use a Different Text Formatting

 REFERENCES</li></ul>

<div class="summary_section">

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

back to the top

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 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: <ol> Start FrontPage and create a new, blank page.</li> On the View menu, click Page, and then at the bottom of the page, click Code.</li>  Insert the following code in the   area of the page: 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 } </li>  Insert the following code in the   area of the page: Please see <a href=&quot;http://www.microsoft.com&quot;>http://www.microsoft.com</a> for more. Please see <a href=&quot;http://www.msn.com&quot;>http://www.msn.com</a> for more. </li> On the File menu, click Save.</li> 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.</li> On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.</li></ol>

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: <ol> Start FrontPage and create a new, blank page.</li> On the View menu, click Page, and then at the bottom of the page, click Code.</li>  Insert the following code in the   area of the page: 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 } </li>  Insert the following code in the   area of the page: Please see <a href=&quot;http://www.microsoft.com&quot;>http://www.microsoft.com</a> for more. Please see <a href=&quot;http://www.msn.com&quot;>http://www.msn.com</a> for more. </li> On the File menu, click Save.</li> 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.</li> On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.</li></ol>

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: <ol> Start FrontPage and create a new, blank page.</li> <li>On the View menu, click Page, and then at the bottom of the page, click Code.</li> <li> Insert the following code in the   area of the page: 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 } </li> <li> Insert the following code in the   area of the page: Please see <a href=&quot;http://www.microsoft.com&quot;>http://www.microsoft.com</a> for more. Please see <a href=&quot;http://www.msn.com&quot;>http://www.msn.com</a> for more. </li> <li>On the File menu, click Save.</li> <li>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.</li> <li>On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.</li></ol>

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: <ol> <li>Start FrontPage and create a new, blank page.</li> <li>On the View menu, click Page, and then at the bottom of the page, click Code.</li> <li> Insert the following code in the   area of the page: 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  } </li> <li> Insert the following code in the   area of the page: Please see <a href=&quot;http://www.microsoft.com&quot;>http://WWW.microsoft.COM</a> for more. Please see <a href=&quot;http://www.msn.com&quot;>http://WWW.msn.COM</a> for more. </li> <li>On the File menu, click Save.</li> <li>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.</li> <li>On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.</li></ol>

back to the top

<div class="references_section">