What is CSS Snippets
  • 20 Apr 2022
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

What is CSS Snippets

  • Dark
    Light
  • PDF

CSS Snippets

A snippet is a piece of reusable code, and a CSS Snippet "CSS(Cascading Style Sheets) + Snippet" is a set of utilities and interactive examples for CSS3. It helps create the frequently used layout templates.

Why are CSS Snippets used?

CSS Snippets or any code snippets are used to save time in development.

Example of a CSS snippet
.shadow {
box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
}

The above CSS snippet can make your borders and images stand out on your page.

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

  1. In the Knowledge base portal, click SettingsKnowledge base siteCustom CSS and JavaScript
  2. You can find the Custom CSS and Custom JavaScript tabs, click the Custom CSS tab → and click the Snippets button right underneath it
  3. A blade window opens on the right side, preloaded with seven basic snippets that you can use to customize your knowledge base site namely
  • Body font style
  • Heading format tag style
  • Change table styles
  • Align image center in documentation
  • Change Home page builder hero section
  • Change call-outs styles
  • Disable back to top

You can also use other snippets other than the predloaded Custom CSS snippet

for example, if you need to set a modification to your images and borders, you can use the below snippet inside your code block

.shadow {
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  1. Click ctrl + S inside the Custom CSS code block to save the changes you made.

Was this article helpful?

What's Next