LiveDemo - Open-source alternative to Storylane, Navattic, and Arcade | Product Hunt

How To Add CSS In Webflow


This guide is an interactive LiveDemo. Create interactive demos of your own product: Interactive demo software · Interactive product tours for your website · Start free


How To Add CSS In Webflow: step-by-step guide

  1. From the Webflow dashboard locate your project thumbnail and click on the three dotted icon to view options.

  2. Click on Settings.

  3. From the left sidebar, navigate to the Custom code section.

  4. This page will contain different sections for head, body and footer.

  5. CSS should be applied inside the head section using the <style> and </style> tags. Remember to not include the <head> and </head> tags, the code inside the Head section is automatically included in the head.

  6. Validate and save your changes. Note that all code applied here will be applied to all pages of your project.

  7. To apply CSS to a specific page, from inside the editor, go to the Pages tab in the left sidebar menu.

  8. Hover over the page name to reveal a small gear icon for settings. Click to open.

  9. Scroll to the bottom to find the Custom Code section. Click to expand.

  10. Recall the same tips as before, CSS should be applied inside the head section using the <style> and </style> tags. Remember to not include the <head> and </head> tags, the code inside the Head section is automatically included in the header.

  11. Save your changes and publish your project to push them live.

Quick answer: To add CSS in Webflow, access project settings or page settings, navigate to the Custom code section, add your CSS inside the head section using style tags, and save your changes.

About this Webflow tutorial

Apply custom CSS to your entire project or specific pages in Webflow using the custom code section and save your changes. This guide shows how to add CSS In Webflow in 11 steps, starting with "From the Webflow dashboard locate your project thumbnail and click on the three dotted..." and finishing with "Save your changes and publish your project to push them live". The interactive demo above is a click-through copy of the real Webflow interface, so you can rehearse each step before doing it in your own account.

Frequently asked questions

How many steps does it take to add CSS In Webflow?

11 steps. Each one is listed in order above, and the demo highlights exactly where to click.

Can I try it without changing my own account?

Yes. Clicking through the demo doesn't touch your Webflow data or settings. Once you know the flow, repeat it in your own workspace.

This tutorial is filed under Webflow. Related guides: How To Add Custom Code In Webflow, How To Add Facebook Pixel To Webflow and How To Add Icon To Button Webflow. Last reviewed 05 Oct 2026.

LiveDemo - Open-source alternative to Storylane, Navattic, and Arcade | Product Hunt
🚀

Create your first interactive demo in minutes

No credit card required • Start building today

Start free→