CSS Styling Links

Published by StudyMuch on

StudyMuch CSS Styling Links

CSS Stylish Link

In this tutorial we will learn how to style the Link Tag of HTML documents and webpages. Here we learn how to change the color, background of link and apply the lots of CSS properties like visited, hover, focus, active and we also add icon in link etc.

If you don’t know how to make link in HTML, first visit the HTML Link Tutorial then learn this Link Styling Tutorial in CSS.

CSS Link

With CSS properties the link can be styled many different ways, we style and design the link by changing it properties such as (color, background, background-color, text-decoration, add icon etc.

The style that is default in Link, we can easily change the default property of link through using the CSS properties and style them different design.

Link Defaults Style; –

  • Unvisited links color is blue and visited link color are purple.
  • Links are underlined.
  • Hovering a link make the mouse a little hand icon.
  • Focused links have an outline around them.

Styling Links in CSS

We can styling the link in CSS by using the CSS Pseudo-classes, it is the property of CSS that we use to style the different element of HTML. Some pseudo-classes are given below which we have used to style the CSS link.

  • visited: This is a visited link (exists in browser’s history).
  • hover: A link this is being hover, when the mouse is over the text it changes the properties.
  • active: A link that is activated when it clicked on.
  • focus: A link focus when we clicked and by pressing the Tab Key of keyboard.

Link Text Decoration

We change or remove the link default style like underline, color, font style etc. now we change some properties of link by CSS in below programming example.

Programming Example;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Styling Link</title>
    <style type="text/css">
    a{color: red;}
    .link-1{
        color: blueviolet;
        text-decoration: none;
        font-family: cursive;}
    </style>
</head>
<body>
    <p>This link is with underline with 
    different color.</p>
    <a
href="https://shubhamverma07.blogspot.com">
shubhamverma07.com</a>
<hr>
    <p>This link is without underline with
 default color & different font style.</p>
    <a class="link-1"
href="https://shubhamverma07.blogspot.com">
shubhamverma07.com</a>
</body>
</html>

Output of programming;

Stylish Links CSS

Above you can see the programming output, first link is different color with underline and second link is with default color but it has different font-family and without underline.

Link’s Background Color and Border

We also change the background of link, you may want to add a different background color and border style of link, to change the link background color we need to use CSS background-color property, and use CSS border property to insert the border in link.

Programming Example;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Link with border 
     and background</title>
    <style
type="text/css">


    a{ color: red;
        background-color: yellow;}
    .link-1{
        color: blueviolet;
        text-decoration: none;
        font-family:fantasy;
        background-color: lightgreen;
        border: 1px
        solid green;
        border-radius: 20px;}
    </style>
</head>
<body>
    <p>This link is with underline with 
     background-color.</p>
    <a
href="https://shubhamverma07.blogspot.com">
shubhamverma07.com</a>
<hr>
  <p>This link is without underline, with 
border style and background color.</p>
    <a class="link-1"
href="https://shubhamverma07.blogspot.com">
shubhamverma07.com</a>
</body>
</html>

Output of programming;

CSS Stylish Links

Above you can see the output of programming, in first link with background and second link is with background color and border.

Link With Icon

Here we add the icon with link, it is good idea to add icon with link.

If you don’t know how to insert different and new link on HTML document visit: CSS Icon Tutorial and learn all the Icon Library.

Now here we add the icon with link.

Programming Examples;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Link</title>
    <link rel="stylesheet" href="https:
   //fonts.googleapis.com/icon?family=
    Material+Icons"/>
</head>
<body>
  <p>This link is with the icons.</p>
<p><a href="https://shubhamverma07.
 blogspot.com">shubhamverma07.com
 <i class="material-icons">launch</i>
 </a></p>


   <p><a href="https://www.facebook.com">
   facebook.com<i class="material-icons">
   facebook</i></a></p>

  <p><a href="https://www.studymuch.in">
  studymuch.in<i class="material-icons">
  language</i></a></p>

   <p><a href="https://www.google.com">
   www.google.com<i class="material-icons">
   search</i></a></p>

   <p><a href="https://www.studyons.com">
   studyons.com<i class="material-icons">
   verified user</i></a></p>
</body>
</html>

Output of programming;

Above you can see the programming output, the link is with the icons, this is the best and look attractive.

Stylish Link Advance (pseudo-class)

Here is the programming examples of stylish link, we used here CSS property such as hover, visited, active, link, focus etc.

Programming Example of Advance Link;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Link Advance</title>
    <style type="text/css">
        body{
            font-size: 50px;
            text-align: center;}
        i.material-icons{
            font-size: 35px;}
        a:link{
            color: green;}
        a:visited{
            background: red;}
        a:focus{
            border: 2px solid red;
            background: green;
            color: white;
            border-radius: 10px;
            transition-duration: 3s;
        }
        a:hover{
            border: 2px solid red;
            color: white;
            background: blue;
            border-radius: 10px;
            text-decoration: none;
                a:active{
            text-decoration: underline;
            border: 1pxsolid yellowgreen;
            color: white;
            background: red;
            border-radius: 10px;
        }
    </style>
 <link rel="stylesheet"href="https:
 //fonts.googleapis.com/icon?family
 =Material+Icons"/>
</head>
<body>
   <p>This link style is advanced.</p>
  <p><a href="https://shubhamverma07
 .blogspot.com">shubhamverma07.com<i
class="material-icons">language</i></a>
</p>
</body>
</html>

Output of programming

Above you can see the programming output in video when mouse is over link’s background color, text color and border is changed. And after click focused different background color and border.

In this tutorial we learned how to style the link with CSS property different color, background, text style, underline, border etc. you can style an attractive link with CSS property own your project.

So, I hope you all read this CSS Link Tutorial and learn new something, I hope you all understand this tutorial, if you have any doubt yon can ask in the comment section.

Read Also-

     


    1 Comment

    zoritoler imol · June 30, 2022 at 2:00 pm

    Hey There. I discovered your weblog the use of msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of your helpful info. Thank you for the post. I’ll certainly return.

    Leave a Reply

    Avatar placeholder

    Your email address will not be published. Required fields are marked *