Written by: Becky Aiken | IANR Media
1. Create your link
2. Add a class to your link
This way, your styles will only target elements with that class.
3. Style your link in its default (non-hovered) state
.wdn-main p a.styled-link {
The highlighted code ensures that your styles will override WDN default styles for links inside of paragraph tags.
border: 0;
This removes the dotted underline on the link
font-weight: bold;
This makes the link text bold
color: #d00000;
This ensures that your link stays red even if the user has visited the link before.
Put it all together:
.wdn-main p a.styled-link {
border: 0;
font-weight: bold;
color: #d00000;
}
4. Style your link in its hover state
.wdn-main p a.styled-link:hover {
The highlighted code makes your styles target the link when it's being hovered over.
color: #109dc0;
This makes the link turn blue when you hover
Put it all together:
.wdn-main p a.styled-link:hover {
color: #109dc0;
}
5. Add your styles to your site's CSS
Inside of UNLcms, go to the Appearance section of your site and click "Settings."
Paste your styles into the CSS box at the top, then scroll down to the bottom of the page and hit "Save Configuration".
The finished product
The HTML
<p><a href="http://your-link-here.com" class="styled-link">I'm a link - hover over me!</a></p>
The CSS
.wdn-main p a.styled-link {
border: 0;
font-weight: bold;
color: #d00000;
}
.wdn-main p a.styled-link:hover {
color: #109dc0;
}