D-Zine - Precision Design :
LINKS









LINKS

You can specify the color of text links in the body tag.
These attributes are valid (with the default colors entered as hex values):

TEXT="#000000" - Color of plain text on the page.
LINK="#FF0000" - Color of non-visited links on the page.
VLINK="#800000" - Color of visited links on the page.
ALINK="#FF00FF" - Color of text link when clicked.(IE only)


It is strongly advised that you stick to the default colors for links, since visitors might otherwise overlook that a certain piece of text is a link. If you decide to use non-default colors, you should make sure that the links stand out from the rest. ( For example, by placing a little red triangle next to it as has been done on this page.)

Other techniques might be to write the links in bold or underline them. In any case, what matters is that the visitor will be able to easily identify the links on your page.

Sometimes designers want the links to be in the same colors as the rest of the text for aesthetic purposes.
However, this is in conflict with the way users read pages. Users read web pages with a scanning technique – where the eyes scan the pages before reading the content. The most important keystone in the scanning process is the links. Users will use the links to get an overview of the topic that is explained in the context.
Therefore, you should really think twice before removing the option to scan the page.




Simple link customization:

You can customize the look of single links on the page by simply adding font tags with the <a> tags.

For example:
<a href=http://www.echoecho.com><font color="green">Link To EchoEcho.Com</font></a>

This will result in a green text link – despite the link color you might have defined in the body tag.

Note: If you do not place the <font> tags inside the <a> and </a> tags the font color will not affect the link.




Advanced link customization:

While you can specify the color of your links in the <body> tag – you can’t define the detailed look of them.
This can be done with >links css.htmCSS – Cascading Style Sheets
.

With CSS, you can remove the underscore from links, define the font and size used for links, as well as the color, all in one place. This means that you don’t have to add the customization to each and every link on your page!
Instead you can just have a single CSS specification in the head section of your page that defines the look of all links on the page.

For example:
<HTML>
<HEAD>
<TITLE>This is my page</TITLE>

<STYLE type=text/css>
A:link {COLOR: #337878; FONT-SIZE: 15px; TEXT-DECORATION: none; FONT-WEIGHT: bold}
A:visited {COLOR: #000099; FONT-SIZE: 15px; TEXT-DECORATION: none; FONT-WEIGHT: bold}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: #AA0000; FONT-SIZE: 15px; TEXT-DECORATION: underline}
BODY {COLOR: #000000; FONT-SIZE: 12px; FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif}
</STYLE>

</HEAD>

The above example shows how to add style settings for links and plain text on your pages.
With style settings you have much more control of the precise look of your text than you get with the <font> and <body> tags in plain HTML.

For more information on CSS click here

 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"