I’m going to explain how to create a new style in our WordPress template for linked text.
The first thing we’re going to do is go to the child theme of our WordPress template, or alternatively to the CSS customizer included with the theme. I recommend building a website from the child theme because in the long run it’s cleaner and more convenient.
From there, we’re going to create a new style for some links on our website, so that those links using our new style tag will look different from the rest.
The first thing we need to do is come up with a name for our style. We could call it cuchumi-pitifláutico, but I recommend giving it a short and meaningful name. I’m going to call my new style pink-over, because my links will be gray, underlined, and when the mouse hovers over them, they’ll turn white with a pink background:
I’m a different link! Hover to see the effect!
Let’s get started:
Inside /*– this –*/ we can write whatever we want without affecting our CSS code. This is used to write notes that help us locate our style easily:
/*----------- PINK-OVER. Links with pink background on hover ----------- */A link has four states, so we need to define each one:
a:link /* Unvisited link */
a:visited /* Visited link */
a:active /* Active link */
a:hover /* Mouse over link */
For each of these states, we will define certain properties:
font-family /*Font*/
font-size /*Size*/
font-weight /*Weight*/
color /*Text color*/
text-decoration /*Underline*/
background /*Background color*/
There are many other properties like letter spacing or font style (italic). The complete list of CSS properties for text and images can be found here.
Now, we just need to start writing our CSS style. We’ll begin by defining the a:link state of our new link style. To do this, we specify it as a link with /a./ followed by the name of our new style /pink-over/ and the state we want to define, in this case /:link/.
In my style, it looks like this:
a.pink-over:link {
}
Inside the brackets we include the properties we want to apply to the links. In my case, I want to define font type, color, size, weight, and underline:
a.pink-over:link {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
You can choose colors using the picker from this page, and explore font families via this link. The rest of the properties are fairly intuitive and you can test them as needed.
It’s that easy. We’ve just created a new style for links!
Links tagged with this class will have a sans-serif font of 15px, medium weight (400), gray color and will be underlined.
Now we want to add a hover style so that when someone hovers over the link, the underline disappears, the text turns white, and the background becomes pink. To do this, we define the /a:hover/ state:
a.pink-over:hover {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #ffffff;
text-decoration: none;
background:#ee0467;
}
Our CSS for links is almost done. Let’s define the remaining two states:
a:visited /*Visited link*/
a:active /*Active link*/In both of these cases, we want the link to appear the same as in the original state, meaning gray and underlined. So we’ll copy the code from /a:link/ and define these two states with the same properties:
/*----------- PINK-OVER. Links with pink background on hover ----------- */
a.pink-over:link {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
a.pink-over:hover {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #ffffff;
text-decoration: none;
background:#ee0467;
}
a.pink-over:visited {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
a.pink-over:active {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
Now we can check how our new style works!
Save the changes, go to the page on your website with the link you want to style, and in the text editor, apply your custom style by adding the tag:
<a class="stylename"In the text editor, the link would look like this:
<a class="pink-over" href="http://link-url">HELLO! I’m a PINK-OVER link</a>And the result would be this:
