IntroDuction to Css
Hypertext Links
How do I change the appearance of my links?
On the internet, hypertext links are traditionally recognized 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.
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.
The dynamic pseudo-classes: :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:
- The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
- The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
- The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.
CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.
User agents are not required to reflow a currently displayed document due to pseudo-class transitions. For instance, a style sheet may specify that the 'font-size' of an :active link should be larger than that of an inactive link, but since this may cause letters to change position when the reader selects the link, a UA may ignore the corresponding style rule.
Example(s):
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
Example(s):
An example of combining dynamic pseudo-classes:
A:focus { background: yellow }
A:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.