Clients have all sorts of wants and needs, which means your agency must be able to jump from straightforward briefs to more complex projects at a moment’s notice. That’s where Wix Studio’s custom CSS comes in.
You can use Studio’s built-in tools like reusable assets, designer-made templates and responsive AI to deliver work hyper-efficiently, but when you need to step outside the platform and customize your work according to a client’s specific needs, custom CSS can open up a world of styling possibilities.
Let’s take a closer look at custom CSS and how you can use it with Wix Studio to take your client sites from good to great.
A quick refresher: what is CSS?
CSS, or Cascading Style Sheets, is a styling language used to selectively control how HTML elements of websites are displayed.
Essentially, you use CSS to style your content and lay it out (as compared to HTML, which defines its structure and semantics). As you probably already know, it’s one of the most fundamental elements of a web development skill stack— a short acronym with big capabilities.
So then, what’s custom CSS, more specifically? It’s when you add your own CSS code to override specific default style settings—something now available with Wix Studio.
Why add custom CSS to your clients’ sites?
No designer likes being told a specific task is off-limits, which makes custom CSS even more compelling. It gives you high-level control and flexibility over the look and feel of your client sites.
Adding custom CSS means being free to express yourself with code—freedom to animate elements, add decorative features like filters, customize text formatting, maximize site responsiveness, and extend the web design options and behavior changes available in the Studio Editor.
You don’t need to worry about disrupting your clients’ brand consistency. Using global classes, you can develop a united global design, which ensures cohesion across your creations. You can also get super specific by defining CSS custom properties to individual elements that can be reused across different pages.
Once you’re deep in the world of custom CSS, you’ll realize there’s not much you can’t do.
How to add custom CSS in Wix Studio
Wix Studio’s built-in CSS editor lets you add CSS code to style elements and their individual parts to create your own distinct designs. All elements have been mapped into semantic classes, or groupings that describe their purpose, allowing you to specifically target and customize each one. Check out our help center article about CSS editing for a step-by-step guide.
Getting the best out of CSS with Wix Studio
While our CSS experts were busy making Wix Studio an open and flexible platform for agencies, we crashed their product meetings to get their top tips on using custom CSS to make sites shine. Here’s what they shared:
Choose CSS for performance
“Custom CSS allows you to create unique effects and animations without limitation,” says Eden Apelboim, a technical designer at Wix. “Not only that, you can implement it quickly to different elements with just one line of CSS code.”
Animation enhances your visual design and user experience but can also slow down your site and affect your performance. Apelboim advises against exporting images or backgrounds with effects or animations. “Instead, try creating them with CSS,” she says. “You’ll find it’s much better for performance.”
Apelboim applied creative coding, which often requires custom CSS, to German marketing agency thjnk’s website to create an eye-catching cursor, a slick hover effect in the cards section and scroll bar colors for mobile.
Keep accessibility in mind
Wix technical designer Mykola Deineko’s top CSS tip is to always be mindful of accessibility. He warns that if your code is not functional or contains unnecessary bulk, it can impact the UX for those with disabilities.
“With creative freedom comes responsibility,” says Deineko. “For example, there is now a way to assign heading tags using either the inspector panel or CSS, so always consider best practices to make sure your CSS doesn’t ruin the accessibility of your client sites.”
For those coming to custom CSS for the first time, Deineko advises sticking with strict naming conventions to make your code more readable, organized and searchable—potentially saving you hours of work when trying to find assets down the line. “Treat custom styles like layers in Figma, he says. “Keep them organized and use descriptive naming.”
You can discover Deineko’s work on Wix Studio’s AI capabilities page, where he used custom CSS to create the hero section’s opening and hover interactions, gradient backgrounds and the fluid transition in the ‘sneak peek’ section. (Related: How Wix Studio’s AI capabilities will change the way you work)
Explore a whole new world of animations
Custom CSS opens up an entire world of advanced animations, according to Wix product manager Nina Goldenberg, because you can pull code from just about anywhere and adapt it for your website. Professionals can find CSS online, copy and paste it into the editor and see it come to life on their canvas, Goldenberg explains.
“For example, there are many libraries online that support amazing animations, like Animate.css, and public libraries in GitHub where you can take code and use it in the editor on whatever element you choose. This is something really exciting for agencies.”
Goldenberg also shares an efficiency tip, encouraging agencies to create their own design system using CSS custom properties to define—and global classes to manipulate—a range of elements at once.
“They can also create specific designs,” she adds. “Let's say they have all their main buttons in black, but one button should appear in orange. They can override global classes with a custom class. Creating these design systems can really boost an agency’s efficiency.”
Master advanced selectors
According to Wix technical designer Yanay Bar-Yossef, CSS advanced selectors are a powerful tool for enhancing the functionality and usability of client sites.
“I love how you can select and style any element and its descendants,” he says. “The benefit here is you select and change the inner parts of the element. For example, one of my favorite capabilities is seeing all elements’ bounding boxes on the page using a universal selector.”
With tons of detailed documentation available for free online, including MDN’s CSS reference docs, Bar-Yossef says CSS newcomers have everything they need to get started. “Try to understand it first and then use it, not the other way around,” he advises.
Combine Javascript with CSS
Wix product designer Daniel Winebush recommends combining Javascript with CSS. “You can add and remove classes using all the functions available in Velo,” he says. “That means having a really interactive design affected by the user’s choices and behavior on the website. Elements can change animation, size and color according to a click, scroll or any Javascript function.” (Related reading: Why are streaming services binging on blue?)
For more tips from Winebush, watch Wix Studio’s webinar below.
_new.jpg)
