How & where to create a global CSS stylesheet

In some other forum posts, people have talked about a global CSS stylesheet, but haven’t specified how or where to create it.

We would like to create CSS code to apply to the entire site (all pages). How do we do that?

Do we create it in an external file and import it? Do we code it in a textarea somewhere within the Builder.io admin area? How and where do we implement a list of site-wide or global CSS code?

Thanks.

Hi @emerge2doug,

Welcome to the builder.io forum.

There are various ways you can create global styles that can be applied to all builder pages.

  1. You can create a global CSS stylesheet in your codebase and import it into your site header which will then be applied to all builder pages.

  2. Using a builder section model, to know more please refer to the below forum post

    Applying Styles to All Builder Pages

  3. Create a site theme using the builder data model

Let us know if you have any further questions. Thank you!

1 Like

Hi @manish-sharma ,
Could you elaborate on how to import a stylesheet into the Builder.io site header?
I was able to achieve the section model option (option 2), but would like to just add the stylesheet globally to the entire site.

Hi @Emerge2JC,

You will need to import the global stylesheet into your codebase, if you are based on nextjs then please refer below screenshot for reference