First published 5 December 2017. Last updated 8 April 2022.

Even though Divi requires no knowledge of code, designers will find their websites a step above the rest by gaining an understanding of CSS. While there are hundreds of articles written about CSS in the general sense, there aren’t all that many that have been adapted for use specifically for Divi.

Beyond the ‘copy and paste’ tutorial-style CSS for Divi articles, we wanted to make sure that Divi users understand the basic underlying principles of CSS and why it should be a priority to learn the ins and outs of the syntax in relation to the HTML elements used in the Divi framework.

The following blog post aims to give you a deeper understanding of CSS as a syntax. It’ll discuss:

• What CSS is and how CSS works,
• A short introduction to foundation CSS principles,
• Why learning CSS should be a priority if you’re a web designer,
• Why CSS and child themes go hand in hand, and,
• here you can learn CSS for Divi.

Like anything in life, learning a new skill can be overwhelming in the beginning, but if you’re ready for the challenge, you’ll transform the nature of your business for the better.

Not only will learning CSS help your immediate web design projects, but it’ll also have a serious, positive impact on your career.

What is CSS?

CSS stands for Cascading Style Sheets, with emphasis on the word “cascading”. CSS is a language that when written and applied to an HTML element, will give the element a new look and feel.

If you think of HTML as the content and general structure of the website, then think of CSS as the design style that influences various aspects of these elements, such as color, style, font size, margins, padding and much more. CSS offers a wide range of element styling options, some of which we’ll take a look at as we progress through a number of blog posts.

CSS is written or compiled in an Integrated Development Environment (IDE), such as Sublime or Brackets. CSS can also be written simply by using a Text Editor.

Breakdown of a CSS selector and declaration

CSS commands are two-fold. CSS is comprised of :

1. The selector: this defines which HTML element in your website you’d like to style, and
2. The declaration: this is the actual styling itself, broken down further into:

• The property: this is the aspect of the HTML element you’d like to change (ie. do you want to change the color, font-size, border-width of the element),
• The value: this is the style variation you’d like to apply (i.e. color becomes green or blue, font-size becomes 12px or 20px, and border-width becomes 2px or 3px etc.)

Without diving into this too much (we’ll save more exciting CSS stuff for the future), there are a few things to keep in mind when learning the basics of CSS.

The use of the word ‘Cascading’ in CSS relates to the order in which commands are executed. In CSS, commands are run from the ‘bottom-up’, in other words, commands written at the top of a CSS file can be overridden by another command issued further down in the same file, or in another linked CSS file.

The main takeaway here is that it is important to give consideration to the order of things when writing CSS. Without diverting too much, it’s worth noting that another level of prioritization can be added to an element with the use of either CSS Classes or IDs.

Classes and IDs are selectors that can be used to diversify elements and the styling thereof even further. If you’re familiar with the Divi builder, you would have noticed ‘CSS Class’ or ‘CSS ID’ in the Advanced tab.

Why CSS Should Be the First Syntax you Learn

It’s a known fact that Divi requires no knowledge of code for users in order for users to build a website. In using a framework such as Divi, a lot of the heavy lifting with PHP, JavaScript, HTML and CSS have already been done for you, leaving users with the task of merely assembling modules and inserting original content.

While Divi’s Out-of-The-Box look is generally appealing, some users may want to create a more unique aesthetic for their website.

Sure, the modules of the Divi Builder can be styled and customized using the various settings in the Design tab, and beyond this, the Custom CSS tabs offer the ability to add CSS styling to each module.

While this may suffice for small tweaks, if you’re looking to create a particular look and feel for your website, or wish to add deeper levels of personalization to your website, you’ll need to become familiar with CSS.

For example, what if you want to change the color of a header and have this look echo throughout your site? Do you really want to find the header module on each and every page and manually change the color? No, instead you would want to make this change in one location and have it reflect the change in the headers throughout the site, or where necessary.

CSS 101: Use a Child Theme

Before diving into the demonstrations of CSS with Divi, it’s important to mention that, it is deemed as best practice that CSS edits be made with the use of a child theme. Using a child theme entails setting up a stylesheet to house all of your styling edits. This way, site edits will be preserved and won’t be overwritten when a theme update rolls around.

For those wanting to skip the child theme step but still preserve their site changes, Divi allows users to add CSS in a number of areas:

• Styling can be added to the Custom CSS area in the Divi Theme Options > General tab
• Quick, simple aesthetic changes can be added to the sections, rows and individual modules themselves (in the Advanced > Custom CSS tab of each)

Keeping track of multiple styles can become a challenge, so it’s advised to use the Divi Theme Options Custom CSS area as opposed to the individual modules when dealing with many tweaks and edits. While the Divi Theme Options Custom CSS area and a stylesheet will produce the same result, opting to go the child theme route allows you to keep all of your site edits (unique styles, functions, new files) in a separate location, and also, will allow you to manage multiple stylesheets easier.

Understanding child themes (why they’re important, how they function, how to create one etc) is will be explained in detail during the course. For more information on child themes, read the following blog posts:

• Everything You Need to Know About Using a Child Theme with WordPress and Divi
• What Is The Difference Between a Child Theme and a Premium Divi Child Theme

If you’re ready to create a blank child theme for your Divi website, check out the Divi Space child theme generator.

Once you’ve created, installed and activated your child theme, the second thing you do is open the stylesheet.css file in your child theme folder and start adding your customisations.

In the long term, CSS should be executed by adding customizations to the style.css stylesheet in the child theme. Alternately, you could add CSS to the Custom CSS area of the Divi Theme Options section.

Plugins to Help You Write CSS for Divi

If you’re ready to jump into writing CSS for your Divi site but are not quite comfortable with tackling the stylesheet, know that there are several alternate ways to add CSS to Divi. One of the easiest ways to add CSS to Divi is to use our Divi Module Custom CSS Selectors plugin.

Divi Module Custom CSS Selectors

A fantastic addition to anyone’s development toolkit, the Divi Module Custom CSS Selectors plugin extends the number of default selectors within the Divi framework. By default, the Divi theme ships with several CSS selectors in the Advanced tab.

These selectors are great as you can add short bits of CSS directly into the modules themselves. Another great aspect about using this version of adding CSS is that you don’t need to spend time painstakingly searching for selectors as they’re already there for you.

While this is a great system for adding CSS, there is a limited number of selectors included in the theme by default. Thankfully, the Divi Module Custom CSS Selectors plugin adds over 500 new selectors to the framework, giving you ample opportunities to custom style even micro sections of each module in a layout.

If you’re brand new to writing CSS, this is a great plugin to have as it’ll slowly begin teaching you about CSS selectors, how they’re comprised and how to write CSS.

Purchase the Divi Module Custom CSS Selectors plugin from the Divi Space store.

Learn CSS with Divi Space!

If you’re ready to become a rockstar Divi designer, learning CSS is the next step, and who better to learn this incredible skill set with than Divi Space and the Divi Space founder, SJ James himself!

Our popular CSS and jQuery course, Transforming Divi with CSS and JQuery will teach you everything you need to know about writing CSS and jQuery for the Divi Theme.

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

With Transforming Divi with CSS and JQuery under your belt, you’ll be able to:

• Design better websites and propel your business
• Research new concepts and code work with confidence
• Charge higher rates for your website design projects
• Take on even bigger projects for higher acclaim

Enrol in the Transforming Divi with CSS and JQuery now!

Ending Thoughts

Having a firm understanding of CSS is an exceptional skill that’ll set your development above the rest. You’ll be able to create custom designs that add extreme value to your customer’s brands and online presences.

Whether you’re looking for an online course to learn CSS from foundations to advanced principles, or are after a scripting plugin designed to help you write CSS with ease, there are options available to you.

We want to hear from you!

How do you feel about learning CSS? Is it something you’d like to do, or would you rather not learn the skill? What’s keeping you back? Has learning CSS helped your web design business? Share your stories with us by commenting below.

Thanks for reading!