How To Give Link To a Text Using Css In Html

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

CSS, links can be styled in different ways,Links can be styled with any CSS property (e.g. color, font-family, background, etc.),In addition, links can be styled differently depending on what state they are in.When setting the style for several link states, there are some order rules,a:hover MUST come after a:link and a:visited,a:active MUST come after a:hover,This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Css Link

1.Add Link  To The Text  using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        /* unvisited link */
        a:link {
            color: red;
        }

        /* visited link */
        a:visited {
            color: green;
        }

        /* mouse over link */
        a:hover {
            color: hotpink;
        }

        /* selected link */
        a:active {
            color: blue;
        }
    </style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>
2.Create a Button Type Link
<!DOCTYPE html>
<html>
<head>
    <style>
        /* unvisited link */
        a:link, a:visited {
            background-color: #f44336;
            color: white;
            padding: 14px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }


        a:hover, a:active {
            background-color: red;
        }
        }
    </style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Related Post