First published 13 January 2016. Updated 07 March 2022.

Are you itching to create a web design unlike anything you’ve seen before? Perhaps a client has asked you to build something that’s a bit far out of your skill level. The good news is, you can customize a Divi website to achieve just about any look and feel, all you need to know is how to manipulate a few code variables. If this sounds like something you’re interested in, you need to learn Divi and WordPress CSS. 

Partner to HTML, CSS is one of the most popular web publishing languages. When used correctly, CSS gives websites customization options such as setting up responsiveness, changing fonts, fine-tuning layouts and generally improving a website’s visual appearance.

Fortunately, there are plenty of tutorials and courses available to new and experienced WordPress and Divi users looking to learn or brush up on their CSS. If you’ve wondered, “How hard is it to learn HTML and CSS?” don’t panic. In the following post, we’ll share some of our all-time favorite resources for learning CSS, including:

• The Divi CSS Guide
• Online courses aimed specifically at learning CSS for Divi
• Plugins that will help you pick up the CSS scripting skill quickly
• Online sources offering Divi-specific CSS tutorials
• Online courses, platforms and learning centers offering general CSS information and instruct
• Top CSS resources as recommended by the Divi Space founder

If you want to create new and unique web designs that stand out from the crowd, you need to get cracking with learning CSS!

What is Custom CSS?

CSS is a styling syntax applied to HTML elements to give them a distinct look and feel. If you’re confused about the difference between HTML and CSS, think of it this way: HTML is the room or rooms of a house, and CSS is the interior decor and design.

CSS brings HTML elements to life. With CSS, you can change the color of an HTML element, add drop-shadows, change alignment or positioning, and much, much more. Without CSS, web interfaces would look extremely bland and boring, hence why it is one of the most important things to learn when building websites.

CSS stands for Cascading Style Sheets. It is compiled or written in a program called an Integrated Development Environment (IDE), such as Sublime or Brackets, or it can also be written simply by using a Text Editor.

CSS is added to a file called the stylesheet (one of many files that make up a full WordPress theme package). If you’re building websites with Divi, you’ll need to create a child theme to protect the Divi theme custom CSS edits you’ve made. Within your child theme, you’ll create a file called style.css and add your custom CSS here. If you are unfamiliar, read our post on using child themes with Divi.

Why You Should Learn CSS

There are many reasons why you should consider learning CSS:

• You’ll learn a new skill. By improving your skills and abilities, you’ll have a competitive advantage over peer developers. You’ll be able to produce higher quality websites with features that set your designs apart from the rest. With knowledge of CSS, you can fulfill client requests that others cannot.
• Your work will be unique. If you’ve developed Divi sites for some time, you’ll know that there are a few aspects of the theme that are a dead giveaway. After building several Divi websites, you can recognize one instantly. By learning how to customize HTML and CSS, you can start to create Divi sites that don’t have the standard Divi look and feel, instead, they’ll have your signature style attached to them.
• You can work with other web platforms. CSS doesn’t stop at Divi or even WordPress. It’s a universal styling syntax that many web interfaces use. Understanding even the basics of HTML and CSS styling will give you the confidence to approach other web publishing platforms with confidence.
• You can increase your prices. With a new web design skill under your belt, you’ll instantly be more valuable to your clients. Your designs will look more professional and you’ll be able to offer more in a project. With this, you can start to charge higher rates for your work.
• You can build your business. With all of the benefits mentioned above, you’ll be able to grow your business to new heights. You’ll be able to offer new services, go after more work, take on larger projects and grow your business!

CSS is a skill that’s in demand, and that demand isn’t going away. As CSS is an essential part of web design, it should be top on your list of things to learn.

Customizing Divi with CSS

The Divi theme is a seriously powerful WordPress theme. One of the many reasons that it is so popular is that the drag-and-drop visual builder allows users to make CSS-like styling changes without using code. The visual interface lets you set things like font-size, letter spacing, border qualities and much more, without ever having to write CSS rules or open a stylesheet.

Even though Divi sites can be enhanced using the builder itself, there may come a time where you’d want to go deeper in your customization. You may have a client that requests unique aspects for their site, or, you may want to create a web design that really stands out.

Even if you have a good command of Divi, having a strong grasp of CSS will let you style your website’s sections, rows, and modules even further, as well as styling elements that you normally wouldn’t have access to. Another reason why we love the Divi theme so much is that making customizations to the theme is easy, for example, there are several different ways that you can add CSS to Divi.

The Best Resources for Learning Divi and WordPress CSS

Here is a collection of our top resources for learning CSS. We’ve broken our recommendations list into:

• The Divi CSS Guide
• Online courses for learning CSS specifically for Divi
• Plugins designed to help with CSS
• Online courses, websites and learning portals for learning general CSS
• Online resources for learning CSS specifically for Divi

The Divi CSS Guide

Getting started with understanding CSS can be a huge task. To make this feat easier, the Divi Space team put together an incredible resource to demystify the process of learning CSS for Divi. The Divi CSS and Child Theme Guide is a free resource, available either online or as a downloadable PDF, that’ll take you through the processes of building a child theme for Divi and also styling the Divi theme with CSS.

Kickstart your CSS career with our free guide

As well as learning about child themes—why they’re important for development and also how to create one—the Divi CSS and Child Theme Guide will teach you all about CSS, from the foundations to advanced concepts, including:

• How to add custom CSS to Divi in several different methods
• CSS selectors and how to target elements in the Divi framework
• Browser Developer Tools and how to use these when scripting CSS
• How to troubleshoot CSS if something goes wrong

This guide is extremely helpful and will give you a brilliant foundation for your Divi CSS learning. Check out the Divi CSS and Child Theme Guide.

Best Online Courses for Learning Divi Custom CSS

First up on our list of recommendations is CSS courses specifically for Divi. These courses will equip you with the exact skills you need to ramp up the look of your Divi site, removing the guesswork from hunting through tutorials.

The courses have been created by leaders in the Divi community. They’ll teach you how to write clean code and how to work with the best tools. The courses include downloads and resources, and provide feedback and support.

Most of these courses include some element of student interaction or a community environment where you can meet your peers, help others and ask for help. You can build relationships with like minded folk from around the world!

Transforming Divi with CSS and jQuery

Learn CSS and jQuery from Divi Space! Enroll in our course Transforming Divi with CSS and jQuery

First up is Transforming Divi with CSS and jQuery. This is our online course that teaches both CSS and jQuery from beginner to advanced level. To date, this is the only CSS course for Divi that also teaches jQuery; a code library built with JavaScript that adds powerful animations and capabilities to Divi. Developing a firm understanding of HTML, CSS and jQuery will really set you apart from the pack!

The course takes you through fundamentals, teaching you how to write CSS code from the start. The course includes real-world examples, guided learning, an extended jQuery cheat sheet, access to recorded sessions, a Facebook group, and lifetime access to the course.

While the course is underway, you’ll be guided through the process of building a Divi website from start to finish. Once you’ve completed the course, you’ll be awarded the title of a certified Divi front-end developer. This title includes a digital certificate and badge for your website.

Enroll in Transforming Divi with CSS and jQuery today!

Josh’s Divi/CSS Course

Learn CSS with Josh Hall

Josh’s Divi/CSS Course from Josh Hall is another great option for those wanting to learn how to write CSS for Divi. The course teaches the basics of CSS, as well as how to customize Divi when plugins like Gravity Forms and WooCommerce are installed.

The course is designed for both beginners and advanced Divi web designers, so no matter where you’re skill level is at, you’re guaranteed to learn something new. Designed more as a training guide than an academic course, Josh’s Divi/CSS Course includes plenty of reference resources. You’ll also get lifetime access to the course as well as entry to a private Facebook group.

The CSS & Divi Beginner Course

Learn CSS with Michelle Nunan

Next on our list is The CSS & Divi Beginner Course from Michelle Nunan of Divi Soup. This course, aimed at both beginner and advanced users, teaches the basics of CSS and how to use it with Divi. The course is taught in bite-sized lessons and includes homework with quizzes, tools, resources and more. You’ll also get access to a private Facebook group, and you’ll have lifetime access to the course.

Best Plugins for CSS

The Divi Module Custom CSS Selectors plugin is a Divi-specific plugin that makes scripting CSS a breeze. The plugin expands the Divi theme framework by taking the default CSS selectors included in each module and adding over 500 new selectors.

Divi Module Custom CSS Selectors

For those that are brand new to CSS, scripting code ground-up can be extremely intimidating. The Divi Module Custom CSS Selectors plugin is a great help as it’ll not only add the selectors to target, but it will begin teaching a new Divi user about the Divi theme and how its CSS selectors are made up. After using this plugin for some time, a Divi user will be more familiar with Divi selectors, how multiple selectors are used, and how to script CSS. If they feel comfortable, they can graduate to use one of the other CSS methods, or, simply stick to the plugin.

Learn more about the Divi Module Custom CSS Selectors plugin.

Best Online Sources for Divi Tutorials

Perhaps you don’t want to enroll in a formal course but want to find a specific CSS hack for your site. If you’re after Divi CSS tricks, your best bet is to look for Divi tutorials.

Thankfully, the Divi community is filled with plenty of tutorials from big names in the Divi space. Some tutorials are strictly CSS, while others may bring in other scripting languages such as PHP, jQuery and more.

Generally, all of the Divi tutorials are easy to follow.
Some of the resources to follow share tutorials regularly, like our Divi Snippets platform. Other sources share tutorials infrequently. Nevertheless, check the tutorials out and remember to bookmark your favorites!

Divi Snippets

Take a look at our awesome collection of Divi tutorials and snippets!

First up is our resource Divi Snippets. We’re totally biased but we do think this is the best code library around!
Our Divi Snippets platform is a living library filled with well-documented Divi CSS tricks and code hacks. You can easily see which language each tutorial uses, as well as the skill level. Don’t let the skill level deter you; our snippets are thoroughly explained, so even new users will feel confident tackling tutorials. We add new snippets each week, so be sure to check back each regularly!

Some of our favorite Divi custom CSS tutorials and snippets that you can try right now include:

• Create a Call to Action Button Below the Mobile Hamburger Menu
• Create Collapse Submenus With Clickable Parent Menu Items
• Swap the Order of the Secondary Header Contact Info and Menu

Check out all of our Divi snippets!

Divi Soup

Find more Divi tutorials from Divi Soup

Created by Michelle Nunan, whose CSS & Divi Beginner Course we’ve linked above, the Divi Soup site offers plenty of step-by-step tutorials with downloads.

Best Resources for Learning General CSS

Now that we’ve covered Divi-specific courses, here are a few websites, learning platforms, tutorial sites and online courses that’ll teach general CSS. These sources cover everything from basic to advanced levels of using CSS. None focus specifically on Divi, but the principles can be adapted to use with Divi.

w3schools CSS Tutorials

Find amazing code tutorials from w3schools

W3schools is an excellent online resource for learning and practising just about any programming or markup language for the web. You can learn HTML, jQuery, and of course, CSS, among others.

The tutorials here are not specific to any web platform, theme or CMS, but you’ll learn the basics and be shown how they all tie together. There are loads of examples and testing environments where you can experiment with code and see immediate results as you go.

W3schools is totally free, but if you wish to do a CSS course, you can claim CSS developer certification for a fee.

Lynda

Browse a collection of online courses, some focusing on CSS, from Lynda.com

Next up is Lynda, from LinkedIn. Lynda has over 1800 tutorials for CSS and covers every level from beginner to advanced. Again, these tutorials and courses are not specific to Divi, instead, they teach general CSS.

Udemy

Visit Udemy and check out their online courses, some of which teach about CSS

Udemy currently has over 300 courses that are about or include CSS. Many of these courses include plenty of hours of training, have excellent ratings and are priced well. For a few dollars a pop, you can seriously improve your web development expertise by starting your CSS journey.

Codecademy

Check out the Learn CSS course from Codecademy

Next on the list is Codecademy. Through this online learning platform, you can learn a collection of programming languages, CSS being one. Their comprehensive course, Learn CSS, takes you through plenty of lessons that cover selectors, positioning, typography, flexbox and more.

Udacity

Consider the free Intro to HTML and CSS course from Udacity

Another great online resource for learning HTML and CSS is a free course from Udacity. This course is designed for beginners. It’ll give you a great foundation. The course takes three weeks to complete and includes CSS syntax, selectors, units, code editors and an overview of using Developer Tools.

HTML Dog

Have a look at the free CSS tutorials from HTML Dog

A great online resource is HTML Dog. It has loads of free CSS tutorials for many levels ranging from beginner to intermediate and advanced. The tutorials are simple and include code that you can copy to use.

StackSocial

Research the Pro CSS Hacker Course from StackSocial

Finally, the last great CSS resource on the list is StackSocial. StackSocial has several courses, all ranging from beginner to expert level. They also have a free course, the Pro CSS Hacker Course, that has great instruction for those wanting to learn CSS.

Top CSS Resources as Recommended by Divi Space

To end this post, we’re sharing a collection of the best CSS resources This roundup was created by the Divi Space founder, Stephen James, so you can bet that these are truly amazing references to keep close at hand. Remember to bookmark your favorite resources!

• 30 CSS Best Practices for Beginners
• How to Edit Source Files Directly in Chrome
• An Introduction to CSS Transitions and Animations
• CSS Tricks For Your Divi Theme Project And Product Thumbnails
• On The Tenth Day Of Divi, We Explore Seven Simple CSS Tricks
• CSS3 @keyframes Rule
• Sizing with CSS3’s vw and vh Units
• Specificity Calculator
• Specifics on CSS Specificity
• Using media queries
• CSS Layout – The position Property
• WordPress Codex on Child Themes
• CSS Selector Reference
• How The Custom CSS Tab and The Divi Library Can Transform Your Workflow
• Text Styles and Hover Effects
• How To Add Custom Fonts In WordPress
• Hover.css
• How to Create Diagonal Lines Between Sections in Divi
• Transform a Divi Menu Item Into a CTA Button
• Adding JavaScript (and jQuery) to the Divi Theme
• The Elegant Icon Font
• Can I Use
• Meet the Pseudo Class Selectors

Ending Thoughts

If you’re ready to take the leap and learn CSS for your Divi development, you’re setting yourself up for success! The time or money you would have invested in your education and upskilling would have paid for itself in no time!

We hope you enjoyed our list of CSS resources, both for Divi as well as for learning CSS in general. CSS is an important skill that every designer and developer should learn, so we hope this post has given you a nudge in the right direction!

Learning CSS will help you attract better clients, land better projects, increase your rates, and help you build a flourishing Divi design business! What are your favorite resources for learning CSS? Let us know in the comments below!