CSS - Links

Previous
Quiz
Next

Links are used to navigate from one webpage to other with a single click. We can use CSS properties to style links in various ways.

CSS Links Example

We can create a link in webpage using <a> tag. With CSS we can style this to built text link, button link and image link as shown below.

CSS CSS Button css-image-link

 

Table of Contents


 

A link in a webpage exist in various states, and these states of link can be styled using pseudo-classes in CSS. Following are common states of link.

  • Link: Represents unvisited links. This state of links can be styled with :link pseudo class. (This is default state for anchor tag).
  • Visited: Represents the links that are already visited (present in browser's history). This state of links can be styled with :visited pseudo class.
  • Hover: Represents the state when user hover's the mouse pointer over link. This state of links can be styled with :hover pseudo class.
  • Active: Represents the state when user clicks the link. This state of links can be styled with :active pseudo class.

Following are default styles applied to a link in webpage. You can modify this style using CSS.

  • All the links will be underlined. You can remove this by setting text-decoration property to 'none'.
  • All the unvisited links will be in blue color and visited links will be purple. You can use color property to modify this
  • The mouse pointer changes to a little hand icon when you hover over a link. You can use cursor property to modify this.
  • Hovered links will be underlined and active links are styled in red.

CSS Text Link

A text content when clicked will navigate to a different webpage or a section of same page is called text link. Following example show how to make a text link.

Example

<html>

<head>
    <style>
        body{
            padding: 10px;
        }
        a {
            color: blue; 
            text-decoration: none; 
        }
        a:hover {
            text-decoration: underline;
            transform: scale(1.1);   
        }
    </style>
</head>

<body>
    <a href="/index.htm"> Click Me </a>
</body>

</html>

As mentioned above in this example we have used pseudo-classes to style different states of a link.

Example

<html>

<head>
    <style>
        body {
            padding: 10px;
            font-size: 1.2rem;
            font-family: sans-serif;
        }

        a {
            display: inline-block;
            transition: transform 0.2s ease;
        }

        a:link {
            color: green; 
            text-decoration: none;
        }

        a:visited {
            color: purple; 
        }

        a:hover {
            text-decoration: underline;
            transform: scale(1.1)
        }

        a:active {
            color: black;
        }
    </style>
</head>

<body>
    <p> Select course </p>
    <ul>
        <li> <a href="/html/index.htm" target="_blank"> 
            HTML 
        </a> </li>
        <li> <a href="/css/index.htm" target="_blank"> 
            CSS 
        </a> </li>
        <li> <a href="/python/index.htm" target="_blank"> 
            Python 
        </a> </li>
    </ul>
</body>

</html>

In CSS we can styles links in such a way that it looks like a clickable button. Following example shows this.

Example

<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            height: 100px;
        }

        .button {
            display: inline-block;
            color: white;
            background-color: blue;
            height: 20%;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .button:hover {
            background-color: darkblue;
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <a class="button" href="/css/index.htm" target="_blank" > 
        CSS
    </a>
    <a class="button" href="/html/index.htm" target="_blank" > 
        HTML 
    </a>
</body>

</html>

We can also attach links on images displayed in webpage. Following example shows this.

Example

<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            height: 100px;
        }

        a img {
            transition: all 0.3s ease;
            border-radius: 5px;
        }
    
        a:hover img {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <a href="/css/index.htm" target="_blank" > 
        <img src="/css/images/css.png" 
              alt="css-image-link" height="60px" >
    </a>
</body>

</html>
Print Page
Previous
Next
Advertisements