HomepageArrowWeb development tips and tricksArrowHTML and JavaScript tips and tricks

Changing the properties of links on a web page

Sponsored Links

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

<a href="someplace.html" style="color:#FF00FF">Someplace</a>

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.

<a href="someplace.html"
style="color:#CC0000;text-decoration:none;font-size:14pt;
font-face:Arial, Verdana, Sans-serif">
Someplace</a>

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 href="someplace.html" class="implink">Someplace</a>

A final link to Someplace



Click this button if you liked the article!
AddThis Social Bookmark Button

Page contents: Article on how to change the properties (such as color, font, style etc.) of hyperlinks on web pages using cascading style sheets (CSS).


Please vote