12 · 01

Changing the properties of links on a web page

The color of link on a web page is set using the link attribute of the <body> tag. The default color is blue (#0000FF). That is, if you don't supply a color value (or color name) to the link attribute, the browser makes all the links on the web page blue in color. Specifying another value, say green, to the link attribute will turn all links in the document into green color.

Two different colors for links

Only one color can be set through the link attribute. With Style Sheets, you can have links of different colors and styles in the same document. Styles sheets can be applied to documents in three different ways. In this article, I'll cover two ways to embed style information on a web page.

Inline Styles

With inline styles, the style information is placed inside the <a> tag. The style consists of a property:value pair. In this case, the color property makes the link pink (hexadecimal code for pink is #FF00FF). Here is a link to Someplace. In addition to color, style sheets also allow you to set other values for the link such as font size, font face and text decorations.
There are four property:value pairs each is separated from the other by a semi-colon. font-size sets the size to 14 points, text-decoration removes the underlines from the link and font-family specifies the font to be used. Here is another link to Someplace.

Embedded Styles

Inline styles are similar to the <font> tag. Populating a page with these is considered bad programming practice. It's better to include all the style information inside the document HEAD section. The Styles placed in the head are enclosed in the <style>-</style> tags.
<style type="text/css">

a.implink        {color:#FF9900;
                  font-size:12pt;
                  text-decoration:underline;
                  font-family:Verdana, Arial, Sans-serif}
</style>
  • The style has four property:value pairs separated by semicolons.
  • All the property:value pairs are placed inside curly braces.
  • The style information applies to A, which is known as the selector. Furthermore, the selector is given a name, implink, through which it will be called from the class attribute.
A final link to Somewhere.
About the Author Kyle Reddoch is a Web Expert and Internet Guru located in Amarillo, TX. To learn more about him, visit his website at KyleReddoch.com.