Working with Custom CSS in Divi: Beginner Guide [2022]

What is CSS? How to add CSS in Divi? How to start working with custom CSS? This beginner guide will answer these questions and more, showing you how to target the right selector, explaining the importance of spaces and commas in CSS, and comparing the different ways of adding custom CSS in Divi with all their pros and cons.
If you want to start playing with custom CSS in Divi but don't know where to start - or if you're using various code snippets and CSS tutorials, but feel baffled when something doesn't work as it should - this Divi beginner guide is for you!
As the video is quite comprehensive and covers a lot of CSS and Divi topics, here is a table of contents for your convenience:
0:00 CSS for Divi: Introduction
1:12 What is CSS?
2:16 CSS Syntax
3:07 CSS Selectors: Targeting Elements
11:03 CSS Properties
11:38 Inspecting CSS Generated by Divi
13:37 Adding Custom CSS in Divi
19:13 Various Methods of Adding CSS in Divi
20:58 Exporting Custom CSS to Divi Cloud
21:57 Custom CSS for Divi Builder Elements
29:54 CSS for Divi: Final Thoughts
If you prefer written instructions - or would like to see the list of resources mentioned in the video - you can find the Beginner Guide to Custom CSS in Divi on the Divi Lover blog here: divilover.com/...
I also mentioned Divi child themes as a convenient way to keep track of your custom CSS, so if you're interested in that, here's the video where I explain more: • Divi Child Themes: Beg...
And if you'd like to practice CSS with a group of other Divi Lovers, I invite you to sign up for the 5-Day CSS & Divi Challenge. It's free, and you can join the waitlist here: css.divilover.com As soon as the new edition of the challenge is announced, you'll get an email!
#DiviCustomCSS #DiviLover #DiviTutorial #DiviForBeginners

[@chrisnewmusic]

This is the best explained Divi custom CSS video!! Thank you!!!

[@aniaromanskacom]

Wow, thank you so much!

[@sabinevanerp]

So happy I found your tutorial! First time I understand all of it! THANK YOU!!!

[@aniaromanskacom]

This is amazing news, thank you!

[@urhorattel]

Hi Anya! You have a great talent for teaching, explaining at a calm and correct pace. Everything is simple and straightforward. You always maintain the right tempo for speaking.

[@aniaromanskacom]

Thank you! 😃 I'm so happy to hear that!

[@jasondarr1238]

As someone who has been using css with absolutely no idea what I am doing, I thought this was extremely helpful! Thank you.

[@rafaelgaus6083]

Hey Anja, I have been familiar with CSS for a long time. Nevertheless, this video showed me the ways in DIVI very well, i.e. how DIVI deals with it. I especially like that finally a video shows that within the modules in the custom css the classes and brackets do not have to be defined. This is not necessarily clear for beginners of DIVI and one is constantly wondering what DIVI actually wants to say with its error messages in the boxes. I haven't been following you for very long, but I'm really glad I discovered you. You are a wonderful source for better web design with DIVI. Keep up your fantastic style of teaching and I am sure you will have an enormous number of "addicted" followers. Thank you for your wonderful work for the community. Best regards from Germany. Rafael

[@aniaromanskacom]

Thank you Rafael for your very kind feedback! I am so happy you think this tutorial is helpful :)

[@twentyfive1331]

Thank you very much! It is very clear, everything is in fact, no unnecessary words and digressions. You're beautiful. Thanks again.

[@aniaromanskacom]

Glad it was helpful!

[@TilakConrad]

another fantastic tutorial - congratulations and thank you very much

[@aniaromanskacom]

Glad you liked it!

[@RodeoDogLover]

THANK YOU SO MUCH. This is so valuable for us people moving from right-brained designer to understanding coding. 😘 Looking forward to checking out more of your offerings.

[@kristenleigh8362]

I agree with Rafael. It was great to learn about CSS from the Divi perspective. This will help me a lot! Thanks so much for all you do to make building sites with Divi an even better experience, Ania!

[@aniaromanskacom]

Thank you Kristen, this is so nice to hear!

[@dicawp6106]

Excellent. Now I feel more confident dealing with CSS. Thanks.

[@aniaromanskacom]

Glad I could help!

[@jjustice2010]

Yes mega helpful! Thank you Ania 💚

[@aniaromanskacom]

Wonderful, I'm happy I could help!

[@vedichants]

Thank you. this is top quality content. youtube should definitely push it to more views...

[@aniaromanskacom]

Thank you! :-)

[@bjmdekim]

Very good guide. Thank you.

[@aniaromanskacom]

Glad you enjoyed it!

[@Phirebase]

Nice tutorial, thanks a lot! Like. 👍🙏

[@aniaromanskacom]

Thank you too

[@mouanaimi]

You are the best!

[@aniaromanskacom]

Thank you for your kind words!

[@roxcastaneda]

This is great! Thank you very much.

[@aniaromanskacom]

Glad it helped!

[@teddybillewicz7897]

Hi Anya, thank you for your wonderful way of teaching CSS (and DIVI)! Question: What editor do you use for you CSS-Editing? It seems to be able to do all the "missing" things like actually showing colors and having shortcuts for adding and deleting comments... Is that an external editor or can it be used directly in Divi? You also show instant changes on the right hand side of the screen (while showing the source CSS on the left). How or with which editor do you achieve that?

[@aniaromanskacom]

Hi Teddy, I'm using Nova (Mac-only code editor), and it's separate software. A free and very popular alternative would be Visual Studio Code. The only connection it can have with Divi is if you use it to directly open and edit a certain file from your server (e.g., a style.css file in your Divi child theme). If I open a local HTML file, I can see a live preview in one of the editor tabs.

[@noyonbiswas]

Mam, your all videos are amazing. Please make videos on Divi Child Theme Development.

[@aniaromanskacom]

Thank you, I'll put it on my list!

[@Bobcoolyoung]

You are beautiful and smart. Thank you. I learnt a lot from watching your video and I love your accent. 😊

[@aniaromanskacom]

Thank you, that's very kind!

[@masoodahmed1138]

Hi Anja, Thank you for your content. I saw your Divi menu module tutorial and I liked the CSS changes for my website. However, I need more help with my website menu design. I would like the entire contents of my menu: first children and second children items to be contained within 1000 px x 500px (width) with scrolls for respective columns. And the second children items are to be listed from the top menu line instead of sequentially falling. Is there a way to get this done? I appreciate your help. Cheers.

[@aniaromanskacom]

Hi Masood and thank you for your kind feedback! As for your question, I don't think there is a quick, easy fix or snippet that would do this for you. This looks like quite a complex and time-consuming job ;-) And I haven't seen a tutorial dealing with such a specific issue. My answer would be to learn custom CSS, because really, with CSS, you can do anything you want - although obviously, some things will be more complex while others are easier.