CSS Tutorial – How to Create Multiple CSS Link Styles

What if you want links on a web page that require different font sizes or colors?

The solution is to create multiple link styles with CSS.

To accomplish this you must use css classes:

Example 1

The text on this wedding videography page are colored white on a black background however I want the links to have a font size of 12 pixels (same as the body text) and to hover to yellow when I pass my mouse over them.

CSS


.link1 a {
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}
.link1 a:visited {
color: #FFFFFF;
font-size: 12px;
}
.link1 a:hover {
color: #FFFF66;
font-size: 12px;
text-decoration: underline;
}

HTML


<span class="link2"><a href="#1">When will our wedding day videos be ready?</a></span>

Example 2

On this FAQ page I wanted the links for the questions to have a font size of 10 pixels and hover to yellow when I pass my mouse over them.

CSS


.link2 a {
color: #FFFFFF;
font-size: 10px;
text-decoration: underline;
}
.link2 a:visited {
color: #FFFFFF;
font-size: 10px;
}
.link2 a:hover {
color: #FFFF66;
font-size: 10px;
text-decoration: underline;
}

HTML


<span class="link2"><a href="#1">When will our wedding day videos be ready?</a></span>

Tip 1

If you have several links that are grouped together you can place the span class at the beginning of the group and the span class end tag at the end of the group ie


<span class="link2"><a href="#1">When will our wedding day videos be ready?</a><br />
    <br />
    <a href="#2">Why is Always & Forever Video willing to provide uncut footage copies when other prospective videographers we've talked with are unwilling?</a><br />
    <br />
    <a href="#3">Could we try to make some money providing our tape to a show like America's Funniest Videos?</a></span

Tip 2

You can also use the div tag instead of the span tag in the example above.

Notice the link in the footer on the same page is styled differently to the other links. The font size is 10 pixels and hovers to blue which is underlined

Conclusion

Creating multiple link styles offers a lot of flexibility for the design of your web site because you can vary the type of links on one page or for several pages.

Comments

  1. Thank you very much for the code. You rock.

  2. thnx so much… needed this for an assignment. ur awesome!

  3. nice one bro! quite the tasty little tidbit..

  4. thank you so much!!! needed this badly!!

  5. Genius! Thank you so much. I just went to a site that swears by a.class:link , a.class:hover , a.class:visited and it definitely wasn’t doing the trick!

  6. these are the types of things that i love to see posted up. thanks. I wanted to let you know about some killer traffic video courses i have. just swing by and take advantage of my save the family vacation firesale. right now.

  7. Thank you soo much!!!

    I have been looking every where for days for this solution. Finally something that really works.

    Cheers!

    • Raheel…glad you found my post. I had trouble finding information on it also..that’s why I wrote an article on “How to Create Multiple CSS Link Styles” so it could benefit others.

  8. This method does not work on Mozilla. However its fine for IE and Chrome.

    Please provide me solution for Mozilla also..

  9. Himanshu…The CSS code provided works for FireFox also. I just checked the links in http://www.alwaysandforevervideo.com/links.html and they work fine.

  10. how to creat multiple link under a link…..

  11. Melissa Gatchalian says:

    Thank you so much! This was exactly what I was looking for! You explained it well! 😀

  12. Good write-up, I’m regular visitor of one’s web site, maintain up the

    nice operate, and It is going to be a regular visitor for a long time.

Trackbacks

  1. […] CSS Tutorial How to Create Multiple CSS Link… […]

Speak Your Mind

*