Styling Hyperlinks

Setting styles for hyperlinks

You can add hyperlink styles in the page template, the stylesheet template or in a code block. 
For now we will add them in a code block.
Add a text element to the page and open the Element Options panel or dialog. 
Expand the markup inside field: 
Add beginning and ending style tags and then add the hyperlink CSS style code:  
<style>
a {
   color: #3E8ADB;
}
a:hover {
   color: #DB3E99;
   text-decoration: underline;
}
​
/* For other elements in a hyperlink */
a>div {
   color: #3E8ADB !important;
}
​
a>div:hover {
   color: #DB3E99 !important;
   text-decoration: underline;
}
</style>
We are selecting all anchor tags and all anchor tags that contain a div. 
You can change the CSS to suit your needs. 
You may or may not need the !important flag. We are using it to make it work across a wider variety of use cases. 
CSS: Cascading Style Sheets | MDN
Styling links - Learn web development | MDN
​

Adding Hover Effects

Showing elements by size

Last modified 3yr ago