How to implement custom CSS styling on Wix

intermediate 8 min read Updated 2026-03-18

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.

Try Wix Full Wix Review

Prerequisites

Basic understanding of CSS syntax
Wix Premium plan subscription
Access to Wix Editor
Knowledge of HTML structure

Step-by-Step Instructions

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.

Make sure you have a Premium plan as Custom CSS is not available on free plans

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.

Use the preview feature to see changes in real-time before publishing

Write Your CSS Code

Enter your CSS code in the editor. Use standard CSS syntax like:

.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.

Use browser developer tools to inspect elements and find the correct selectors

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.

Class names are case-sensitive and should match exactly what you defined in your CSS

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>

This method is useful for styles that should only appear on specific pages

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.

Wix generates unique IDs for components, so styles may need updating if you duplicate elements

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.

Always test on mobile devices as custom CSS may affect responsive behavior

Common Issues & 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.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Wix website before purchasing.

Visit Wix View Wix Pricing