How to style elements with classes on Webflow
Quick Answer
Style elements in Webflow by selecting an element, creating or applying a class name in the Style panel, then modifying CSS properties. Classes allow you to reuse styles across multiple elements and maintain consistent design throughout your project.
Prerequisites
- Basic Webflow account
- Understanding of HTML elements
- Knowledge of CSS properties
- Webflow project created
Step-by-Step Instructions
1
Select the element you want to style
Click on any element in your Webflow canvas, such as a div block, heading, or button. The element will be highlighted with a blue outline, and you'll see its tag name displayed at the top of the Style panel on the right side of the screen.
Use the Navigator panel to select elements that are difficult to click on the canvas
2
Create a new class or apply an existing one
In the Style panel, look for the class field at the top (it may show "No class" or an existing class name). Click on this field and either:
- Type a new class name (use descriptive names like
hero-buttonormain-heading) - Select an existing class from the dropdown list
- Press Enter to create the class
Use kebab-case naming convention (lowercase with hyphens) for better organization
3
Access the styling properties
Once your class is created or applied, you'll see various styling sections in the Style panel:
- Layout - Display, position, flexbox settings
- Spacing - Margin and padding
- Size - Width, height, min/max dimensions
- Typography - Font family, size, weight, color
- Backgrounds - Background colors, images, gradients
- Borders - Border styles, radius, shadows
4
Modify typography properties
In the Typography section, customize your text styling:
- Click the font dropdown to change the Font family
- Adjust Font size using the input field or slider
- Set Font weight (100-900 or named weights)
- Choose Text color by clicking the color swatch
- Modify Line height, Letter spacing, and Text align as needed
Use relative units like 'em' or 'rem' for better responsive design
5
Adjust layout and spacing
Configure the element's positioning and spacing:
- In Layout, set the display type (block, inline-block, flex, etc.)
- In Spacing, click the margin/padding icons to add space around or inside the element
- In Size, set width and height values (use % for responsive, px for fixed)
- Use the visual margin/padding editor by clicking the diagram
Hold Alt while adjusting spacing to modify all sides simultaneously
6
Apply background and border styles
Enhance your element's appearance with backgrounds and borders:
- In Backgrounds, click the + button to add a background color, gradient, or image
- In Borders, set border width, style (solid, dashed, etc.), and color
- Add Border radius for rounded corners
- Apply Box shadow or Text shadow for depth effects
Layer multiple backgrounds for complex visual effects
7
Preview and apply to other elements
Test your styling and reuse the class:
- Click Preview in the top toolbar to see your changes in action
- To apply the same class to other elements, select them and choose your class from the class dropdown
- Use Combo classes to create variations by adding a second class name
- Publish your site to see the final result
Create combo classes for hover states and responsive variations
Common Issues & Troubleshooting
Class changes aren't visible on the element
Check if you have the correct breakpoint selected in the top toolbar. Styles may be overridden by higher specificity classes or inline styles.
Can't find the class I just created
Make sure you pressed Enter after typing the class name. Check the Style Manager panel to see all your classes and their usage.
Element styling looks different on published site
Clear your browser cache and ensure you've published the site. Check for conflicting custom CSS code in the Project Settings.
Changes affect other elements unexpectedly
This happens when multiple elements share the same class. Create a new class or use combo classes to target specific elements without affecting others.
Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Webflow website before purchasing.