DetailPage-MSS-KB

Microsoft small business knowledge base

Article ID: 928715 - Last Review: December 6, 2006 - Revision: 1.0

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  (http://support.microsoft.com/kb/825450/ ) How to create custom hyperlinks by using cascading style sheets in FrontPage 2003
196488  (http://support.microsoft.com/kb/196488/ ) What are cascading style sheets?
222949  (http://support.microsoft.com/kb/222949/ ) How to create hover effects for form buttons using DHTML and CSS in FrontPage

APPLIES TO
  • Microsoft Expression Web
Keywords: 
kbhowto kbexpertiseinter KB928715
Share
Additional support options
Ask The Microsoft Small Business Support Community
Contact Microsoft Small Business Support
Find Microsoft Small Business Support Certified Partner
Find a Microsoft Store For In-Person Small Business Support