EverWeb Codebox

Hyperlink Styles

Link State & Pseudo Classes

The HTML to create a hyperlink was discussed on the PREVIOUS page. This page is about styling these links.

A hyperlink can have four states. They are defined using these pseudo classes...

Normal     a:link - a normal, unvisited link

Visited      a:visited - a link the user has visited

Hover       a:hover - a link when the user mouses over it

Active       a:active - a link the moment it is clicked


If the web designer doesn't define styles for these, the browser standard is used. The color varies with the different browsers but is near to #0000EE and the text is underlined by default.

There is no change in color for visited, hover or active by default.


In practice, the visited state is only used for those long, boring pages with lots of text hyperlinks and the active is hardly ever used at all. If the designer doesn't define these states in the stylesheet then they don't exist!


It's important to realise that, if all four states are required in the styles, they must be entered in the order shown above - otherwise they won't work.

Styles In EverWeb

Every time the user creates a text style, the application writes it to a stylesheet named "textstyles" which resides in the ew_css folder.

There is provision for default styles in the Format menu but, at the time of writing, this has limited functionality.

Text styles should be kept uniform throughout a website and it is time consuming to have to go to the Hyperlinks inspector to set the style for every link.

For most occasions, all that is required is to set the normal and visited colors and perhaps remove the underline. To do this, some code is pasted into the Head Code Box in the EverWeb Site Publishing Seetings page.

Code Examples

These three examples will cover most situations. See THIS page for more info about hex color numbers and how to find and use them.

Note the use of "!important". This really is important and is required on every rule to overwrite the styles in the EverWeb textstyles.css.

Normal & Hover

Normal & Hover - No Underline

Visited

<style type="text/css">

a {color:#000FFF !important}

a:hover{color:#FF0000 !important}

</style>

<style type="text/css">

a {color:#000FFF !important;

text-decoration:none !important}

a:hover{color:#FF0000 !important}

</style>

<style type="text/css">

a {color:#000FFF !important}

a:visited {#7F007F}

text-decoration:none !important}

a:hover{color:#FF0000 !important}

</style>

If "visited" is used, make sure it comes before "hover". The sequence shown in the EverWeb Hyperlinks inspector is misleading - Normal, Rollover, Visited.

Although this is the sequence that Apple has always used it doesn't mean that it is correct!