Using an Embedded Style Sheet to Format Hyperlinks

You can use styles to format text consistently throughout a web page. Although styles follow a standard, not all browsers fully support styles. (For example, Netscape and Internet Explorer vary in their support of styles.) As a result, some features may or may not work depending upon which browser you use. However, I find that the browser, Opera, seems to fully support styles. You may want to download and install this free browser to verify that your styles are working properly.

Example

This is an example of a link that uses an embedded style sheet to remove the underline and format the link in a different color.  (You need to format the link in such a way that a visitor knows that it is a link.)  An embedded style sheet requires a style section within the HTML code.  The style section must be located between the set of HEAD tags.  Here's what the code looks like:

<HEAD>
...more code may be here
<STYLE>
A:link {text-decoration: none;color: blue}
A:visited {text-decoration: none;color: #009900}
A:active {text-decoration: none;color: red}
</STYLE>
</HEAD>

 

Explanation...

  • A:link specifies the attributes for the unvisited link.  A:visited specifies the attributes for a visited link.  A:active specifies the attributes for an active link.

  • To remove the underline, specify:  text-decoration equal to none.

  • To select a color, specify:  color equal to red (or use one of the 16 predefined colors; you can also specify the hex number of any color.)


Web site contact: ccwebmaster@psu.edu
Updated February 28, 2008
© 2005 The Pennsylvania State University