Microsoft KB Archive/928715

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

Article ID: 928715

Article Last Modified on 12/6/2006

-

APPLIES TO


 * Microsoft Expression Web

-



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.



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:  Start Expression Web, and then create a new blank page. On the View menu, click Page, and then click Code at the bottom of the page.  In the   area of the page, insert the following code: 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 }   In the   area of the page, insert the following code: Please see http://www.microsoft.com for more. Please see http://www.msn.com for more.  On the File menu, click Save.</li> In the Save As dialog box, specify a location to which you want to save the file.</li> In the File name box, type Example1, 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>

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: <ol> Start Expression Web, and then create a new blank page.</li> On the View menu, click Page, and then click Code at the bottom of the page.</li>  In the   area of the page, insert the following code: 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>  In the   area of the page, insert the following code: Please see http://www.microsoft.com</a> for more. Please see http://www.msn.com</a> for more. </li> On the File menu, click Save.</li> In the Save As dialog box, specify a location to which you want to save the file.</li> In the File name box, type Example2, 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>

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: <ol> Start Expression Web, and then create a new blank page.</li> On the View menu, click Page, and then click Code at the bottom of the page.</li>  In the   area of the page, insert the following code: 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> In the   area of the page, insert the following code: 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 to which you want to save the file.</li> <li>In the File name box, type Example3, 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>

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: <ol> <li>Start Expression Web, and then create a new blank page.</li> <li>On the View menu, click Page, and then click Code at the bottom of the page.</li> <li> In the   area of the page, insert the following code: 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> In the   area of the page, insert the following code: 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 to which you want to save the file.</li> <li>In the File name box, type Example4, 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>

<div class="references_section">