Styling CSS Links or Hyperlinks with a tag

Ad Banner Image

CSS Links or Hyperlinks

CSS Links properties are used to modify the color, background color, padding and many more. CSS a Tag support many pseudo classes to modify the effects of the HTML Hyperlink Element.

Example 1 – Styling CSS Links with background color property

<!DOCTYPE html>
<html>
  <head>
	<style>
		a:link
		{
		 background-color: hotpink;
		} 
	</style>
  </head>
  <body>
	<a href="home.html">This is a link</a>
	<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
  </body>
</html>

The above code shows that how can you use CSS Links. And below image shows the result of the above code.

Here a link “home.html” is a link of a home page.

CSS Styling Links
Fig.1 – Styling CSS Links.

Pseudo-Classes of CSS Link

  • link – link is a normal pseudo class and it is an unvisited link.
  • visited – already a link is visited by the user is shown, through visited pseudo class.
  • hover – if an user move mouses over an elements, through hover pseudo class.
  • active – if an user click a link, through active pseudo class.

Example 2 – CSS a tag special designing technique

<!DOCTYPE html>
<html>
  <head>
	<style>
		a:link
		{
		 color: red;
		} 
		a:visited
		{
		 color: green;
		}
		a:hover
		{
		 color: blue;
		}
		a:active
		{
		 color: yellow;
		}
	</style>
  </head>
  <body>
	<a href="home.html">Home</a>&nbsp;<a href="menu.html" target="">Menu</a>&nbsp;<a href="about.html">About</a>&nbsp;<a href="contact_us.html">Contact Us</a>
	<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
  </body>
</html>

The above code shows that how can you use Pseudo Classes to make link stylish.

Here a link is shows by the red color, visited link shows by green color, when you scroll your mouse over the link than it shows by color blue, and when you click to a link than it display by the color yellow.

CSS Hyperlinks
Fig.2 – CSS Hyperlinks

Note: There are some rules allow to the Pseudo Classes. hove Must be apply after link and visited. active Must be apply after hover.

Text Decoration for CSS Hyperlinks

When you insert a link than by default this link shows with the underline. Text Decoration Property is mainly used to remove underlines from the links.

Example 3 – Text Decoration of Links

<!DOCTYPE html>
<html>
  <head>
	<style>
		a:link
		{
		 text-decoration: none;
		 color: blue;
		} 
		a:visited
		{
		 color: green;
		}
		a:hover
		{
		 text-decoration: underline;
		 color: orange;
		}
		a:active
		{
		 color: yellow;
		}
	</style>
  </head>
  <body>
	<a href="home.html">Home</a>&nbsp;<a href="menu.html">Menu</a>&nbsp;<a href="about.html">About</a>&nbsp;<a href="contact_us.html">Contact Us</a>
	<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
  </body>
</html>

The above code shows that how can you remove underline from the link.

CSS a Tag
Fig.3 – CSS a Tag with text-decoration property.

Buttons Link

If you want a link in the form of the button than you have to use CSS Properties to give the look and feel like a button.

Example 4 – Buttons Links

<!DOCTYPE html>
<html>
  <head>
	<style>
		div
		{
		 padding-top: 15px;
		}
		a:link, a:visited 
		{
		 background-color: green;
		 color: white;
		 padding: 14px 25px;
		 text-decoration: none;
		}
		a:hover, a:active 
		{
		 background-color: orange;
		}
	</style>
  </head>
  <body>
	<div>
		<a href="home.html">Home</a>&nbsp;<a href="menu.html">Menu</a>&nbsp;<a href="about.html">About</a>
	<div>
	<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
  </body>
</html>

The above code shows that how can apply different properties to create a button.

Styling Links Example
Fig.4 – CSS Links Or CSS Hyperlinks Or CSS a Tag Or CSS Styling Links
Sponsor Banner
You can leave a response, or trackback from your own site.

One Response to “Styling CSS Links or Hyperlinks with a tag”

  1. Full Record says:

    Nice post. I was checking constantly this blog and I am impressed! Very useful info specifically the last part :) I care for such info a lot. I was looking for this particular info for a long time. Thank you and good luck.

Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress