Is there a way to add custom CSS to the style manager in Webflow or is the only option to add code to the header?

Published on
September 22, 2023

In Webflow, you can add custom CSS to your project using the Style Manager or by adding code to the header. Both options offer flexibility and allow you to enhance the design and layout of your website. Here are the steps to add custom CSS using each method:

Adding custom CSS using the Style Manager:

  1. In the Designer, click on the "Styles" tab located in the top-left corner.
  2. On the right-hand side, you will see the Style Manager panel. Here, you can organize and manage all the styles used in your project.
  3. To add custom CSS, select the element you want to style from the Navigator or the canvas.
  4. In the Style Panel, you will find various styling options for the selected element.
  5. Click on the "+" icon beside the category you want to style, such as typography, background, or layout.
  6. You can either modify the existing styles or click on the "Add custom style" button to add your own custom CSS code to the selected element.
  7. In the custom code field, you can write your CSS code and apply the desired styles. You can also use the context-aware selector dropdown to target specific states or child elements within the selected element.
  8. Once you've added your custom CSS, you can preview and make further adjustments as needed.

Adding custom CSS to the header:

  1. In the Designer, click on the "Project Settings" button located in the top-right corner.
  2. In the Project Settings panel, select the "Custom Code" tab.
  3. Inside the "Custom Code" tab, you will find the "Head Code" field.
  4. In this field, you can write your own custom CSS code.
  5. Once you've added your CSS code, it will be applied globally to your entire website.
  6. Save the changes and publish your site to see the custom CSS in action.

By utilizing the Style Manager or adding code to the header, you can easily incorporate custom CSS into your Webflow project, allowing you to customize the design and appearance of your website to align with your brand and style preferences.

Q1: Can I add custom CSS to specific elements only in Webflow?
Q2: Are there any restrictions on the amount of custom CSS I can add in Webflow?
Q3: How can I preview the changes made to my custom CSS in Webflow?