Learn how to change the color, style, font and other properties of links on a web page using cascading style sheets (CSS).

Main navigation tabs of the web site:

Changing the properties of links on a web page

HTML & JavaScript

Tips and tricks

Homepage

Main navigation links of HTML and JavaScript tips and tricks section

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

<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).

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.

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>

Someplace

People who read this article also found the following helpful.

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).

Page URL: http://www.webdevelopersnotes.com/tips/html/ changing_the_properties_of_links_on_a_web_page.php3

50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine

Search WebDevelopersNotes.com