Intermediate
How to implement custom CSS styling on Wix
Quick Answer
Custom CSS can be added to Wix sites through the Advanced Settings panel in the Wix Editor. You can apply global styles via the Custom CSS option or use embedded code elements for specific page styling.
Prerequisites
- Basic understanding of CSS syntax
- Wix Premium plan subscription
- Access to Wix Editor
- Knowledge of HTML structure
1
Access the Wix Editor Advanced Settings
Log into your Wix account and open your site in the Wix Editor. Click on Settings in the top menu, then select Advanced from the dropdown menu. Choose Custom CSS from the advanced options panel.
Tip
Make sure you have a Premium plan as Custom CSS is not available on free plans
2
Open the Custom CSS Panel
In the Custom CSS section, click + Add CSS to create a new CSS rule. You'll see a code editor window where you can write your custom styles. The panel shows Global CSS which applies to your entire site.
Tip
Use the preview feature to see changes in real-time before publishing
3
Write Your CSS Code
Enter your CSS code in the editor. Use standard CSS syntax like:
You can target Wix elements by inspecting the page and finding their class names or IDs.
.my-custom-class {
color: #333;
font-size: 18px;
margin: 10px;
}You can target Wix elements by inspecting the page and finding their class names or IDs.
Tip
Use browser developer tools to inspect elements and find the correct selectors
4
Apply CSS Classes to Elements
Select any element in your Wix Editor, then click the Settings icon. Go to Advanced and find the CSS Classes field. Enter your custom class name (without the dot) to apply your styles to that specific element.
Tip
Class names are case-sensitive and should match exactly what you defined in your CSS
5
Use Embedded Code for Page-Specific Styles
For page-specific CSS, add an Embed Code element from the Add menu. Choose Embed HTML and wrap your CSS in
<style> tags:<style>
.page-specific {
background-color: #f0f0f0;
}
</style>Tip
This method is useful for styles that should only appear on specific pages
6
Target Wix-Specific Elements
Use Wix's built-in selectors to style common elements. For example, use
#comp-xxx for specific components or [data-testid="richTextElement"] for text elements. Access these by right-clicking elements and selecting Inspect Element.Tip
Wix generates unique IDs for components, so styles may need updating if you duplicate elements
7
Preview and Publish Changes
Click Preview to see your custom styles in action. Test your site on different devices using the Mobile Editor to ensure responsive design. When satisfied, click Publish to make your custom CSS live on your website.
Tip
Always test on mobile devices as custom CSS may affect responsive behavior
Troubleshooting
Custom CSS not appearing on published site
Ensure you have a Premium Wix plan and that you've clicked Publish after adding CSS. Clear your browser cache and check that CSS selectors are correctly targeting elements.
Styles being overridden by Wix default styles
Use more specific CSS selectors or add
!important to your CSS rules. Inspect elements to see which styles are taking precedence and adjust accordingly.CSS not working on mobile version
Use the Mobile Editor to add mobile-specific CSS or use media queries in your CSS code like
@media (max-width: 768px) to ensure responsive design.Element selectors changing after site edits
Avoid using Wix-generated IDs that start with
#comp- as these can change. Instead, add custom CSS classes to elements or use more stable attribute selectors.Ready to get started with Wix?
Put this tutorial into practice. Visit Wix and follow the steps above.
Visit Wix →