SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [uk] [vi] [zh] Espace de traduction

Download

Hypertext link styling

February 2007 — updated on : June 2015

All the versions of this article:


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 1.2, SPIP 1.2.1 introduced the additional feature of allowing you to graphically differentiate between two specific types of link, being those that are internal to your site and those that link to external 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

From SPIP 1.7.1 onwards, you can also change the appearance of the link to the currently display page amongst a list of similar links (as in a menu of articles in the same rubrique/section), which makes it easily visible to the user which page they are currently visiting. The stylesheet rule used to specify such "current" links is : .on. See article: "Highlighting an item in a list" for more details on this.


Show the template of this page Site powered by SPIP | Translation area | Private area