How to Add Custom CSS

In web development, there’s always that need to tweak a design or customize a layout beyond the default settings of your theme. With SanityPress, you can easily integrate custom CSS right from your CMS using the Custom HTML module. In this post, we'll guide you through adding custom styles to your website and show how you can enhance specific elements like headers, text, and more.

Why inject custom CSS?

Your website needs to stand out and sometimes the default options aren’t enough. Whether it’s making a header bigger, changing colors, or adjusting margins, custom CSS is essential to fine-tune those details and create a unique web experience. With the Custom HTML module in SanityPress, adding CSS directly inside the CMS is intuitive and flexible.

Adding CSS with the Custom HTML Module

SanityPress makes it easy to add custom styles without digging into your codebase. Let’s walk through an example where we customize the main hero section's heading using the module.

1. Open the Sanity Studio: Navigate to "Editor" tab, then to the page where you want to add your custom styles.
2. Select the "Custom HTML" Module: You'll find this module on the right-hand side of your editor panel. This allows you to input custom HTML and CSS for that specific page or section.
3. Input Your Custom CSS: Make sure to include your CSS code inside a <style> tag. Here's an example:

<style>
#main-hero[data-module="hero.saas"] {
  & h1:has(strong) {
    @media (min-width: 768px) {
      font-size: 3rem;
      line-height: 1.2;
    }
  }

  & h2 {
    font-size: unset;
  }
}
</style>

In most cases, modules will come included with a data-module attribute you can use to reference specific modules. You can also add a unique identifier with the moduleProps() helper to reference even more specifically.

Real-Time Customization Benefits

By using the Custom HTML module in SanityPress, you get full control over how different parts of your site look and behave across different devices. There’s no need to modify the main theme files, which keeps your setup clean and future-proof.

As seen in the example, you can easily adjust layout and typography on specific breakpoints with just a few lines of code. Whether it’s enhancing the visual hierarchy of your content or aligning design elements with your brand guidelines, the Custom HTML module makes it straightforward to integrate custom styles into your workflow.

Get Started with SanityPress

SanityPress is designed to be both developer-friendly and easy for non-technical users. With features like the Custom HTML module, you can shape your site exactly as you envision without compromising on flexibility or performance. If you're not already using SanityPress, try it out today and see how quickly you can build and customize stunning websites!