---
title: "How to customize the hyperlink size"
slug: "how-to-customize-the-hyperlink"
description: "In Document360, you can customize the appearance of some hyperlinks to make them stand out."
tags: ["Customization"]
updated: 2026-06-20T09:32:07Z
published: 2026-06-20T09:32:07Z
canonical: "docs.document360.com/how-to-customize-the-hyperlink"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to customize the hyperlink size
You can make specific hyperlinks stand out by giving them a larger font size than the surrounding text. This uses a CSS class that you define once in Custom CSS settings, then apply selectively to individual links in your articles using an HTML `` tag. Only links tagged with the class are affected; all other hyperlinks remain unchanged.
---
## When to use custom hyperlink font sizes
- **Call-to-action links**: make a key link (such as "Get started" or "View pricing") visually larger to draw readers' attention.
- **Important references**: highlight a critical external link or cross-article reference so it stands out from surrounding body text.
:::(Info) ( NOTE)
This approach is **per-link**, not global. Only hyperlinks that include `class="CustomLink"` in their HTML tag are affected. Standard Markdown links and other hyperlinks are unchanged.
:::
---
## Quick reference
**CSS snippet** paste once in Custom CSS settings. Replace `25px` with your desired font size:
```css
.CustomLink {
font-size: 25px;
}
```
**Per-link HTML** use in your article instead of a standard Markdown link. Replace the URL and link text:
```html
Document360
```
---
## How to add a custom font size to a hyperlink
### Add the CSS class
1. In the Knowledge Base portal, go to **Settings** > **Knowledge base site** > **Custom CSS & JavaScript**.
2. Select the **CSS** tab and paste the following snippet:
```css
.CustomLink {
font-size: 25px;
}
```
3. Replace `25px` with your desired font size.
4. Click **Save**.
### Apply the class to a link in your article
1. Open the desired article and place your cursor where you want the styled link to appear.
2. Paste the following HTML, replacing the URL and link text with your own:
```html
Document360
```
- Replace `https://www.document360.com/` with your desired link URL.
- Replace `Document360` with your desired link text.
---
## Scope and coverage
| Item | Detail |
|---|---|
| Scope | Per-link, only `` tags are affected |
| Default font size example | `25px` adjust to match your design needs |
| Works in | Markdown editor (inline HTML) and Advanced WYSIWYG editor (code view) |
| Other hyperlinks | Unaffected, standard Markdown links and other HTML links remain unchanged |
---
## Best practices
- **Keep the class name consistent**: `CustomLink` is used throughout this example. If you rename the class in the CSS, update every `` tag in your articles to match.
- **Use sparingly**: enlarged links draw attention precisely because they are different from surrounding text. If too many links use a large font size, the effect is lost, and the page becomes visually inconsistent.
- **Match font size to context**: `25px` is significantly larger than standard body text (typically 14–16px). For a subtle emphasis, consider `18px` or `20px` instead.
- **Extend the class for other properties**: you can add more CSS properties to `.CustomLink` beyond font size, such as `font-weight: bold` or `color: #1a73e8`, to create a fully custom link style in one place.
- **Test in both Light and Dark mode**: if your knowledge base supports Dark mode, verify the styled link is readable against both backgrounds.