CSS: styling links

CSS: styling links
 
CSS: styling links
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


To control the appearance of hypertext in CSS, use pseudo-classes, which are specified after selector A and a colon. Table 1 shows possible pseudo-classes and descriptions to them.

Table 1. Pseudo-classes when working with hypertext.

Value

Description

A:link

Defines the appearance of previously not visited link.

A:visited

Defines the appearance of previously visited link.

A:active

Defines the appearance of an active link. It becomes active if you click on it.

A:hover

Defines link style if hovered over it with a cursor.

Usually the use of pseudo-class links has the same effect as applying style to the selector A, so this pseudo-link can be omitted.

Hypertext without underlining

One of the most popular uses of CSS is hiding the underline in hypertext. This decision is not user-friendly because the user can not immediately see the distinction between the text and link. Because, everyone is used to the fact - if it's underlined, then it must be link. But if used correctly, absence of the underline can give a certain style to the site. For example, often if you hover over a link it becomes underlined, changes color, or both effects simultaneously (Example 1).

Example 1. Underlining links and changing their color.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      a:link {
        text-decoration: none; /* Removing underline in links */
      }
      a:visited { text-decoration: none; }
      a:active { text-decoration: none; }
      a:hover {
        text-decoration: underline; /* If hover over the link it becomes underlined */
        color: red; /* Link color */
      }
    </style>
  </head>
  <body>
    <a href="#">Place your cursor here to see the result</a>
  </body>
</html>

The following is the result of this example. If you hover over the link, it becomes red and underlined.

Underlined and overlined links

Another example demonstrates the use of underlined and overlined links simultaneously. With this parameter fine lines will appear above and below the link if you hover the cursor over it. This is achieved by setting the parameter text-decoration: underline overline in the selector a:hover.

Example 2. The use of underline in links.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      a:link { text-decoration: none; }
      a:visited { text-decoration: none; }
      a:active { text-decoration: none; }
      a:hover {
        text-decoration: underline overline; /* Underlined and overlined link */
        color: red; /* Link color */
      }
    </style>
  </head>
  <body>
    <a href="#">Place your cursor here to see the result</a>
  </body>
</html>

The result of this example is shown below.

Change link size

Example 3 shows how to change the size of the link when hovering the cursor over it.

Example 3. Change the size of a link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      a:link { text-decoration: none; }
      a:visited { text-decoration: none; }
      a:active { text-decoration: none; }
      a:hover {
        font-size: 24px; /* Font size */
        font-weight: bold; /* Bold text */
        color: red; /* Link color */
      }
    </style>
  </head>
  <body>
    <a href="#">Place your cursor here to see the result</a>
  </body>
</html>

The result of this example is shown below.

Change the color of the underline

Links, in CSS, have one interesting feature. The link color, if you hover your cursor over it, remains the same, but it acquires different underline color (Example 4). Note that this feature doesn't work in some browsers.

Example 4. Creating underline of different color.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      a:link { color: blue; text-decoration: none; }
      a:hover { color: red; text-decoration: underline; }
      .link { color: blue; }
    </style>
  </head>
  <body>
    <a href="#"><span class="link">Place your cursor here to see the result</span></a>
  </body>
</html>

The result of this example is shown below.

Links of different colors

Often you need to use different colors and fort size on the same page and apply the respective links to different areas on the web page. Some for the menu, others for the text. In that case, create two or more classes with different parameters and apply them accordingly. In Example just change the values in the class, and the color in links, where the class is used, will change automatically.

Example 5. Links of different colors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      a { font-size: 14px; color: red; }
      a.link1 { font-size: 12px; color: green; }
      a.link2 { font-size: 14px; color: blue; }
    </style>
  </head>
  <body link="#0000ff">
    <p><a href="#">Link 1</a></p>
    <p><a href="#" class="link1">Link 2</a></p>
    <p><a href="#" class="link2">Link 3</a></p>
  </body>
</html>

The result of this example is shown below.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation