CSS Snippets

What is CSS Snippets?

CSS Snippets are reusable pieces of CSS (Cascading Style Sheets) code that help create frequently used layout templates and design elements. These snippets can save time and streamline the development process by providing ready-made solutions for common styling tasks.

Why are CSS Snippets used?

CSS Snippets are used to save time in development and ensure consistency across web pages. By using pre-defined styles, developers can quickly apply complex styles without writing code from scratch.

Example of a CSS Snippet

.button-primary {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

This CSS snippet creates a primary button style that can be reused throughout your site for a consistent look.

Steps to Customize CSS Using CSS Snippets in Document360

1. In the Knowledge base portal, go to Settings → Knowledge base site → Custom CSS and JavaScript.

2. Click the Custom CSS tab and then the Add code snippets button.

3. A blade window with seven preloaded basic snippets will appear:
• Body font style
• Heading tag font style
• Change table styles
• Align image center in documentation
• Change Home page hero section background
• Change callouts styles
• Disable back to top

4. You can add other custom snippets beyond the preloaded options. For example:This snippet highlights text with a yellow background and bold font.

.text-highlight {
  background-color: yellow;
  font-weight: bold;
}

5. Press Ctrl + S inside the Custom CSS code block to save changes.

If you use Document360...

You should try HelpKit, a powerful alternative that enhances your documentation process.

HelpKit also offers a custom CSS section to personalize your help center to match your brand. HelpKit transforms your Notion pages into a professional help center effortlessly, utilizing Notion’s superior WYSIWYG editor. With HelpKit, you can manage all your documentation needs in one place, eliminating the need for separate tools.

For more insights on HelpKit as a powerful alternative to Document360, check out this review.