Simple Guide to Styling Links Within Your Posts for Those with Limited Technical Skills

Part eight of: “Stylizing Your Content”.

For this, there is only one file you will be working with:

1. style.css

You can find this in your WordPress admin under Presentation > Theme Editor - listed on the right hand side.

We want to find something like this (which allows us to style the way the link looks normally):

a, a:visited { }

and this (which allows us to style the way the link looks when we hover over it):

a:hover { }

In order to create something like this: Link — we would add the following:

a, a:visited {
color:#0066cc;
text-decoration:none;
border-bottom: 1px dotted #C5C5C5;
}

a:hover {
color:#FFFFFF;
text-decoration:none;
background: #1F90FF;
border-bottom:1px solid #00305F;
border-top:1px solid #00305F;
}

Changing these will alter every link on your page, so in order to style links specific to a part, just add the correct id or class, e.g., if I wanted to style just the links in the sidebar, it would look like so:

#sidebar a, #sidebar a:visited {
color:#0066cc;
text-decoration:none;
border-bottom: 1px dotted #C5C5C5;
}

#sidebar a:hover {
color:#FFFFFF;
text-decoration:none;
background: #1F90FF;
border-bottom:1px solid #00305F;
border-top:1px solid #00305F;
}

…and so on.

Play around, have fun. Just make sure you make your links easily identifiable from your content. See you soon for the last part of Stylizing Your Content.

Image credit: w00kie.