---
title: "Using CSS snippets"
slug: "css-snippets"
description: "A CSS Snippet is a set of utilities and interactive examples for CSS3. It helps create the frequently used layout templates."
tags: ["CSS Snippets"]
updated: 2026-02-12T12:02:31Z
published: 2026-02-16T03:51:13Z
---

> ## 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.

# Using CSS snippets

A CSS (Cascading Style Sheets) snippet provides a collection of utilities and interactive examples for CSS3, helping to create commonly used layout templates efficiently. CSS snippets are valuable code pieces for saving time and improving productivity during development.

Example of a CSS snippet:

```css
.CustomLink
{
 font-size:25px;
}
```

The above CSS snippet can be used to change the hyperlink size on the **Knowledge base site**.

### Steps to customize CSS in the Document360 Knowledge base site using CSS snippets

1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript**.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890215248.png)
3. From the left navigation pane, click the **CSS** tab.
4. Click **Add code snippets** on the top right of the code space.

A panel appears, preloaded with seven basic snippets that you can use to customize your knowledge base site namely:

![Interface for adding code snippets in CSS and JavaScript with various customization options.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site-Customization-Using-CSS-snippets.png)
  1. **Change body text font**
  2. **Change heading font**
  3. **Change table styles**
  4. **Center align images in articles**
  5. **Change home page builder hero section background**
  6. **Change callout colors**
  7. **Disable ‘back to top’ button**

You can also use snippets other than the pre-loaded Custom CSS snippets by adding your customized code snippets by navigating to **Settings** (**) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript**.

1. Press **Ctrl+S** or click the **Save**button on the top right to save the changes.