How do I change the appearance of my links?
On the internet, hypertext links are traditionally recognised and presented in blue underlined text. But you’ve almost certainly noticed that this presentation varies from one site to another. You can easily change this default presentation style of your links using CSS. Here’s a standard example :
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
- This "a" applies to every link that is displayed on your web page, that is, anything that is coded with the <a> tag, without exception, regardless of whether they have class attributes or not. In the example above, the links are displayed in green without any "decoration": that is, they are not underlined as they would normally be by default.
- Several other states are available for hypertext links by specifying one of the "pseudo classes" (:hover, :visited, etc.). So "a:hover" only concerns the appearance of links when the user "hovers" their mouse over the link. In the example above, links will become red and underlined whenever a user passes their mouse cursor over the link.
Note that the CSS recommendations for CSS 2 indicates that, in order to be sure that the styling code rule a:hover is effective, it must appear AFTER the others in the physical sequence of CSS styling rules.
SPIP hypertext links
SPIP graphically differentiates the different types of links, in particular internal links to the site and links to other sites. This is accomplished by specifying definitions for each style, which we recommend that you customise to your own taste:
- a.spip_in applies to links that are internal to your website. For example:
The link [->article2433] generates an internal link to article 2433 of your site, which appears like this: SPIP and Style Sheets (CSS)
- a.spip_out applies to links that are external to your website. For example :
_The link [uZine->http://www.uzine.net] displays the external link in this way: uZine
- a.spip_url applies to URL addresses that are converted into hypertext links. For example:
The link [->http://www.uzine.net] displays the address of the URL and creates a hypertext link that looks like this: http://www.uzine.net
- a.spip_glossaire applies to links to an external glossary (currently the online encyclopaedia Wikipedia). For example:
The link [?SPIP] generates the following kind of link: SPIP
How not to confuse yourself
Note that for any given hypertext link, several style definitions can or may apply. For example, suppose you specify the following style rules:
a {
color: green;
text-decoration: underline;
}
a.spip_in {
color: orange;
}
Internal links (assigned the spip_in class) are coloured orange, but they also inherit the underlining specified by <a>. Any other links, including those not generated by SPIP, will display in green and be underlined.
It’s important to note a fundamental property of style sheets at this point: graphical styles are applied in sequence from the most generic to the most specific. This allows you specify a general behaviour for elements and only modify the characteristics for a smaller subset of elements. This cascading inheritance is what gives such great strength to the use of stylesheets in general.
Displaying the current active link
In a list of links, you can highlight the one concerning the page you are on. The style used to do this is: .on. See article: "Highlighting an item in a list" for more details on this.