Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

Hyperlink CSS Style, CSS Tutorial


Hyperlink or Anchor tag is one of the most important elements in HTML document; very often we use this element in different form like in navigation, image, button, in content.

As a web designer we need to make sure the hyperlink looks attractive and maintain same standard throughout the website.

Common mistake we do, we keep writing different style for hyperlink in each page.

Here we learn how to design hyperlink CSS for different type of html element in website, so it remain consistent

There are different ways to write CSS class for Hyperlink or Anchor Tag

Common CSS Style for Hyperlink

a
{
font-size: 15px;
text-decoration: none;
color: #808080;
}

a:hover
{
font-size: 15px;
color: #f00;
text-decoration: underline;
}

a:active
{
font-size: 15px;
text-decoration: none;
color: #000;
}

Hyperlink CSS Style (within any HTML element)

Now you learn how to write CSS for Hyperlink with in some HTML element, for example we write content with <p>, <div>, <span>, <table> tags , so you can define how your hyperlink would look like in content within a <div> tag

Here is Hyperlink CSS example for <div> tag.
div a
{
font-size: 15px;
text-decoration: none;
color: #808080;
}

div a:hover
{
font-size: 15px;
color: #f00;
text-decoration: underline;
}

div a:active
{
font-size: 15px;
text-decoration: none;
color: #000;
}


 
Hyperlink CSS Style, CSS Tutorial

Group Training