CSS Introduction | Basic CSS Properties | CSS Links

Tags:

With CSS, you can set various effects on links.

Links can use many CSS properties, such as color, font-family, and background. You can also remove the underline from linked text by setting the text-decoration property to none.

<style>
    a {
        background-color: #FFFFE0;
        color: darkslategray;
        font-size: 1.3em;
        text-decoration: none;
    }
</style>

A link has five states, and a different style can be applied to each state.

  1. link: The default state of a link, where the user has not yet visited the linked page.
  2. visited: The state where the user has visited the linked page at least once.
  3. hover: The state where the user’s mouse cursor is over the link.
  4. active: The state where the user is clicking the link with the mouse.
  5. focus: The state where the element has focus through a keyboard event, mouse event, or another interaction.
<style>
    a:link { color: olive; }
    a:visited { color: brown; }
    a:hover { color: coral; }
    a:active { color: khaki; }
</style>

With CSS, you can easily make a link look like a button.

<style>
    a:link, a:visited {
        background-color: #FFA500;
        color: maroon;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    a:hover, a:active { background-color: #FF4500; }
</style>