[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideGuide pages > 7. How to put CSS into Web pages

7. How to set CSS for anchors and links

Topics

Common

 How to set CSS for anchors and links

It is necessary to put link pseudo-classes into certain order. If you put a:hover to the top of the list, it doesn't work with visited links. If visited links or :active have the same background-color as the hover has in text-color, the browser doesn't show the link text at all! The correct order is the following:

a {text-decoration: none} /* because of some browsers the element A must be defined */
a[name] {color: ... !important; background-color: transparent !important} /* CSS2-compliant browsers implement a:hover also for named anchors; in order to avoid a:hover to change properties of named anchors they must define as important; in this solution a:hover should not use the !important rule */
a:link {color: #3f3f3f; text-decoration: underline;} /* unvisited link */
a:visited {color: green; text-decoration: underline;} /* visited link */
a:hover {color: red; text-decoration: none} /* the mouse "hovers" over the link */
a:active {color: green; text-decoration: none; background-color: yellow;} /* according to CSS2-specification :active should work between on-mouse-down and on-mouse-up events but according to CSS1 the link stays marked until the user click with mouse to another place */
a:focus {color: green; text-decoration: none; background-color: yellow;} /* :active and :focus are different states; Only :focus should leave the link marked until the next click of the mouse (:focus is designed primary into keyboard navigation and form control elements; browsers are not obliged to support it with the A element) */

Look at examples from my old presentation page[S][Pw], which I used CSS to define background colors to image links. I made also a separate test page[S].

If you want that the browser takes account a class for some ancestor or the BODY element (for example <BODY class="body_class">), make this kind of rules using matching patterns[S][Pw]:

.own a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* the rule match first to all elements, which have the class own, but next the author gives an additional condition: the rule is applied only to the pseudo-class :hover */
.own table a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* matching rules have more conditions; The rule says: :hover works only inside tables, which have an ancestor element, which has the class own */

Browser-specific notes:

  1. Opera 3.x and Netscape 4.x put underline to anchors, which have only the name of the anchor (name="anchor_name"), but not the attribute href even it should not to do so. A without href is an ordinary type selector and :link and :visited are pseudo-class selectors, which should work only if the anchor element have the attribute href.

  2. Combinated pseudo-classes work property only in Mozilla Gecko and Opera 7.x+ browsers. In principle by using a:link:hover and a:visited:hover combinators could prevent that a:hover would concern also named anchors but they don't work in Opera 4.x-6.x browsers. MS IE browsers read only the latter part of the combinator (a test, where both the foreground and background colors should change).


  1. I have explained the functionality of link-related pseudo-classes in the page 4[S][Pw]. In addition it is worth to remark that MS IE implements a:active according to CSS1 unlike new Opera and Mozilla Gecko browsers, which support in this matter CSS2.

  2. Mozilla Gecko and Opera 7.x browsers apply dynamic pseudo-classes for many elements. The consequense is that they implement a:hover also for named anchors and some form elements (Model23b.html[S][Pw]). Texts might drift, if :hover has some property, which affects to the position of elements (for example font-weight) and which is different as the text around the mouse pointer.

[Top]

Image and text links

In principle image- and text links should be handled a little bit differently. If the image doesn't have a definition of its own to link pseudo-classes, the possible background-color or background-image should be only one line height and not grow to the height of the image.

W3C: CSS2: 10 How to put CSS into Web pages details, 10.6.1[Pw].

If a:hover, a:active and a:focus have background properties also for images should define rules, for example:

a.orange {display:block; border-width:0} /* might need height and width properties */
a.orange:active {color: #f85b07; background:#dcd2d3; border-width:0;}
a.orange:active img {background:#f85b07 url(.gif); border: #660033 1px solid;}
a.orange:focus {color: #f85b07; background:#dcd2d3; border-width:0;}
a.orange:focus img {background:#f85b07 url(.gif); border: #660033 1px solid;}

Browser-specific notes:

  1. Be careful not define a:hover so, that the text size changes. The change might cause the need to be reformat all the content, which is near the element and below it. Continuous need to reformat the document might make the handling of the page slow, it might cause unstability and even crash the browser. Opera 5.12-6.x doesn't add space for the text, if the size changes. The result might cause an ugly effect (a test), but this matter avoids the need of reload the page, it helps the browser to stay stable and the scrolling of the pages don't become slow (this matter might be also the reason, why Opera 4.x-6.x don't allow dynamic changes of the display value).

    I the text is intended to make bigger with a:hover I recommend to follow my recommendations below:

    • The link is inside a block and the block has so big height and width values that the text fits inside the block without causing reflow of other elements.
    • The link has defined as block and it has been given width and height properties so, that Opera 5.x-6.x don't cut the text when the mouse goes over the link.
  1. Setting for the link display:block a normal text link looks like an image. In new Opera and Netscape the whole element works always as a link but in MS IE the whole element is some cases active and sometimes not; in the latter case display:block cause just the visual effect but only the the text is active. if in MS IE the width property has other value than auto links are active at the whole available width except in situations, where links use the property float and links don't fit to the same line.

  2. display:block doesn't work correctly in Netscape 4.x and MS IE 4.x for Windows browsers.

  3. In MS IE browsers the background color is for the whole image without the definition display:block but not in Opera 4.x+ and Mozilla Gecko browsers. Indeed the correct display valued should be display:inline-block (I inform about this matter in the page Problems in the CSS2 specification[S]. Opera 4.x+ accepts also the display:inline-table, which cause inline level rectangular box and in most cases approximately the correct rendering.

  1. Opera doesn't support background images for dynamic and link pseudo-classes (fixed in Opera 7.0 Beta 2, but background properties don't work flawless in Opera 7.01). (A test.)

  2. In some Opera browsers border:none doesn't take from images borders.

  3. In some old[S] CSS-supporting browsers border don't work with links. If you want to use borders with a:hover set also borders for A elements so that the border color is the same as the background color. Then visible borders in the state a:hover don't cause reflow of any part of the document. The system works well in Opera also with a:active. MS IE and Mozilla Gecko browser puts build-in implementations over borders, which the author have set for a:active. Borders or default oulines for pseudo-classes :active and :focus work just randomly in Mozilla Gecko browsers. First versions of Opera 7.x don't support :focus at all for A. I found by accident that Opera 7.23 supports :focus for the A element (I don't know exactly what is the first version, which support this feature). Because :focus doesn't keep the visitor in a certain user focus I don't regard missing support of it an actual bug. But now the user can "paint" links and keep them temporary in a certain status.

  1. I have found, that if text-decoration and background-color properties are changed, all changes don't take effects in browsers. The functionality must test in many browsers. It is especially problematic to change background-color:transparent to some other. Look at examples from my old presentation page[S][Pw], which I used CSS to define background colors to image links. I made also a separate test page[S].

  2. Such Opera browsers which are older than Opera 7.x don't support the format a.class:pseudo-class element {...} (for example a.class:hover img {border:1px solid black} - works if img has been taken away).

  3. I handle links also in an extra page, which concerns dynamic menus[S].

[Top]

Attribute What are selectors, classes and id-attributes

CSS2 offers also the possibility to use attribute selectors. Below is some examples of the usage of them:

a[href] {color:blue} /* this is in practice the same as a:link */
a[id] {color:blue} /* match to anchors, which have identifiers - nice way to mark links to the same page */
a[id="an_anchor_name"] {color:blue} /* match to an anchor, which have a certain name of the identifier */
a[href] img {background:yellow} /* you can also combine element type and attribute selectors making matching patters */
a[href="http://www.server.fi/~somebody/"] {color:blue} /* match to a certain link */
a[target="new"], a[target="_blank"] {color:olive; background-color:yellow} /* links, which open a new browser window are marked differently as other links */

Browser-specific notes:

  1. If you want to test, how attribute selectors work, you must download a new Opera or Mozilla Gecko browser. You can see in this page the effect. You can find other attribute selectors concerning notes from the page 4[S][Pw]

To link elements like other elements can define How to set CSS for backgrounds and borders, which I handle next.

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004