CSS Links

Prev
Next

CSS Links

In HTML, links are created using <a> tag. You can change the text color, text decoration, background-color and font-family of the hyperlink using CSS.

CSS link style examples


Style image link

You can change the color of the links using CSS.

Link Color
Links with No UnderLine
Links with underline
Style in Links will change on hover

You can add links to Div as well

Style HTML image link

HTML Image link can be styled using CSS. A link does not need only for text. It can be for Images as well.

Let us see how we can style Images which has Links –

Example for styling HTML image link

img {
  width: 50%;
  height: 30%
}
Run the Code

Link colors

Sometimes, you want to change the color of the links.

  • If you want a specific link to have a specific color, then you can use Inline CSS.
  • For all the links on your website to have a specific color, then you can use External CSS.
  • And for all the links on a particular page of your website to have a specific color, then you can use Internal CSS.

Let us see how you can change the color of the link using Internal CSS. In the same way, the color of the links can be changed in External and Inline CSS as well.

Example to change the color of links

a {
  color: darkblue;
}
Run the Code

Links for the Buttons

As buttons are practically clickable and buttons lead to ‘Call for Action’ or it can also link to a web page.

Let us see how you can style the links on a button using CSS link buttons-

Example to style buttons with link

.redbutton {
  background-color: Violet;
  border:2px solid orange;
  border-radius:10px;
}
Run the Code

Underlining Links

If your requirement is to make sure that the links are underlined explicitly, then you can use underline property text-decoration: underline.

Example to underline the links

a {
  text-decoration: underline;
}
Run the Code

Style Links in div

It is easy to provide a unique style to div even if you want to add a link for a div.

You can either define the div using an id or a class. Then, you can use this id or class inside style tag to provide styling.

In this way, you can change the link color, width of div, background color etc.

Example to use links in div

#divimg1 {
  width:auto;
  height:300px;
  background-color:orange;
}
Run the Code

Styling HTML Links based on various stages of the link

There are 4 types of links based on the phase(stage) in which they are. These phases occur with a specific event which the user takes::

  • a:link → This is a normal link which the user has not visited. Indirectly, this link is an untouched and unvisited link.
  • a:visited → A link that the user has visited already in the stage of visited link. Normally, websites show this link in different colors as compared to the unvisited link.
  • a:hover → When the user moves the mouse over the link, then that particular instant when the user hovers over the link is hover stage. In some websites, the cursor changes to ‘handshape’ while moving the cursor.
  • a:active → The moment a link is clicked, that moment is called the active stage of the link so when the user clicks a particular link and the time frame window when the link is clicked, it is a phase of an active link.

Example for normal link which is not visited:

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

Example for visited link:

a:visited {
   color: blue;
}

Example for mouse hover link:

a:hover {
   color: black;
   background-color:pink;
}

Example for active link:

a:active {
  color: tomato;
  text-decoration:underlined;
  background-color:yellow;
}

Example showing different types of links

  a:link {
   text-decoration:none;
   font-family:calibri;
   color:green;
}
  a:visited {
   color: blue;
}
  a:hover {
   color: pink;
   text-decoration:underline;
}
  a:active {
   color: tomato;
   text-decoration:underlined;
   background-color:yellow;
}
Run the Code

CSS Interview Question and Answers

In CSS, a:link property defines the unvisited link.
a:link is a standard link which is not clicked and visited.

First, choose the link, and provide either the inline CSS, external CSS or internal CSS.

Syntax:

<a href="https://tutorialbrain.com/" target="_blank">Link this in darkblue color</a>

OR

<style>
  a {
    color: darkblue;
}	
</style>

alink – active-link is a normal link where the user has not visited. Indirectly, this link is not clicked and it is an unvisited link.

vlink – This is the Visited-link, here the user has clicked the link and now it is in the stage of visited link. Normally, websites show this link in different colors as compared to the unvisited link.

Button gives a call for action when we click on that. Usually, buttons are used to submit button, login button, etc.
To add a link to the button we need to give a tag <a> tag within <button> tag.

<button><a href="https://www.tutorialbrain.com/"> Click Here</a></button>

By default, links are underlined. If we want to remove the underline from the link we need to use “text-decoration: none;” property in CSS.

Syntax:

a {
   text-decoration: none;
}
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!