Per page CSS
With Per Page CSS, you can load only the CSS that each page actually needs — meaning faster load times and smoother user experiences, especially on complex or content-heavy websites.
Video transcript
Per page CSS in Webflow lets you add custom CSS styles that only apply to a specific page, rather than loading that CSS across your entire site. This is useful for page-specific styling needs that would be unnecessary overhead on every other page.
You can add per page CSS from your page settings in the Designer. Open the Pages panel, click the gear icon next to the page you want to add styles to, and scroll down to the Custom Code section. There you'll find a field for adding CSS inside the head tag.
A common use case is adding styles for a third-party embed or component that only appears on one page. Rather than adding those styles site-wide and loading them on every page load, you scope them to the page where they're actually needed.
Per page CSS works alongside your site-level styles and class-based styles — it doesn't replace them. Styles added here follow normal CSS cascade rules, so you can use them to override global styles for a specific page if needed.
Keep in mind that per page CSS is added directly to the page's HTML output, so it loads inline rather than as a separate stylesheet. For small amounts of page-specific CSS, this is generally fine. For larger style blocks, consider whether a site-level class or component approach might be more maintainable.
