Styling in Webflow
Last updated
Last updated
Understanding the basic concepts below is essential for building and customizing your Webflow projects.
When you want to apply styles or functions to an element in a single location or for a one-time purpose.
When you want to avoid creating a new combo class that would be rarely reused.
When existing combo classes on an element are already complex and potentially confusing.
Focus on your creativity and enjoy Webflow's flexibility. Use attributes that you remember and fully understand. No pressure!
Learn about S2 Attributes in this section:
Not sure whether to use Classes, Attributes, or Utility Classes? Follow this priority-based approach to make the best styling decisions:
Priority 1: Use existing Element Classes and Combo Classes from the S2 Framework.
Priority 2: Create and use your classes.
Priority 3: Use S2 Attributes that you understand and can easily remember.
Priority 4: Use the framework's Utility Classes.
Attributes are powerful tools. However, attributes cannot be searched directly in any Webflow panels. When you want to rename something, there is also no way to update all instances quickly.
Attributes can never satisfy all styling needs. Setting up too many attributes that are not carefully planned can also lead to huge confusion easily. We are not here to reinvent CSS or build a CSS utility framework like Tailwind.
Therefore, we recommend following the above Guide to Making Styling Choices and sticking with the framework's official and standardized S2 Attributes.
If you really want to create new custom attributes, place them in the css_custom code embed inside the Global Code component. Avoid creating too many custom attributes.
Extended reading:
Classes of HTML Tags and Webflow Elements
HTML tags are the basic building blocks.
Webflow elements are pre-built elements in Webflow, such as Containers, Grids, and Buttons.
Element Classes
Custom Element Classes (or base classes) allow you to create unique styles for specific elements.
Combo Classes
Combo classes are modifier classes and variations of existing classes. They allowing you to tweak styles for specific instances without creating new element classes. They all start with is-.
Attributes
Utility Classes
Utility classes are predefined classes that can apply specific styles or functionality. They help streamline your design process. They all start with u-.
are not "classes" but we can use CSS to apply styles like a preset. S2 Attributes help you work faster by allowing you to easily apply additional styles and functionality to elements without creating new classes.