How do you style link? Links are usually blue with an underline or purple plus underline when visited. They’re not cute… How do you change colors? Here a little tutorial to style links.

Changing color

If you want only to change color write this in your style.css:

a, a:link, a:visited, a:active
{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #XXXXXX;
text-decoration: none;
}

a:hover
{
color: #YYYYYY;
text-decoration: none;
}

Change XXXXXX and YYYYYY with the color you want; use this color picker if you don’t have a graphic program ready.

Changing background

If you want something different such as a background like this:

you need to use this code if you want all your likes like that:

a, a:active, a:link, a:visited
{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
line-height: 12px;
background: #XXXXXX;
color: #YYYYYY;
border: 1px solid #ZZZZZZ;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}

a:hover
{
background: #WWWWWW;
color: #JJJJJJ;
border: 1px solid #KKKKKK;
}

if you want only some links you need to use this code:

a.link1, a.link1:active, a.link1:link, a.link1:visited
{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
line-height: 12px;
background: #XXXXXX;
color: #YYYYYY;
border: 1px solid #ZZZZZZ;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}

a.link1:hover
{
background: #WWWWWW;
color: #JJJJJJ;
border: 1px solid #KKKKKK;
}

change XXXXXX, YYYYYY, ZZZZZZ, WWWWWW, JJJJJJ and KKKKKK with the hex code of the colors you want (please don’t have white background with a yellow link! it’s unreadable!) and use this one for your links and add:

class="link1"

to the links you want with this style, like this:

<a href="http://YOURSITE.COM/" class="link1">Text Here</a>

you can change link1 with something else and have different colors for different links, just add a link2 to the css and then use class=”link2″ for another link.

Of course, change YOURSITE.COM and Text Here with your url and text.

If you want an image as background to your link, like this:

use this code (all your links):

a, a:active, a:link, a:visited
{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
line-height: 12px;
background: url('http://YOURDOMAIN.COM/image1.gif');
color: #YYYYYY;
border: 1px solid #ZZZZZZ;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}

a:hover
{
background: url('http://YOURDOMAIN.COM/image2.gif');
color: #JJJJJJ;
border: 1px solid #KKKKKK;
}

if you want only some links you need to use this code:

a.link1, a.link1:active, a.link1:link, a.link1:visited
{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
line-height: 12px;
background: url('http://YOURDOMAIN.COM/image1.gif');
color: #YYYYYY;
border: 1px solid #ZZZZZZ;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}

a.link1:hover
{
background: url('http://YOURDOMAIN.COM/image2.gif');
color: #JJJJJJ;
border: 1px solid #KKKKKK;
}

change http://YOURDOMAIN.com/image1.gif and http://YOURDOMAIN.com/image2.gif to your images url (of course they need to be different), YYYYYY, ZZZZZZ, JJJJJJ and KKKKKK with the hex code of the colors you want and use this one for your links and add:

class="link1"

to the links you want with this style, like this:

<a href="http://YOURSITE.COM/" class="link1">Text Here</a>

again, you can change link1 with something else and have different colors for different links, just add a link2 to the css and then use class=”link2″ for another link.

Of course, change YOURSITE.COM and Text Here with your url and text.

Block links

Do you want something like my ‘general menu’ without using <li>? Like this:

Here how I style it:

First of all use this code for your links:

<div class="menu">
<a href="URL1">Text 1</a>
<a href="URL2">Text 2</a>
<a href="URL3">Text 3</a>
<a href="URL4">Text 4</a>
<a href="URL5">Text 5</a>
</div>

and add this code to the css:

.menu
{
width:200px;
}
.menu a, .menu a:link, .menu a:visited, .menu a:active
{
font-size: 10px;
background: url('http://YOURDOMAIN.com/image1.gif');
color: #XXXXXX;
border: solid 0px;
line-height: 12px;
text-align: left;
font-weight: bold;
display:block;
padding-left: 18px;
margin-left: 0;
}

.menu a:hover
{
font-size: 10px;
background: url('http://YOURDOMAIN.com/image2.gif');
color: #YYYYYY;
border: solid 0px;
line-height: 12px;
text-align: left;
font-weight: bold;
display:block;
padding-left: 18px;
margin-left: 0;
}

change http://YOURDOMAIN.com/image1.gif and http://YOURDOMAIN.com/image2.gif to your images url (of course they need to be different), XXXXXX and YYYYYY to hex codes. You can change url(‘http://YOURDOMAIN.com/image1.gif’) and url(‘http://YOURDOMAIN.com/image2.gif’) with #ZZZZZZ (changing ZZZZZZ with an hex code) if you want a color background instead of an image. In:

.menu
{
width:200px;
}

change 200 with the size of your sidebar.

If you want a point background like mine:

you need to use this code in your css:

.menu
{
width:200px;
}
.menu a, .menu a:link, .menu a:visited, .menu a:active
{
font-size: 10px;
background: url('http://YOURDOMAIN.com/image1.gif') no-repeat;
color: #XXXXXX;
border-bottom: solid 1px #YYYYYY;
border-top: solid 0px;
border-left: solid 0px;
border-right: solid 0px;
line-height: 12px;
text-align: left;
font-weight: bold;
display:block;
padding-left: 18px;
margin-left: 0;
}

.menu a:hover
{
font-size: 10px;
background: url('http://YOURDOMAIN.com/image2.gif') no-repeat;
color: #ZZZZZZ;
border-bottom: solid 1px #WWWWWW;
border-top: solid 0px;
border-left: solid 0px;
border-right: solid 0px;
line-height: 12px;
text-align: left;
font-weight: bold;
display:block;
padding-left: 18px;
margin-left: 0;
}

again, change http://YOURDOMAIN.com/image1.gif and http://YOURDOMAIN.com/image2.gif to your images url (of course they need to be different, mine are just a 16x16px with the point in the middle), XXXXXX, YYYYYY, ZZZZZZ and WWWWWW to hex codes. In:

.menu
{
width:200px;
}

change 200 with the size of your sidebar.

That’s it, if you have questions just leave a comment