> For the complete documentation index, see [llms.txt](https://velara-3.gitbook.io/web-export/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://velara-3.gitbook.io/web-export/how-to-section/setting-hyperlink-styles.md).

# Styling Hyperlinks

Setting styles for hyperlinks

You can add hyperlink styles in the [page template](/web-export/export-artboard-dialog/page-template.md), the [stylesheet template](/web-export/export-artboard-dialog/stylesheet-template.md) or in a [code block](/web-export/creating-code-blocks.md). 

For now we will add them in a [code block](/web-export/creating-code-blocks.md).

Add a text element to the page and open the [Element Options](/web-export/element-options.md) panel or dialog. 

Expand the [markup inside](/web-export/element-options/markup-inside.md) field: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LvvsEK6lMOdg6DJKiBW%2F-LvvwTGSwOq-EDZWiJz7%2Fimage.png?alt=media\&token=deac7cc1-258b-4fce-a587-21559fd61656)

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.&#x20;

You can change the CSS to suit your needs.&#x20;

{% hint style="info" %}
You may or may not need the !important flag. We are using it to make it work across a wider variety of use cases.&#x20;
{% endhint %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links>" %}