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