Fly a little higher with some extra HTML: A’s take you places

HTML <a> tags define hyperlinks in your content. A typical <a> tag will look like this:

<a href="https://www.heronco.com" target="_blank">Visit us online</a>

When clicked, this will take you to our website at www.heronco.com (the href value) in a new window (_blank). By default, in your CSS stylesheet, links are styled like this:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Most WordPress themes change the defaults, but you can customize this even further. Here’s the breakdown for the basic CSS for <a> tags:

Unvisited link – change the color from blue to teal, and remove the ‘text-decoration’ underline:

a {
color: teal;
text-decoration: none;
}

The important parts of the above code? Make sure there is a colon after the selector (color, text-decoration, font-weight, etc) and make sure there is a semi-colon at the end of each line, and, finally, make sure the whole thing is enclosed in brackets.

You can change your links to any color; here’s our favorite online color selector tool. You can reference colors by name, as six-digit hex codes, #00A28A, for example, or RGB values, rgb(0,128,128).

There are three other types, or states, of hyperlinks:

  • Hover (:hover) – when the mouse cursor is over the link before it is clicked
  • Visited (:visited) – a link that has been opened
  • Active (:active) – when the link is in the process of being clicked.

Active links happen so fast that we generally style these exactly the same as regular <a> links.  But we do change the other two. For example:

a:hover {
color: navy;
text-decoration:underline;
font-weight:bold;
}

a:visited {
color:black;
font-weight:normal;
}

Knowing how to write the above CSS code is one thing, but it doesn’t do you any good until it’s in the right place. The easiest way to add custom CSS to your WordPress website is from the Customize area. From your WordPress dashboard, go to Appearance > Customize > Additional CSS. If your theme developer already has code in the box, don’t change that (unless you know what you are doing!).

To change your <a> tags, add the following code into the Additional CSS box, using the examples from above, changing the colors to match your preferences:

a, a:active {
color: teal;
text-decoration: none;
}

a:hover {
color: navy;
text-decoration:underline;
font-weight:bold;
}

a:visited {
color:black;
font-weight:normal;
}

Click the blue Publish button, and navigate to your website to view your changes! (Note: if you don’t like the effect, you can always delete the CSS you just added.)


In a future issue of Volare, we’ll talk more about CSS text selectors, including font-weight, font-style, and font-family, and how to override class and ID-specific styles (your navigation menu, for example, probably has custom CSS styles that override the basic <a> tag styles).