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.