This “CSS in WordPress” series has been written by our awesome CSS and coding maestro, Brian. Thanks Brian!

There are probably links all over your site, so changing them could be a hassle. Luckily with CSS it is quick and easy to change them all on a HTML page. The HTML code to link is as simple as <a href=”google.ie”>Google Ireland</a>, so the CSS code just uses the a tag, just like how it appears in HTML.

Here’s how to write this in CSS code, just referencing hyperlinks.

a{
color: #ff0000;
}

We’ve already done color so how about something different. Hyperlinks on a site are generally meant to stand out because they are clickable text or images, so here’s a bit more styling to make them more obvious to your website reader.

a{
color: #ff0000;
text-decoration: underline;
font-weight: bold;
}

So in this instance, all <a> links on the site should appear as red, bold and underlined. If we keep going with text for the minute, you will quickly find that hyperlinks often changed color when you hover your mouse over them. Now this usually also happens when you click a link, though it’s much more obvious on a desktop or laptop computer than on a phone or smart touch enabled device. Why? Well if you think of it, a persons finger usually blocks out a link when they tap it, and sites can be fast enough to already move to the next page by the time the person lifts their finger. It is still great feedback for users on full dedicated systems, so we’ll go through it here. Another thing you’ll see in this code is comments. Comment’s are very useful if you’re looking back over your code or showing it to somebody else. Your commented code is ignored by the browser, and it /*Goes Here!*/

 

/* unvisited link */
a:link {
color: #0033cc;  /* Light Blue */
}

/* visited link */
a:visited {
color: #99ff33;  /* Light Green */
}

/* mouse over link */
a:hover {
color: #ff66cc; /* Pink */
text-decoration: none;
}

/* selected link */
a:active {
color: #ffff00; /* Yellow */
text-decoration: none;
}

 

At the end of the tutorial you may end up with something like this:

Google Ireland, Google USA, Google UK, Google China

So there you are, styling CSS links isn’t all that bad, and it’s a great way to change the feel of your website, as links are the main way your site is navigated. Commenting code is very important, especially for you and your programmers, not necessarily for your readers. With the basics here done, give it a go yourself and try to see what you can do. Stay tuned for more CSS tips and tutorials!

right-track-media-pyramids-150
To find the rest of Brian’s “Adding CSS to your Blog” blogs, click here: Adding CSS to your Blog