Web Design Discussion

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.

This entry was posted on Thursday, April 5th, 2007 at 8:32 am and is filed under SEO . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.