Skip to main content

Introduction to Custom CSS in Super

Written by Charlene

Custom CSS gives you the flexibility to personalize your Super site beyond the available theme and customization options. Whether you want to adjust spacing, change colors, customize layouts, or create unique interactions, CSS allows you to tailor your site's appearance to match your brand.

This guide introduces the basics of using custom CSS in Super, including where to add your styles, how CSS is applied, and some best practices to help you get started.

Where to add custom CSS

You can add custom CSS directly from your Super dashboard.

  1. Open your Super dashboard.

  2. Select your site.

  3. Navigate to Site Settings → Code.

  4. Paste your CSS into the CSS section.

  5. Save your changes.

If you're only applying it to a specific page, add the code to the PAGE LEVEL CSS section.

Your custom styles will automatically be applied across your published site.

Note: CSS changes may take a few moments to appear. If you don't see your updates immediately, try refreshing your browser or opening the site in an incognito/private window.

When CSS loads

Custom CSS is loaded automatically whenever a visitor opens your website.

Because your CSS is applied after Super's default styles, it can override many of the built-in design elements. However, some styles may require more specific selectors or the use of !important if another rule has a higher priority.

For example:

.super-navbar {
  background: #000 !important;
}

Use !important only when necessary, as excessive use can make your CSS more difficult to maintain.

How to inspect elements

Before writing CSS, it's helpful to identify the element you want to customize.

Most modern browsers include Developer Tools, allowing you to inspect your site's HTML and CSS.

Using Google Chrome

  1. Open your published Super site.

  2. Right-click the element you want to customize.

  3. Select Inspect.

  4. The Elements panel will highlight the selected HTML.

  5. Review the element's classes and existing CSS rules.

  6. Test CSS changes directly in DevTools before adding them to your site.

This makes it easier to experiment with styles without immediately affecting your live website.

Best practices

Following a few simple guidelines will make your custom CSS easier to manage and less likely to break over time.

Keep your CSS organized

Group related styles together and add comments to make future edits easier.

/* Navigation */

.super-navbar {
  ...
}

/* Buttons */

.notion-button {
  ...
}

Test on different screen sizes

Your website may look different on desktop, tablet, and mobile devices.

Use responsive CSS with media queries when needed.

@media (max-width: 768px) {
  ...
}
Did this answer your question?