What is CSS and when you will want to add it to Divi?

CSS (Cascading Style Sheets) is a type of code that is used to tell browsers how to display the content (HTML) of your website.

You can add your own custom CSS to Divi to get extra control beyond the settings that are built-in to the Divi Builder. Divi comes with a lot of customization options built-in, but sometimes you want change Divi CSS to get a style that cannot be controlled with these settings or you want to quickly apply a style sitewide.

There are 7 methods to add Custom CSS to Divi

  1. The Divi Theme Options Custom CSS area  
  2. The Advanced Options tab of sections, rows, and modules
  3. The Divi Builder Page Settings
  4. A Divi Code module
  5. A Divi child theme
  6. WordPress Theme Customizer Custom CSS area

1. Divi Theme Options Custom CSS area

divi theme options

A popular choice for adding CSS in Divi is to use the Custom CSS area in the Divi Theme Options. The Custom CSS box is located in your WordPress dashboard under Divi > Theme Options at the bottom of the page.  

A good method for keeping your CSS in 1 place on smaller sites that do not require a lot of CSS.

  • Keep your CSS in one place
  • Doesn’t need a child theme
  • Has in-built code formatting (Divi CSS code editor)
  • Your code is safe when you update Divi

2. Sections, rows, and modules Advanced Tab Settings

advanced tab settings

Divi sections, rows, and modules have an Advanced Settings tab that allows you to add your custom CSS to apply to the main element, or any number of specific areas of that section, row or module. You can also assign a Divi CSS ID or Class.

Divi Sections and rows allow you to add CSS to Before, Main Element and After. Divi modules come with additional options to add CSS for specific elements within the module. You can add or change the CSS being applied for hover states also.

The main problem of adding CSS into sections, rows, and modules is that it is very easy to lose where you have added code.

A good method for a one-time use edits

  • Easy to export a layout with the CSS attached
  • Easily create CSS hover states
  • Doesn’t need a child theme
  • Has in-built code formatting
  • Your code is safe when you update Divi

3. Page Settings in Divi Builder

divi page settings

In the Visual Builder, you can click on the cog icon to open the page settings which includes a custom CSS area under the advanced tab. This allows you to add any CSS that will effect this specific page and not any other pages on your website.

  • Allows page-level CSS to be added
  • CSS is not added sitewide
  • Doesn’t need a child theme
  • Has in-built code formatting
  • Your code is safe when you update Divi

4. Divi Code module

divi code module

You can add HTML, CSS or JavaScript code to the Divi code module. When adding CSS into the code module you will need to wrap the code in <style></style> tags.

A good option if you want to keep CSS, JavaScript, and HTML together such as when exporting JSON layouts.

  • Add CSS (and HTML & JavaScript) code
  • Comes with Divi code formatting
  • CSS is not lost when updating Divi

5. style.css in a Divi child theme

divi child theme

This is another popular method for adding custom CSS to Divi, and for any client sites, would be the most professional way. This method does require you to add and activate a child theme, which can put some people off, but it is very easy to do using the Bare Bones child theme. Just download, upload via WordPress dashboard and activate and you will have a child theme with a blank style.css ready to add your own CSS.

By using a child theme you can not only add any custom CSS you may need but also safely add any modifications to your theme and plugin files.

  • Your CSS is in 1 location
  • You can use any code editor for adding/editing CSS
  • CSS is not lost when updating Divi
  • You can use the child theme for editing theme and plugin files too

6. WordPress Theme Customizer Custom CSS area

theme customizer

You can add your own custom CSS into the WordPress Theme Customizer but with all the other (better) options available this is not a very popular choice. It may be useful for a quick test run of CSS but otherwise not something I personally use.

Do NOT add any CSS in Divi theme files

divi lost css

Do not add or edit CSS in your style.css (see #5) file unless you have a child theme installed and activated. If you add or edit the Divi Theme files directly without a child theme then the new CSS file will override those changes when you update Divi. When you add a child theme you will have 2 style.css files, so make sure that you are editing the one that is in Divi-child(or whatever your child theme is named)/style.css and not divi/style.css.

What method do you use to add CSS?

I will either use the Divi Theme Options area or a Divi CHild Theme for adding custom CSS. Smaller sites with little CSS tweaks are fine to use the Theme Options method (#1) but for larger sites or sites that will need a child theme anyhow, I use a stylesheet.