Home » CSS

Styling Links in CSS

CSS Styling Links: Here, we are going to learn about the styling to links in CSS, defining color, background colors, underline etc.
Submitted by Anjali Singh, on November 04, 2019

CSS Styling Links

The links in CSS can be styled in various ways to make our website more presentable and attractive. The links can also be styled depending on their states e.g. visited, active, hover, etc.

The four links states are,

  1. a:link: a normal, unvisited link
  2. a:visited: a link that user has visited
  3. a:hover: a link the moment user mouses over it
  4. a:active: a link when it is clicked

There are various methods to style our links, some of them are listed below,

Color

The color of the links can be altered with whatever you decide to pick. As mentioned the links can be styled depending on their states.

Syntax:

    a:link{
        color:red;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        a:link {
            background-color: red;
            color: white;
        }
        
        a:active {
            background-color: black;
        }
    </style>
</head>
<html>

<body>
    <a href="#">It's a link1</a>
    <br/>
    <a href="#">It's a link2</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
</body>

</html>

Output

styling link in CSS | Example 1

The above code sets white color to the link.

Text Decoration

The text-decoration is the most commonly used property when it comes to styling links.

The text-decoration property is used to remove or set underlines on links. The possible values of text-decoration are: none, underline, overline, blink, line-through and inherit.

Syntax:

    a:link{
        text-decoration:none;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        a:link {
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: overline;
        }
    </style>
</head>
<html>

<body>
    <a href="#">It's a link1</a>
    <br/>
    <a href="#">It's a link2</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
</body>

</html>

Output

styling link in CSS | Example 2

The above code sets the decoration to the link and overline, when we hover on the link.

Background Color

The background-color is yet another most commonly used property to set the background color of our links so that they appear flashy and once any visitor visits your site, they won’t be able to ignore that link.

Syntax:

    a:link{
        background-color:red;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        a:link {
            background-color: red;
        }
        
        a:hover {
            background-color: pink;
        }
    </style>
</head>
<html>

<body>
    <a href="#">It's a link1</a><br/>
	<a href="#">It's a link2</a><br/>
	<a href="#">It's a link3</a><br/>
	<a href="#">It's a link3</a><br/>
</body>

</html>

Output

styling link in CSS | Example 3

The above code sets the background-color to the link when we hover on the link.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.