How to use cascading style sheets to create custom hyperlinks in Expression Web

Article translations Article translations
Article ID: 928715 - View products that this article applies to.
Expand all | Collapse all

On This Page

INTRODUCTION

This article describes how to use cascading style sheets (CSS) to create custom hyperlinks in Microsoft Expression Web. It contains examples that demonstrate how to use CSS features to create custom hyperlinks.

MORE INFORMATION

Example 1: Create hyperlinks in which the underline formatting is displayed in a different color

This example formats the text of the hyperlinks to the same color as the text of the document. Only the underline formatting of the hyperlinks is displayed in a different color. To create these custom hyperlinks, follow these steps:
  1. Start Expression Web, and then create a new blank page.
  2. On the View menu, click Page, and then click Code at the bottom of the page.
  3. In the <head></head> area of the page, insert the following code:
    <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. In the <body></body> area of the page, insert the following code:
    <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 to which you want to save the file.
  7. In the File name box, type Example1, and then click Save.
  8. 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 buttons that have a solid background. To create these custom hyperlinks, follow these steps:
  1. Start Expression Web, and then create a new blank page.
  2. On the View menu, click Page, and then click Code at the bottom of the page.
  3. In the <head></head> area of the page, insert the following code:
    <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. In the <body></body> area of the page, insert the following code:
    <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 to which you want to save the file.
  7. In the File name box, type Example2, and then click Save.
  8. 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 hover buttons

This example creates hyperlinks that use outline hover buttons. When you rest on these hyperlinks, a colored box appears around the hyperlink text. This creates an outline effect. To create these custom hyperlinks, follow these steps:
  1. Start Expression Web, and then create a new blank page.
  2. On the View menu, click Page, and then click Code at the bottom of the page.
  3. In the <head></head> area of the page, insert the following code:
    <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. In the <body></body> area of the page, insert the following code:
    <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 to which you want to save the file.
  7. In the File name box, type Example3, and then click Save.
  8. 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 different text formatting

This example formats hyperlinks to use non-underlined, italic, lowercase text. When you rest on these hyperlinks, the text becomes uppercase. To create these custom hyperlinks, follow these steps:
  1. Start Expression Web, and then create a new blank page.
  2. On the View menu, click Page, and then click Code at the bottom of the page.
  3. In the <head></head> area of the page, insert the following code:
    <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. In the <body></body> area of the page, insert the following code:
    <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 to which you want to save the file.
  7. In the File name box, type Example4, and then click Save.
  8. On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.

REFERENCES

For more information, click the following article numbers to view the articles in the Microsoft Knowledge Base:
825450 How to create custom hyperlinks by using cascading style sheets in FrontPage 2003
196488 What are cascading style sheets?
222949 How to create hover effects for form buttons using DHTML and CSS in FrontPage

Properties

Article ID: 928715 - Last Review: December 6, 2006 - Revision: 1.0
APPLIES TO
  • Microsoft Expression Web
Keywords: 
kbhowto kbexpertiseinter KB928715

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