Join the Webstudio community

Updated last year

Adding Custom CSS in Webstudio

At a glance

The community member asked how to add custom CSS to an element in Webstudio. Another community member responded that CSS can be added visually through the style panel or by adding CSS classes under settings and uploading a stylesheet into an HTML embed component or the website header code. The second community member also suggested that a detailed video tutorial on adding custom animations, classes, and JavaScript using Webstudio would be helpful, as the current tutorials and showcase websites do not include animations.

Hello all! Can anyone tell me how to add a custom css to an element in webstudio?
A
R
2 comments
HEy RR!

You can visually add css via the style panel (this is added via the Design Token system).

Alternatively you can add css classes under settings and then upload a stylesheet into a html embed component or to your website header code (in settings).
Hey @Alex thanks a lot! I was able to add the css in the header (I wanted to add some animation and try out), but still couldn't figure out how to upload a style sheet.

One suggest, it would be great to have a detailed video to add custom animation, classes and js using webstudio in Youtube. All the tutorials and showcase websites I have seen so far is without animations. Also some animation in the official site of webstudio will do some magic. πŸ˜‰
Add a reply
Sign up and join the conversation on Discord