2n

d
Ed
itio
n

D I V I S PAC E | T H E U LT I M A T E C S S F O R D I V I G U I D E
 Divi CSS and Child Theme Guide by Divi Space
Copyright © 2019 Divi Space. All rights reserved.

Published by Divi Space (an Aspen Grove Studios company).

All rights reserved. No part of this eBook may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval
system, without permission from the publisher.

Divi Space eBooks may be downloaded for educational, business or sales promotional use. For more
information, contact support by visiting the Divi Space website.

We strive to update the contents of our publication as timely and as precisely as possible. If you discover
any errors in this publication, please don’t hesitate to notify us.

Please check if a newer version is available via the Divi Space website.

Updated December 2018.

Tested up to Divi 3.15.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 2
 TABLE OF CONT E N T S

Introduction

Part One: Introduction to CSS

What is CSS………………………………………………………………………………………………………………………………………………………………………………………………………..…8
A Overview of Basic CSS Terminology………………………………………………………………………………………………………...………………………..…8
Why You Should Learn CSS……………………………………………………………………………………………………………………………………………….………………..9
CSS for Divi…………………………………………………….……………………………………………………………………………………………………………………………………………………..9
Learn CSS with Divi Space……………………………………………………………………………………………………………………………………………………………………10

Part Two: Child Themes

An Introduction to Child Themes……………………………………………………………………………………………………………………………………………………12
What is a Child Theme?……………………………………………………………………………………………………………………………………………………………………………13
Why Do I Need to Use a Child Theme?……………………………………………………………………………………….......……………………………………14
How to Create a Child Theme……………………………………………………………………………………………………………………………………………………………16
How to Create a Divi Child Theme From Scratch……………………………………………………………………………………..……………………19
How to Install a Divi Child Theme?…………………………………………………………………………………………………………………………………………………21

Part Three: 6 Ways to Add CSS to Divi

Add CSS to Divi Using Inline CSS……………………………………………………………………………………………………………………………………………………25
Add CSS to Divi Using the Divi Theme Options Custom CSS………………………………….…………………………………………23
Add CSS to Individual Divi Modules Using the Advanced Tab CSS…………………….........………………………………29
Add CSS to Divi Using the Divi Builder Page Settings…………………………………………………………………………………….…………32
Add CSS to Divi Using a Stylesheet………………………………………………………………………………………………………………………………………………35
Add Custom CSS and JavaScript with a Plugin…………………………………………………………………………………………………………………37

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 3
 TABLE OF CONT E N T S

Part Four: Divi Selectors

CSS. Selectors………………………………………………………………………………………………………………………………………………………………………………………………..…40
Sections, Rows & Columns………………………………………………………………………………………………………………………………………………………...……..…41
Header & Footer……………………………………………………………………………………………………………………………………………………………………………….…………..…43
Top Header - Secondary Menu……………………………………………………………………………………………………………………………………….....………..…44
Top Header - Navigation……………………………………………………………………………………………………………………………………………………….……………..…46
Top Header - Sub Menu………………………………………………………………………………………………………………………………………………………………………..…47
Footer………………………………………………..…………………………………………………………………………………………………………………………………………………………………..…..48
Mobile Menu……………………………………………………………………………………………………………………………………………………………………………………………………..…49
Accordion……………………………………………………………………………………………………………………………………………………………………………………………………………..…50
Audio…………………………………………………………………………………………………………………………………………………………………………………………………………….…………..…51
Bar Counters…………………………………………………………………………………………………………………………………………………………………….………………………………..…53
Blog………………………………………………………………………………………………………………………………………………………………………………..……………………………………………..54
Blurbs………………………………………………………………………………………………………………………………………………………………………………………………………………………..…56
Call to Action…………………………………………………………………………………………………………………………………………………………………………………….………………..…57
Contact Form……………………………………………………………………………………………………………………………………………………………………………………………………..…58
Countdown Timer………………………………………………………………………………………………………………………………………………………………………………………...…59
Email Opt In………………………………………………..…………………………………………………………………………………………………………………………………………..............…61
Portfolio…………………………………………………………………………………………………………………………………………………………………………………………………………......…..…62
Gallery………………………………………………………………………………………………………………………………………………………………………………………………………………………..…64
Image…………………………………………………………………………………………………………………………………………………………………………………………………....…………………..…65
Login…………………………………………………………………………………………………………………………………………………….……………………………………………………………………..…66
Map………………………………………………………………………………………………………………………………………………………………………………………………………………………….…..…67
Number Counter………………………………………………………………………………………………………………………………………………………..…………………………………..…68
Person………………………………………………………………………………………………………………………………………………………………………………………………………………………..…69
Pricing Table…………………………………………………………………………………………………………………………………………………………………….....……………………………..…70

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 4
 TABLE OF CONT E N T S

Part Four: Divi Selectors

Shop…………………………………………………………………………………………………………………………………………………………………………………………………………………………..…72
Slider…………………………………………………………………………………………………………………………………………………………………………………………………………….…………..…76
Tabs……………………………………………………………………………………………………………………………………………………………………………………………………………………….…..…78
Testimonials………………………………………………………………………………………………………………………………………………………………………………….…………………..…79
Toggle……………………………………………………………………………………………………………………………………………………………………………………………………………………...…80
Video Slider……………………………………………………………………………………………………………………………………………………………………...………………………………..…81

Part Five: Browser Developer Tools

How to Use Your Browser’s Developer Tools…………………………………………………………………………………………………….……………..…83
Breaking Down CSS Commands………………………………………………………………………………………………………..………………………………………..…90

Part Six: Troubleshooting CSS

How to Troubleshoot CSS……………………………………………………………………………………………………………………………………………………………………..…92

Part Seven: Resources

The Best Resources for Learning CSS………………………………………………..…………………………………………………………………………………………97
Best Online Courses for Learning CSS with Divi………………………………………………………………………………………………………....…..…98
Divi Community Blogs…………………………………………………………………………………………………………………………………………………………………….….…………101
Best Websites and Learning Portals to Learn CSS……………………………………………………………………………………………...……..…104
Learn CSS for Divi…………………………………………………………………………………………………………………………………………….…………………………………….……..…112
CSS Resources…………………………………………………………………………………………………………………………………………………………………………………………….…..…114

Tables
Divi Selectors……………………………………………………………………………………………………………...…………………………………………………………………………………..…118
Basic Property Reference…………………………………………………………………………………………………………………………………………………………………..…125
CSS Selectors……………………………………………………………………………………………………………………………………………………....………………………………………..…132
CSS Units……………………………………………………………………………………………………………………………………………………………………………………………………………..…134
Color Values…………………………………………………………………………………………………………………………………………………………………….....…………………………..…135

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 5
 Introduction
I N T R O D UCT ION

If you're a Divi user and are interested in improving your web design skills, then this eBook is for you. This eBook
provides a guide to the CSS selectors used in the Divi theme framework.

One of the most common CSS-related queries we see in various online forums and in the Divi community
groups is the targeting of the elements that make up Divi’s modules. The Divi CSS and Child Theme Guide
eBook from Divi Space will help you understand the various elements of each module and show you how to
isolate and customize them to fit your overall web design aesthetic.

THIS GUIDE COVERS: ABOUT THE AUTHORS:

- What CSS is and why you should learn it Stephen James is a UK based web developer whose
- What a child theme is and why it should be used name is synonymous with Divi. An early adopter of ‘Divi
in your web development process as a framework’, his easy to follow tutorials and Divi
- A thorough guide to working with Divi child extensions have saved thousands of designers from
themes hours of pain.
- Various ways that you can add custom CSS to
your Divi website Lisa-Robyn Keown is a copywriter and brand strategist
- CSS selectors and how to target elements from Cape Town, South Africa. She specializes in writing
- Divi-specific CSS selectors Divi, WordPress and web design related content.
- How to test and troubleshoot CSS changes
- CSS resources for further learning  Special thanks to our guest contributors Randy A Brown
and John Anderson

ABOUT DIVI SPACE

With years of WordPress design and development expertise, Divi

Space helps Divi website creators achieve their online branding and
communication goals. Boasting a growing portfolio of premium
products, Divi Space offers expertly written plugins for Divi,
WordPress and WooCommerce, child themes for both the Divi and
Extra themes, and online courses created to help Divi users advance
both their development skills and business acumen.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 6
 PART ONE

INTR ODUCTIO N
TO CSS

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 7
 What is CSS
PA RT ON E

CSS stands for Cascading Style Sheets, with CSS styling can enhance various web elements
emphasis on the word cascading. CSS is a such as color, style, font size, margins, padding and
development syntax that, when written and applied much more.
to an HTML element, will give the element a new
look and feel. CSS is written or compiled in an Integrated
Development Environment (IDE), such as Sublime
If you think of HTML as the content and general or Brackets. CSS can also be written using a text
structure of the website, then think of CSS as the editor.
design style that influences various aspects of
these elements.

AN OVERVIEW OF BASIC CSS TERMINOLOGY

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 (i.e.
would you like 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. the color property
becomes green or blue, the font-size property becomes 12px or 20px etc.)

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 (stylesheet) can be overridden by another command issued further down, either
in the same stylesheet or in another linked CSS file.

It is important to give consideration to the order of things when writing CSS. Without
diverting too much, as we’ll cover this later, it’s worth noting that another level of prioritization
can be added to an element using 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.

We’ll return to these and other CSS terms and concepts later in The Divi CSS and Child
Theme Guide.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 8
 Why You Should Learn CSS
PA RT ON E

Even though Divi requires no knowledge of code, While this may suffice for small tweaks, if you’re
designers will find their websites a step above the looking to create a particular look and feel for your
rest by gaining an understanding of CSS. website, or wish to add more personalization, you’ll
need to become familiar with CSS.
Divi’s out-of-the-box aesthetic is generally
appealing, although some users may want to create While there are hundreds of articles written about
a more unique look and feel for their website. The CSS in the general sense, there aren’t all that many
modules of the Divi Builder can be styled and that have been adapted specifically for use with the
customized using in the various settings in the Divi framework or Divi plugin.
Design tab. Beyond this, the Custom CSS tabs offer
the ability to add CSS styling to each module.

CSS for Divi

Our goal with The Divi CSS and Child Theme Guide is to make sure that Divi users understand the basic
underlying principles of CSS. If you are a Divi user, 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.

WHAT WE WILL LEARN

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

• Divi child themes and using stylesheets

• Adding custom CSS to your Divi website
• CSS selectors and Divi-specific CSS
• Troubleshooting CSS  
• CSS resources


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. You'll be able to accept more challenging web builds and charge more for your
services.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 9
 Lea rn CSS with Divi Space

PAT I E N C E , P E R S I S T E N C E A N D S U C C E S S

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!

BUILD POWERFUL WEBSITES

Created to help Divi users excel in their craft, the Divi Space online course, Transforming Divi with CSS & jQuery,
will give learners deep insight into the fundamentals of CSS and jQuery to be able to begin building visually
striking and functionally powerful Divi websites.

As well as learning core CSS and jQuery principles, specifically for use with the Divi theme, the Transforming
Divi with CSS and jQuery online course will also take learners through the step-by-step process of building a
website from start to finish. Here, learners will see these two powerful code bases, CSS and jQuery, in action.

Upon completion of the course, students will become a Certified Divi Frontend Developer, equipped with the
skills to build exceptionally powerful and unique Divi websites. With the accreditation, learners will receive both
a digital certificate as well as a badge that can be displayed on their website.

Learn more about our Transforming Divi with CSS & jQuery online course and kickstart your web design career!

D I V I S PAC E | T H E U LT I M A T E C S S F O R D I V I G U I D E 10
 PART TWO

CH ILD THEMES

D I V I S PAC E | T H E U LT I M A T E C S S F O R D I V I G U I D E
 An Introduction to Child Themes
PA RT T WO

Before diving into CSS, it’s important to mention that it is deemed as best practice to use a child theme when
building a Divi website. The details and functionings of child themes will be described in detail later in this
guide, for now, simply note that the use of child themes in development is considered best practice.

Child themes are comprised of a series of files. CSS edits are stored in a stylesheet. 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. This concept is explained in detail further in this guide.

WHEN YOU DON’T NEED A CHILD THEME

If you know for certain that you won’t be making any customizations to your Divi website, then you don’t need to
worry about using a child theme.

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:
• CSS 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)
• Each page, project or post can be individually styled using the Divi Builder Settings console

Note: These three areas for adding CSS will only suffice for small CSS tweaks and code enhancements that you
can keep track of easily. If you are looking to make in-depth changes to your website, a child theme is essential.

For further reading, visit the WordPress Codex and read through the literature on Child Themes.

Buil d a Di vi Child
Them e for Free!
If you’re ready to create a blank child theme for your Divi
website, check out the Divi Space Child Theme Builder. Free
to use, the Divi Space Child Theme Builder makes creating a
blank Divi child theme quick and easy. To create a child
theme, all you need to do is enter information relating to your
Divi site, download the child theme and install it. To build a
Divi child theme, use the Divi Space Child Theme Builder
now!

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 12
 What is a Chi ld Theme?
PA RT T WO

“A child theme is a theme that inherits the functionality and styling of another theme, called the parent
theme.” – WordPress Codex

Before unpacking what a child theme is, it’s important to understand what a parent theme is and also the
relationship between the two entities.

• PARENT THEME
Intricately developed by either an agency, company or individual, a parent theme comes fully
packaged with all of the relevant code files and WordPress-ready functionality required for
building a website. Any theme that you purchase via a theme marketplace, or from a vendor such
as Elegant Themes, would be deemed as a parent theme. If you’re a Divi user, then Divi itself will
be the parent theme.

• CHILD THEME
A child theme is a separate entity to the parent theme that can be created or purchased via third-
party developers.

HOW A CHILD THEME WORKS

A child theme uses a series of various .php functions and WordPress optimized commands and hooks to
call on the full functionality of the parent theme. This process is called enqueueing the parent theme. This
basically means that the child inherits its functionality from the parent theme, and essentially
“piggybacks” off of it.

When WordPress runs, it first looks to the files present in the child theme and executes the code it finds. If
the files are not present in the child theme, it executes the commands found in the parent theme.

If you’ve created a header.php or footer.php file within a child theme, WordPress would execute the code
found in the child theme. The only file that WordPress doesn’t prioritize child over parent for, is the
functions.php file. In this regard, WordPress executes the code found in both files.

Although the child theme is given the space to take on a life of its own, it still only exists because of the
parent theme, and only works if the relationship is set up correctly. This is why enqueueing the relevant
functions must be done so with care.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 13
 Why Do I Need to Use a C hi ld
Theme?
PA RT T WO

Using a child theme gives you the space to make powerful aesthetic or functional changes to your Divi
website. Technically, these changes can be made to the core files of the parent theme, but this is
extremely risky as:

• You might break something in the code, and

• Theme updates will wipe out all of your edits.

Making use of a child theme ensures that you can make site updates in a 100% fool-proof and safe
manner, and too, enjoy some time-saving conveniences for your later web builds by copying code
between stylesheets.

CODE BREAKS
If you’ve ever looked at Divi’s core theme files, you’re bound to notice the millions of lines of code. For
really advanced WordPress users, editing this code might be relatively easy, but for the general populace
who aren’t 100% code savvy, who WordPress and Divi were made for, these lines and lines of code can be
overwhelming.

Code is written in such an intricate manner that something as simple as adding a punctuation mark in the
incorrect place will completely throw the entire operation off, rendering your theme, and website, broken.

If you want to tinker around with code, be it CSS or PHP related edits, using a child theme will grant you
this space. With a child theme, you can play around to your heart’s content without creating any
vulnerabilities in the core (parent) theme’s files.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 14
 THEME UPDATES
At various stages along the way, theme development agencies or creatives will decide to update their
PA RT T WO

themes. These may be major updates such as theme version updates, or smaller ones such as bug fixes
and minor improvements.

During a theme update, the theme developers will reassess the current version of the code present in the
theme, and, if required, will make relevant changes or additions where deemed fit. As soon as the theme’s
code is updated by the theme developer and is updated by the theme user, the parent theme files are
essentially reset, and any code edits present will be overwritten.  If you have made code changes to the
parent file, you’re guaranteed to lose all changes and edits you’ve made.

Child themes solve this dilemma. If updates occur to the parent theme, your child theme will not be
affected as it runs as a separate entity. As your child theme would have enqueued the parent theme, the
relevant updated code will still reflect in the parent theme, but will not overwrite any changes set within
the files of your child theme.

CONVENIENCE
With Divi’s versatile and robust nature, making aesthetic enhancements to a website is easy. Various
modules can be assembled, each with a collection of different settings to style their appearance and
function.  

While styling each individual module is a good method for some, particularly users who require an easy-
insert-and-edit option, others may find this process tedious as keeping track of the small nuances set
within each individual model can be a pain. Small CSS tweaks can easily be added to the Divi Theme
Options console, but using a child theme and the respective files make this process much easier.

IN SUMMARY
Using a child theme will not only save time in design and development, but you’ll also be able to save and
reuse the files for later web development projects.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 15
 How to Create a Child Theme
PA RT T WO

Setting up a child theme for a Divi website is simple. You could either use our child theme builder,
purchase our Aspen Roots child theme, use a premium child theme, or, create your own. Each of these
methods will suffice for building websites with Divi.

1. USE A CHILD THEME

BUILDER

The Divi Space Child Theme Builder is a free,

nifty tool that is incredibly easy to use. To create
a child theme, all you have to do is enter your
details in the text area boxes provided and all of
the relevant files will be generated for you.
Once complete, your child theme will be sent to
you via mail. After you’ve downloaded the child
theme, simply upload the .zip file to your theme
console on the WordPress dashboard, following
the installation and activation of the parent (Divi)
theme.

2. USE A PLUGIN

To make the process even easier, you could create a child theme by using a plugin. We recommend using the
One-Click Child Theme plugin. After download and install, One-Click Child Theme will appear as another menu
item within the Appearance tab on your WordPress Dashboard. Once here, simply give your child theme a new
name and description and click “Create Child”. Once complete, you’ll have a blank child theme running on your Divi
website.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 16
 3. USE THE ASPEN ROOTS CHILD THEME
PA RT T WO

Another extremely easy way to create a child theme is to use our Aspen Roots child theme. The Aspen
Roots child theme ships with all of the already scripted files, including style.css, functions.php, footer.php,
which will, after activation, automatically install to your WordPress website. The Aspen Roots child theme
can be purchased from our store here.

4. USE A PREMIUM DIVI CHILD THEME

If you’re looking to speed up your Divi web development process, a premium child theme may be the
perfect solution for you. As well as the main child theme files, functions.php and style.css, premium child
themes come complete with all of the bells and whistles already complete.



With premium child themes, both the web design and development is already complete. From layout
design to element styling, font and color selection, and in most cases, animations too, practically every
detail of the web design and development process is taken care of, all the user has to do is enter their
original content.



Divi Space offers a collection of premium child themes for Divi. Spanning all categories, including
entertainment, e-commerce, various forms of business and more, our child themes ship with a plethora of
highly advanced features including online stores, forums, events calendars and much more.


To speed up your web development process, look no further than our high-quality, top-rated premium
Divi child themes.

As well as premium child themes, we offer a free Divi child theme called Divi All Purpose. Divi All Purpose
has been designed to help brands and businesses create a single display or brochure website with very
little effort. Versatile and designed to cater to a span of industries, business types, brand identities and
objectives, Divi All Purpose can be downloaded for free here.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 17
 5. CREATE YOUR OWN CHILD THEME

It’s easy to create a child theme for Divi. All you’ll need is the correct tools and a bit of patience. If you’re
PA RT T WO

interested in exploring and understanding what goes into a child theme, i.e. which file serves which
purpose and so on, it might be a good idea to try out the process and gain even more knowledge for your
web development practices.

In order for your new child theme to be uploaded via the WordPress theme installer, you’ll need to zip up
your child theme’s files, including the folder. Most operating systems will allow you to do this by right
clicking on your desktop and choosing to create a new ‘zipped’ or ‘compressed’ folder. You can the drag
your entire child theme folder into the new zipped folder. If you can’t do this natively, you can use a
program like 7zip.

We’ve broken down the process of building a child theme into a step-by-step guide in the following
section.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 18
 How to Create a Divi Child Them e
From S cratch
PA RT T WO

Building a child theme from scratch is a simple process. All a child theme is, is a series of files, typically, a:

• functions.php file,
• style.css file, also called a stylesheet, houses all of the website’s aesthetic enhancements
• any other particular files you’d like to include unique code in, that’ll override the code in the main parent
theme files.

To create the files required for the child theme, you’ll need either an IDE (integrated development
environment) or a text/source code editor.

The source code editor, TextEdit (Mac) or TextEditor (PC), will come already installed on your computer,
while the IDE’s will need to be downloaded from the internet and installed on your computer. Two of the
most popular, standard editors are Brackets and Sublime. Both are free to download, easy to use and
include color cues to make code easy to script up and identify.

Before diving in and creating each file, you’ll need to allocate a theme directory for the child theme within
the WordPress installation.

CREATE A CHILD THEME DIRECTORY

The child theme directory will be the folder that’ll house all of the files of your child theme.

To begin, create a new folder on your computer and name it something related to your project. The child
theme directory should be named something easily identifiable, something that can easily relate to your
client. When naming the child theme directory folder, do not include spaces between the words, instead,
use hyphens or remove spacing altogether, ie. Divi-Child-Theme or DiviChildTheme.

As you create the individual files, add them to the child theme directory. Once all of the files have been
added, you can then add the child theme to your website, described in detail in the How to Install a Divi
Child Theme? section.

STYLE.CSS

To create the stylesheet for your child theme, create a new file in your IDE or Text Editor and save the file
as ‘style.css’. Then, copy the code below, paste it into the file and rename the theme name and author
information based on your needs. Be sure to change the various details and replace with your own.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 19
 In the stylesheet description, the most important things to note are the “Theme Name” and “Template”
sections:
PA RT T WO

• The Theme Name (the actual name of your child theme) becomes the display name within the
Appearance > Themes of the WordPress theme selector
• The Template (which must always be labeled here as ‘Divi’) tells WordPress which theme it should use
as the parent.


Note: An older method of enqueuing the parent theme used the command ‘@import’. It is suggested by
the WordPress Codex that the @import method is no longer deemed as best practice due to page load
time. Instead, users are advised to create and make use of a functions.php file.

FUNCTIONS.PHP

The most important file in the child theme is the functions.php file as it will enqueue the parent theme
(Divi). To begin, open the IDE or text editor. Copy the code below and paste it into the functions.php file.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Make sure to relabel the correct paths to both the parent and child theme folders. Once you have
amended all of the above details to fit your deliverables, save the file as functions.php within the child
theme folder.

SCREENSHOT.JPG

It’s recommended to add an image of your or your client’s logo or a similar graphic into the child theme
folder. Create an image with the dimensions 880x660 px and save it as screenshot.jpg.

Include this image in the child theme folder along with the functions.php and style.css files. When your
child theme is installed and activated, this image will display as the graphic in the Appearance > Themes
section of the theme selector.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 20
 How to ins tal l Divi Child Them e?
PA RT T WO

Once you have created a child theme, either via the Divi Space online builder, plugin or have constructed
one ground up using one of the editors, you’ll need to install it. Make sure that the Divi theme is already
installed and activated.

There are a number of ways in which you can add the child theme to your Divi website.

LOCAL SITE / DEVELOPMENT ENVIRONMENT

If you’re working on a localhost server, navigate to the relevant folder in your directory, i.e. wp-content >
themes. Here, you’ll see a folder containing all of the Divi files (installed as the parent). Simply drag and
drop the child theme folder here, in the Themes folder, at the same level as the Divi theme file.

Now, log into the WordPress website and navigate to Appearance > Themes. Here, you’ll see the child
theme package already installed. Click Activate and the child theme will begin working.

LIVE WEBSITE
If you’re working on a live website, you’ll need to access the theme files via the server. You can either do
this using FTP, by manually working through the server or by creating a zip file of the theme package.

• If you’re using an FTP client (such as FileZilla or CyberDuck), create a new connection between the
website’s server and your computer. Find the root folder of the website in the server connection panel
and navigate until you find the WordPress > Themes folder. Add the child theme folder here.

• If you’re manually navigating through the server, log into the server via the hosting company’s portal
and search for a section named File Manager or something similar. Again, search through the files in the
root folder until you find the WordPress > Themes folder and add the child theme folder here.

• A final method is to add the child theme from the WordPress website itself. To do so, zip the child
theme folder and upload it via the Appearance > Themes > Add New section within the WordPress
website. 


Once the child theme has been installed, it’ll need to be activated. To do so, navigate to the Appearance >
Themes section of the WordPress website and click Activate.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 21
 PREMIUM DIVI CHILD THEMES

Thanks to the nature of the Divi community, there are a number of incredible designers and
developers that are creating ready-made child themes for Divi. If you’re looking to bypass the
entire design process of a web build then purchasing a ready-made child theme would be
perfect for you.

Not only do the premium Divi child themes help you save plenty of time, but all of the
legwork is already done for you. From UX planning to aesthetic design, font selection and
more, all of the bells and whistles are already crafted. All that’s required is for you to add your
relevant text and image content.

We have a number of beautifully designed, highly functional Divi child themes on available
through our store. If you’re looking to create an attractive website in a short space of time,
browse our collection of Divi child themes.

D I V I S PAC E | T H E U LT I M A T E C S S F O R D I V I G U I D E
 PART THREE

6 WAYS TO ADD
CSS TO DI VI

D I V I S PAC E | T H E U LT I M A T E C S S F O R D I V I G U I D E
 6 Ways to Add CSS to Divi
PA RT T HR EE

Divi users can choose between five different methods to add custom CSS to their websites. These methods
include:

1. Inline CSS added to the content section of a module

2. Custom CSS Box in the Divi Theme Options dashboard
3. Advanced options tab of the sections, rows and individual modules
4. Divi Builder Page Settings of an individual page
5. Divi child theme style.css file
6. With a Custom CSS and JavaScript plugin


DEMO SETUP

To illustrate the different ways of adding CSS to Divi, we’ve set up the following demo. Here, a single row
with four columns holds a single text module. Each text module is filled with a paragraph of Lorem Ipsum.

The front end displays as such:

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 24
 Add CS S to Divi Using Inline CSS
PA RT T HR EE

Any module within the Divi theme that has a content area (i.e. a place where custom text can be entered
such as the text module, blurb module etc.) will allow for inline styling.

To add inline styles to a section of an element, you’ll need to target the element itself and add the <style>
attribute, thereafter you can add any number of styling properties that relate to the specific element you’re
trying to target and style.

To add inline CSS to a module in the Divi Builder (provided it has a content area), open the WYSIWYG Text
editor, not the WYSIWYG Visual editor.

Next, assign a tag to the element. In this case, we’ll assign a <p> tag to make it paragraph text, and apply the
<style> attribute. Once the style tag has been added, you can add various properties and values.

In this example, we’ll take the first text the first text module and style the text to have a heavier font weight
and a different color (blue).

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 25
PA RT T HR EE

PROS AND CONS OF USING INLINE STYLES:

Pros:
• Adding inline styles is a quick workaround for a simple change to a single element

Cons:
• Using this method means that you’ll need to style each individual module element in the same
fashion, which is incredibly time wasting, especially if there are many of the same styling changes
and you’re working on a large website
• In the same regard, it’s really easy to forget about inline styles especially in a large web build with
many pages
• As the inline styles are so deeply baked into the modules themselves, they cannot be targeted and
edited using media queries, which could pose a problem later down the line

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 26
 Add CS S to Divi Using the Divi
Theme Opti ons Custom CSS
PA RT T HR EE

A popular way to add CSS to Divi is by using the Custom CSS box in the Divi Theme Options dashboard. To
locate the Custom CSS box navigate to Divi > Theme Options and scroll all the way down the page until you
see the Custom CSS box.

If you have a small handful of styling edits, the Divi Theme Options Custom CSS box is a great place to add
CSS for your website. If you have many edits, it is better to use a stylesheet.

For the next example, we’ll take the second text module in our four column layout and style it by increasing
the font and changing the color. If you know exactly which element you are targeting, you can enter the CSS
directly into the text area. To find the exact property that you need to target, you can open the specific Divi
module, navigate to the Advanced tab and click in the Main Element area. The name of the property will
automatically pop up just above the text area.

Simply copy that selector, head over to the Divi Theme Options Custom CSS box, paste in the selector’s
name and add the desired styling. Click Save Changes.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 27
PA RT T HR EE

In the event that your Divi module has more than one element, for example, the Blurb module includes an
image, a heading and paragraph text as the content, you’ll need to be a bit more specific as to which
element you’re targeting in the module. In such cases, to explicitly target the paragraph text, you’ll need to
add the ‘p’ selector.

.et_pb_text_1 p {
font-size: 16px;
color: red;
}

PROS AND CONS OF USING THE DIVI THEME

OPTIONS CUSTOM CSS:

Pros:
• Using the Divi Theme Options Custom CSS box is a great method if you have a few CSS edits you’d
like to add to a website
• Far more easy to manage that inline CSS or individual module CSS (more on that next), all of your CSS
will all be in one place and not scattered across a million modules
• CSS styling added to the Divi Theme Options Custom CSS box will not be overridden by theme
updates

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 28
 Ad d C S S to I n d i v i d u a l D i v i Mo d ules
using t he Adva n ce d Ta b CS S
PA RT T HR EE

The next place that you can add CSS is in the Advanced Tab section of the individual module, row or
section.

First, let’s cover the individual module's Advanced options. Within the module’s Advanced tab, you’ll find:

• CSS ID and Classes: Here you can enter unique class or ID names that can be used to add even more
layers of unique styling


• Custom CSS: Composed of the before, main element and after boxes. The before and after areas are for
pseudo-elements, to add additional elements either before or after the content.

• Visibility: Here you can decide whether the module should be hidden or shown on various devices 


• Transitions: This lets you assign additional transition effects to animations, as set in the Design tab

Note, each module in the Divi builder is composed of different elements, and so will present a different set
of options in the Advanced tab.

To add CSS to the individual module, open up the module itself by clicking on the hamburger menu,
navigate to the Advanced tab and scroll down until you see the Main Element box. Here, add the various
CSS styling, but note, you only have to enter the property and the value – you do not need to specify the
selector.


D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 29
PA RT T HR EE

Going a step further, you can also add CSS styling to the various rows and sections. While the sections don’t
have too many styling options, the rows do.

To view the various styling options, click on the row’s hamburger menu, navigate to the Advanced tab and
start scrolling to see all of the entry options.

Similar to the individual module’s Advanced tab, you’re able to add custom IDs and classes as well as CSS
to the element itself (before, main and after), except that now, these are all offered based on how many
columns are present in the Section.

To add CSS styling to a specific column, navigate to the Advanced tab and search for the Main Element box
of the column itself, then enter the relevant CSS.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 30
PA RT T HR EE

Adding CSS into the modules and rows can be useful for quick, simple edits, but beyond small changes that
are going to stay the same forever, adding CSS this way isn’t really recommended.

If you're going to be working on a website regularly, changing up the aesthetic or adding new content, using
the module or row CSS may present a few problems down the line as trying to keep track of hundreds of
lines of CSS entered into various modules scattered across a website can be confusing.

PROS AND CONS OF USING THE ADVANCED TAB CSS:

Pros:
• Using the individual sections, rows and module’s Advanced tabs to enter CSS is useful for single,
simple edits on pages that won’t really be looked at in the future
• These CSS edits will not get overwritten by theme updates

Cons:
• Having small amounts of CSS hidden in the Advanced settings between various modules scattered
across a website can become complicated as you could easily lose track of where CSS code is
placed. CSS code will become difficult to keep track of, especially if the website will need to be
revisited in terms of design or development
• The same sort of edits can be achieved relatively easily using an alternate method, such as the Divi
Theme Options Custom CSS box or a stylesheet where all of the styling is kept in one place

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 31
 Add CS S to Divi Using the
Divi B uilder Page Settings
PA RT T HR EE

Another way for Divi users to add CSS to their website is to use the Divi Builder Page Settings.

Great for quick changes that only apply to a single page or a small handful of pages, the Divi Builder Page
Settings console lets users adjust variables on specific pages, post or project layouts, without having to
adjust individual modules.

Any CSS code added to the Divi Builder Page Settings will only apply to the single page, post or project
itself. An incredibly useful tool, the Divi Builder Page Settings replaces the need to write out very
complicated, highly targeted CSS.

Within the Divi Builder Page Settings, there is a Custom CSS box. To access this Custom CSS box, click on
the hamburger menu at the top of the Divi Builder and the Custom CSS box will pop up.

As well as the Custom CSS box, additional per-page customization options within the Divi Builder Page
Settings include:

• Enabling split testing

• Adding a custom color picker palette per page
• Setting the pages’ gutter width, default light and dark text colors, and section and content background
colors

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 32
 To demonstrate the Divi Builder Page Settings, a second text module is added and assigned the H1 tag.
PA RT T HR EE

At this point, open up the Divi Page Settings console, scroll to the Custom CSS box and enter the relevant
CSS styling. Note, here it is important to specify the selector that you’d like to target.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 33
 The Page Settings box is great for making simple changes to a single page, post or project layout, for
example making headings on certain pages stand out, setting styling for images etc..
PA RT T HR EE

When it comes to making landing pages, maintenance mode pages or coming soon pages, the Divi Page
Settings console is helpful as you can easily hide the page header, footer and bottom bar with minimal
effort.

PROS AND CONS OF USING THE DIVI BUILDER PAGE

SETTINGS:

Pros:
• The Divi Builder Page Settings is great for adding CSS styling that is only meant to reflect on one
single page, not site-wide
• It is easy to style a few page elements rather than writing complicated CSS with heavy levels of
targeting

Cons:
• If you have a website with many pages, each with individual Custom CSS entered into the Divi Builder
Page Settings, you may lose track of all of the styling enhancements, in which case using a stylesheet
would be a better idea

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 34
 Add CS S to Divi Using a
St yle s heet
PA RT T HR EE

In our opinion, the best way to add CSS to the Divi theme is by using a child theme and a unique stylesheet.

The concept of a child theme and using in conjunction with your Divi website was covered in Part Two of
this guide, but as a quick recap:

• A child theme is a series of files that, when added together, form a ‘secondary theme’ to a parent theme


• Using a child theme in development is repeatedly recommended as best practice as it’ll safeguard your
web design efforts


• A child theme can be made in various ways, such as using a plugin, the Divi Space Child Theme Builder or
building one from scratch, as outlined in Part Two of this guide.


In our opinion, going this route – of creating a child theme and adding CSS styling to a stylesheet – is the
best method for web development as it is extremely convenient having all code styling in one easy to
locate place, and not spread across various spaces throughout the website’s pages and modules.

Another benefit of using a child theme and a stylesheet for CSS is that you have the ability to enqueue
multiple stylesheets. This is particularly useful for large websites that have deep levels of customization in
place.

PROS AND CONS OF USING A DIVI CHILD THEME AND

EDITING THE STYLE.CSS FILE

Pros:
• Using a Divi child theme will safeguard your website from parent theme updates
• All of your website’s styling will be stored in one place that is easy to access and edit
• Great for large websites, using a child theme will allow you to use and enqueue multiple stylesheets
for better organization of code
Cons:
• Setting up a child theme can take a bit of time

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 35
 If you’d like to build a child theme for your Divi website in just a few seconds, we recommend using our Divi
Space Child Theme Builder.
PA RT T HR EE

All you have to do is enter your details and the details relating to the website you’re building and your child
theme will be mailed to you.

Read our step by step guide to creating a child theme with the Divi child theme builder.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 36
 Add Cu stom C SS and
JavaScript wit h a Plugin
PA RT T HR EE

Another useful way of adding CSS is by using a plugin such as the Custom CSS and JavaScript Developer
Edition. Going a step further, the plugin allows you to add CSS as well as JavaScript code to your website.

The Custom CSS and JavaScript Developer Edition plugin has a number of incredible features, including:

• Automatic text formatting and syntax highlighting. This is particularly useful for users that are new to CSS
and who may make a mistake from time to time
• An easy to use code editor that includes automatic text formatting and syntax highlighting

The ability to minify CSS and JavaScript files for the removal of unnecessary characters in code files in
order to increase website performance
• Preview and publish states to help the web design process
• A handy revision history feature to save progress at set periods
• The ability to use multiple files for large web builds
• SCSS compatibility for advanced developers already making use of SASS CSS
• The ability to import and export files between web builds to save time and speed up development

After the plugin has been installed and activated, the plugin adds two new editor consoles, Custom CSS
and Custom JavaScript, to the WordPress website.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 37
 For a thorough breakdown of Custom CSS and Custom JavaScript, read the article How to Add Custom CSS
and JavaScript to your Divi Website with a Plugin.
PA RT T HR EE

Compatible with all WordPress themes, buy the Custom CSS and JavaScript Developer Edition plugin today.

PROS AND CONS OF USING THE CUSTOM CSS AND

CUSTOM JAVASCRIPT PLUGIN:

Pro:
• Great for experienced web developers who are searching for a powerful CSS and Javascript solution
for their development processes

Cons:
• Paid solution while other options listed above are free

IN SUMMARY

There are many ways to add custom CSS to the Divi theme, the trick is to find the method that feels the
most comfortable and suits your Divi design habits the best.

As mentioned above, we recommend going the child theme add stylesheet route, even if it is a bit more
tricky to manage in the beginning. If you decide to add CSS to the modules, pages or content areas as inline
CSS, we recommend possibly keeping a note of this so that if and when you return to a website, you don’t
spend hours trying to figure out where certain CSS is being served from.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 38
 PART FOUR

DI VI SE LECTOR S

D I V I S PAC E | T H E U LT I M A T E C S S F O R D I V I G U I D E
 CSS Se lectors
PA RT FOU R

The following CSS selectors have been identified for use exclusively for the Divi Theme and Page Builder.

CSS is made up of three main parts. If you inspect element on any web page you’ll see these straight away:

THE SELECTOR

The selector is the exact series of classes, pseudo-classes, ID’s and elements used to target any on-
screen element.
The selector can target a myriad things at once, as in the example above where all ‘img’ elements (image)
are being targeted. At the same time, the selector, can be very specific and target an individual element
or a small selection of elements.

THE PROPERTY

The property is the ‘what’ you’d like to change with CSS. It could be a single  aspect of an element, such as
the color, or it could be collection of aspects such as height, color, border-radius, scale, angle and more.

THE VALUE

The value is the ‘change how?’ of the CSS. You can change the size of an element with pixels, percentages
or viewport measurements, or the color of an element by setting various hex codes. These two examples
are the tip of the iceberg in terms of what can be changed and how it'll display. A quick Google search for
‘CSS properties’ will show you a number of sites where you can find the properties and values used in CSS,
however, the selectors used in any theme or plugin are partly created by the developers. As a result, the
process of writing CSS for a particular theme or plugin should be very specific. This guide is a catalog of
selectors for the Divi Theme and Page Builder.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 40
 Sections, Rows & Columns
PA RT FOU R

1. SECTIONS

Sections are the largest part of the page builder. Rows and modules go inside them.
.et_pb_section { }

2. ROWS

Rows make up the content inside a section, top to bottom.

.et_pb_row { }

3. COLUMNS

Columns make up rows, from left to right. Within the page builder, you’re given the choice of 1, 2, 3, 4, 5 or 6
columns in any row.

To target all of the columns at once you can use:

.et_pb_column { }

Or you could target columns only IF there are three of them, like this:
.et_pb_column.et_pb_column_1_3 { }

Or only IF there are two of them like:

.et_pb_column.et_pb_column_1_2 { }

The last number in the class changes to the number of columns there are.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 41
 WHAT IF YOU DON’T WANT YOUR CHANGES TO BE SO
BROAD?
PA RT FOU R

If you'd like your changes to affect only certain modules within a row, this is how you can make your CSS
more specific.

To limit the changes you’re making to a single section, set a new section class in the module settings.

Then you can replace the ‘section selector’ with the class you have created, and your CSS changes
will only affect that section.  

You can place a custom section or row class in front of all of the CSS selectors in this book (with the
exception of the header and footer selectors) to make the changes more specific.

For example, .et_pb_blurb could be changed to .front-page-blurbs.et_pb_blurb and that would

mean only sections where ‘front-page-blurbs’ was added to the custom class options, would be
affected. Keep this in mind when using any of the selectors listed in this book.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 42
 Head er and Footer
PA RT FOU R

1. MAIN HEADER BEFORE SCROLL

#main-header { }

2. MAIN HEADER AFTER SCROLL

#main-header.et-fixed-header { }

3. LOGO

#Logo { }

4. TOP NAVIGATION

#et-top-navigation { }

5. MAIN MENU LIST ITEM

#top-menu li a { }

6. MAIN MENU DROP DOWN ARROW

#top-menu .menu-item-has-children > a:first-child:after { }

7. SEARCH ICON

#et_search_icon:before { }

8. TOP HEADER

#top-header

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 43
 Top Header - Se condary Menu
PA RT FOU R

1. PHONE ICON

#et-info-phone:before { }

2. PHONE NUMBER

#et-info-phone { }

3. EMAIL ICON

#et-info-email:before { }

4. EMAIL ADDRESS

#et-info-email { }

5. FACEBOOK ICON

.et-social-facebook a.icon:before { }

6. TWITTER ICON

.et-social-twitter a.icon:before { }

7. GOOGLE + ICON

.et-social-google-plus a.icon:before { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 44
 Top Header - Se condary Menu
PA RT FOU R

8. RSS ICON

.et-social-rss a.icon:before { }

9. TOP HEADER MENU ITEM

#et-secondary-menu > ul > li a { }

10. TOP HEADER DROP DOWN ARROW

#et-secondary-nav .menu-item-has-children > a:first-child:after { }

11. CART

.et-cart-info span:before { }

12. NUMBER OF ITEMS

.et-cart-info span { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 45
 Top Header - Navi g at i on
PA RT FOU R

1. TOP NAVIGATION SUB MENU

#et-secondary-nav .sub-menu { }

2. TOP NAVIGATION DROP DOWN LINK

#et-secondary-nav li li a { }

3. TOP NAVIGATION LINK WITH DROP DOWN

#et-secondary-nav .menu-item-has-children > a:first-child { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 46
 Top Header - Sub Me nu
PA RT FOU R

1. MAIN MENU DROP DOWN LINK

#top-menu .menu-item-has-children > a:first-child { }

2. MAIN HEADER SUB MENU LINK

#top-menu li li a { }

3. MAIN HEADER SUB MENU

#top-menu .sub-menu { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 47
 Footer
PA RT FOU R

1. FOOTER INFO TEXT

#footer-info p { }

2. FOOTER LINKS

#footer-info a { }

3. FACEBOOK ICON FOOTER

#footer-bottom .et-social-facebook a.icon:before { }

4. TWITTER ICON FOOTER

#footer-bottom .et-social-twitter a.icon:before { }

5. GOOGLE + ICON FOOTER

#footer-bottom .et-social-google-plus a.icon:before { }

6. RSS ICON FOOTER

#footer-bottom .et-social-rss a.icon:before { }

7. ICON CONTAINER FOOTER

.et-social-icons { }

8. BOTTOM LINKS CONTAINER

#footer-bottom .container { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 48
 Mo bile Menu
PA RT FOU R

9. MOBILE MENU ICON ( HAMBURGER )

.mobile_menu_bar:before { }

10. MOBILE MENU MAIN LINK

.et_mobile_menu .menu-item-has-children > a { }

11. MOBILE MENU NORMAL LINK

.et_mobile_menu li a { }

12. MOBILE MENU

.et_mobile_menu { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 49
 Accord ion
PA RT FOU R

1. OPEN ACCORDION

.et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target all accordions)

2. CLOSED ACCORDION

.et_pb_accordion .et_pb_toggle_close { }

3. ACCORDION CLOSED TITLE

.et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { }

4. ACCORDION OPEN TITLE

a.et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { } #footer-bottom .et-social-rss a.icon:before { }

5. ACCORDION CONTENT

.et_pb_accordion .et_pb_toggle_content { }

6. ACCORDION PLUS ICON

.et_pb_accordion .et_pb_toggle_title:before { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 50
 Audi o
PA RT FOU R

1. COVER ART

.et_pb_audio_cover_art { }

2. AUDIO MODULE

.et_pb_audio_module { }

3. AUDIO TITLE

.et_pb_audio_module_content h2 { }

4. CONTROLS CONTAINER

.et_pb_audio_module .mejs-container .mejs-controls { }

5. PLAY BUTTON

.et_pb_audio_module .mejs-controls .mejs-play button { }

6. TIMER CONTROL

.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-handle { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 51
 Audi o
PA RT FOU R

7. TIME SLIDER

.et_pb_audio_module .et_audio_container span.mejs-time-total.mejs-time-slider { }

8. TIME DISPLAY

.et_pb_audio_module .et_audio_container .mejs-container .mejs-controls .mejs-time span { }

9. MUTE BUTTON

.et_pb_audio_module .mejs-controls .mejs-mute button { }

10. CURRENT VOLUME BAR

.et_pb_audio_module .mejs-horizontal-volume-current { }

11. VOLUME BAR BACKGROUND

.et_pb_audio_module .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-

volume-total { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 52
 Bar Counters
PA RT FOU R

1. FULL BAR

.et_pb_counters .et_pb_counter_container { }

2. AMOUNT

.et_pb_counters .et_pb_counter_amount { }

3. TITLE

.et_pb_counters .et_pb_counter_title { }

4. COUNTER AMOUNT

.et_pb_counters span.et_pb_counter_amount_number { }

5. ENTIRE MODULE

.et_pb_counters { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 53
 Blog
PA RT FOU R

1. POST

.et_pb_blog_grid .et_pb_post { }

2. POST IMAGE

.et_pb_blog_grid .et_pb_image_container img { }

3. POST TITLE

.et_pb_blog_grid .et_pb_post h2 a { }

4. POST META

.et_pb_blog_grid .et_pb_post .post-meta { }

5. POST META LINKS

.et_pb_blog_grid .et_pb_post .post-meta a { }

6. POST PREVIEW TEXT

.et_pb_blog_grid .et_pb_post p:not(.post-meta) { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 54
 Blog
PA RT FOU R

1. FULL WIDTH BLOG 4. POST META

.et_pb_post { } .et_pb_post .post-meta { }

2. FULL WIDTH BLOG IMAGE 5. POST META LINKS

.et_pb_post a img { } .et_pb_post .post-meta a { }

6. FULL WIDTH POST

3. POST TITLE
PREVIEW
.et_pb_post h2 a { } .a.et_pb_post p:not(.post-meta) { } h2 a { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 55
 Blurbs
PA RT FOU R

1. ENTIRE BLURB

.et_pb_blurb { }

2. BLURB ICON

.et_pb_blurb .et-pb-icon { }

3. BLURB TEXT

.et_pb_blurb .et_pb_blurb_container { }

4. BLURB TITLE

.et_pb_blurb h4 { }

5. BLURB ICON BORDER

.et_pb_blurb .et-pb-icon-circle-border { }

6. BLURB ICON CIRCLE

.et_pb_blurb .et-pb-icon-circle { }

7. BLURB IMAGE

.et_pb_main_blurb_image { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 56
 Ca ll to Acti ons
PA RT FOU R

1. ENTIRE CTA MODULE

.et_pb_promo { }

2. CTA TITLE

.et_pb_promo_description h2 { }

3. DESCRIPTION

.et_pb_promo_description p { }

4. CTA BUTTON

.et_pb_promo_button { }

5. CTA BUTTON ON HOVER

.et_pb_promo_button:hover { }

6. CTA ARROW ON HOVER

.et_pb_promo .et_pb_button:after { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 57
 Co ntact Fo rm
PA RT FOU R

1. CONTACT FORM TITLE

.et_pb_contact_main_title { }

2. NAME

.et_pb_contact_name { }

3. EMAIL ADDRESS

.et_pb_contact_email { }

4. MESSAGE

.et_pb_contact_message { }

5. CAPTCHA SUM

span.et_pb_contact_captcha_question { }

6. ANSWER

.et_pb_contact_captcha { }

7. SUBMIT BUTTON

.et_pb_contact_submit.et_pb_button { }

8. CONTAINER

.et_pb_contact_form_container { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 58
 Co untdown Ti mer
PA RT FOU R

1. TITLE 7. HOURS LEFT

.et_pb_countdown_timer .title { } .et_pb_countdown_timer .hours p.value { }

2. DAYS LEFT 8. MINUTES LEFT

.et_pb_countdown_timer .days p.value { } .et_pb_countdown_timer .minutes p.value { }

3. DAY(S) LABEL 9. SECONDS LEFT

.et_pb_countdown_timer .days p.label { } .et_pb_countdown_timer .seconds p.value { }

4. HOUR(S) LABEL 10. SEPARATORS

.et_pb_countdown_timer .hours p.label { } .et_pb_countdown_timer .sep { }

5. MINUTE(S) LABEL 11. ENTIRE MODULE

.et_pb_countdown_timer .minutes p.label { } . et_pb_countdown_timer { }

6. SECOND(S) LABEL

.et_pb_countdown_timer .seconds p.label { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 59
 Ci rcle Counter
PA RT FOU R

1. CIRCLE COUNTER

.et_pb_circle_counter { }

2. CIRCLE COUNTER VALUE

.et_pb_circle_counter .percent p { }

3. CIRCLE COUNTER TITLE

.et_pb_circle_counter h3 { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 60
 Ema il opt-I n
PA RT FOU R

1. MODULE

.et_pb_newsletter.et_pb_subscribe { }

2. TITLE

.et_pb_newsletter_description h2 { }

3. DESCRIPTION

.et_pb_newsletter_description:not(h2) { }

4. NAME

.et_pb_newsletter.et_pb_subscribe #et_pb_signup_firstname { }

5. EMAIL ADDRESS

.et_pb_newsletter.et_pb_subscribe #et_pb_signup_email { }

6. BUTTON

.et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 61
 Portfolio
PA RT FOU R

1. OVERLAY

.et_pb_portfolio_image .et_overlay { }

2. IMAGE

.et_pb_portfolio_image img { }

3. PORTFOLIO ICON
.et_pb_portfolio_image .et_overlay:before { }

To override the current logo you need to find a new one and place it between speech marks using the
content property like this:

.et_pb_portfolio_image .et_overlay:before { content: “code here” }

To use different icons, read this post that explains the Elegant Themes icon font and how it can be adapted
to suit a designs.

4. TITLE

.et_pb_portfolio_image h3 { }

5. PORTFOLIO META

.et_pb_portfolio_image p.post-meta { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 62
 Portfolio
PA RT FOU R

6. MODULE

.et_pb_fullwidth_portfolio { } /** For full-width portfolio **/

.et_pb_portfolio_grid { } /** For grid portfolio **/

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 63
 Gal lery
PA RT FOU R

1. OVERLAY ICON

.et_pb_gallery_image .et_overlay:before { }

2. GALLERY GRID TITLE

.et_pb_gallery_grid .et_pb_gallery_title { }

3. OVERLAY

.et_pb_gallery_image .et_overlay { }

4. IMAGE

.et_pb_gallery_image { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 64
 Image
PA RT FOU R

1. IMAGE BACKGROUND IN LIGHTBOX

.mfp-bg { }

2. IMAGE IN LIGHTBOX

img.mfp-img { }

3. CLOSE X

.mfp-image-holder .mfp-close { }

4. IMAGE

.et_pb_image { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 65
 Login
PA RT FOU R

1. LOGIN MODULE 5. PASSWORD

.et_pb_login { } .et_pb_login #user_pass { }

6. FORGOT PASSWORD TEXT

2. TITLE

.et_pb_login h2 { } .et_pb_login .et_pb_forgot_password { }

3. DESCRIPTION 7. SUBMIT BUTTON

.et_pb_login .et_pb_newsletter_description:not(h2) { } .et_pb_login .et_pb_newsletter_button { }

4. USERNAME

.et_pb_login #user_login { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 66
 Map
PA RT FOU R

1. MAP MODULE

.et_pb_map_container { }

2. MAP PIN

The pin styling is not set with CSS. Learn how to change the map pin icon by following this
tutorial.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 67
 Number Counter
PA RT FOU R

1. NUMBER COUNTER

.et_pb_number_counter { }

2. NUMBER

.et_pb_number_counter span.percent-value { }

3. NUMBER COUNTER TEXT

.et_pb_number_counter h3 { }

4. WITH PERCENTAGE

.et_pb_number_counter .percent { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 68
 Pers on
PA RT FOU R

1. PERSON MODULE

.et_pb_team_member { }

2. IMAGE

.et_pb_team_member_image img { }

3. NAME

.et_pb_team_member_description h4 { }

4. POSITION

.et_pb_member_position { }

5. DESCRIPTION

.et_pb_team_member_description { }

6. FACEBOOK

.et_pb_team_member .et_pb_facebook_icon { }

7. TWITTER

.et_pb_team_member .et_pb_twitter_icon { }

8. GOOGLE +

.et_pb_team_member .et_pb_google_icon { }

9. LINKEDIN

.et_pb_team_member .et_pb_linkedin_icon { }

All social media icons can be targeted at once with: .et_pb_team_member .et_pb_font_icon { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 69
 Pricing Table
PA RT FOU R

1. HEADER SECTION

.et_pb_pricing_heading { }

2. FEATURED TABLE

.et_pb_pricing_table.et_pb_featured_table { }

3. PRICING SECTION

.et_pb_pricing_content_top { }

4. PRICE

.et_pb_pricing_table .et_pb_sum { }

5. PER YEAR

.et_pb_pricing_table .et_pb_frequency { }

6. DOLLAR SIGN

.et_pb_pricing_table .et_pb_dollar_sign { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 70
 Pricing Table
PA RT FOU R

7. LIST ITEM

.et_pb_pricing_table ul.et_pb_pricing li { }

Or when not available

.et_pb_pricing_table li.et_pb_not_available { }

8. BUTTON

.et_pb_pricing_table_button { }

9. PRICING TITLE

.et_pb_pricing_heading h2 { }

10. BEST VALUE

.et_pb_pricing_table .et_pb_best_value { }

11. PRICING TOP

.et_pb_pricing_content_top { }

12. STANDARD PRICING TABLE

.et_pb_pricing_table { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 71
 Shop
PA RT FOU R

1. PRODUCT

.et_pb_shop .product { }

2. OVERLAY

.et_pb_shop .product .et_overlay { }

And Image
.et_pb_shop .product img { }

3. SALE

.et_pb_shop .woocommerce span.onsale { }

4. PRICE

.et_pb_shop span.amount { }

5. TITLE

.et_pb_shop .woocommerce ul.products li.product h3 { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 72
 Shop
PA RT FOU R

6. STAR RATING

.et_pb_shop .woocommerce ul.products li.product .star-rating { }

7. DELETED PRICE

.et_pb_shop .woocommerce ul.products li.product .price del { }

8. NEW PRICE

.et_pb_shop .woocommerce ul.products li.product .price ins { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 73
 Shop
PA RT FOU R

1. PRODUCT IMAGE

img.attachment-shop_single { }

2. PRODUCT TITLE

.product_title { }

3. SHOP PRICE

.entry-summary p.price span { }

4. DESCRIPTION

.entry-summary p:not(.price) { }

5. PRODUCT META

.product_meta { }

6. QUANTITY

.woocommerce div.product form.cart div.quantity { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 74
 Shop
PA RT FOU R

7. BUTTON

.woocommerce .product .cart .button { }

8. TABS

.woocommerce .product .woocommerce-tabs .tabs li { }

9. TAB TITLES

.wc-tab h2 { }

10. TAB DESCRIPTION

.wc-tab p { }

11. TABS ALL

.wc-tabs-wrapper { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 75
 Slider
PA RT FOU R

1. PREVIOUS SLIDE

.et_pb_slider .et-pb-arrow-prev { }

2. NEXT SLIDE

.et_pb_slider .et-pb-arrow-next { }

3. ACTIVE SLIDE

.et_pb_slide.et-pb-active-slide { }

4. SLIDE IMAGE

.et_pb_slider .et_pb_slide_image img { }

5. SLIDE DESCRIPTION (THIS U S U A L LY

CONTROLS THE HEIGHT OF THE SLIDER)
.et_pb_slider .et_pb_slide_description { }

6. SLIDE TITLE

.et_pb_slide_title a { }

7. SLIDE TEXT

.et_pb_slide_content { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 76
 Slider
PA RT FOU R

8. SLIDE BUTTON

.et_pb_slider .et_pb_button { }

9. ACTIVE SLIDE DOT

.et-pb-active-control { }

10. ALL DOTS

.et-pb-controllers a { }

It is possible to target the dot navigation individually like so…

.et-pb-controllers a:nth-child(1) { }
.et-pb-controllers a:nth-child(2) { }
.et-pb-controllers a:nth-child(3) { }

It is also possible to target the slides individually like so…

.et_pb_slide.et_pb_slide_1 { }
.et_pb_slide.et_pb_slide_2 { }
.et_pb_slide.et_pb_slide_3 { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 77
 Tabs
PA RT FOU R

1. TABS MODULE

.et_pb_tabs { }

2. ALL TABS (INSIDE)

.et_pb_tabs .et_pb_all_tabs { }

3. TAB CONTROLS

.et_pb_tabs .et_pb_tabs_controls { }

4. TABS CONTENT

.et_pb_all_tabs .et_pb_active_content { }

5. ACTIVE TAB

.et_pb_tabs li.et_pb_tab_active { }

6. TABS LIST

.et_pb_tabs li.et_pb_tab_0 { }
.et_pb_tabs li.et_pb_tab_1 { }
.et_pb_tabs li.et_pb_tab_2 { }
Tabs are ordered from the 0 to the last, even if you have two or three on one page. So if you had two tab
modules on a page and the first one had three tabs then the first tab of the second one would be ‘tab_3’.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 78
 Testimonials
PA RT FOU R

1. TESTIMONIAL MODULE

.et_pb_testimonial { }

2. TESTIMONIAL PORTRAIT

.et_pb_testimonial_portrait { }

3. DESCRIPTION

.et_pb_testimonial_description_inner { }

4. AUTHOR

.et_pb_testimonial_author { }

5. META

.et_pb_testimonial_meta { }

6. META LINKS

.et_pb_testimonial_meta a { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 79
 Toggle
PA RT FOU R

1. TOGGLE OPEN

.et_pb_toggle.et_pb_toggle_open { }

2. TOGGLE CLOSED

.et_pb_toggle.et_pb_toggle_close { }

3. TOGGLE OPEN TITLE

.et_pb_toggle.et_pb_toggle_open h5.et_pb_toggle_title { }

4. TOGGLE TEXT

.et_pb_toggle_content p:last-of-type { }

5. TOGGLE TO CLOSE

.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before { }

6. TOGGLE CLOSE TITLE

.et_pb_toggle_close h5.et_pb_toggle_title { }

7. TOGGLE CLOSED TITLE

.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 80
 Video S lider
PA RT FOU R

1. VIDEO

.et_pb_video_slider .et_pb_video_wrap { }

2. VIDEO OVERLAY

.et_pb_video_slider .et_pb_video_overlay_hover { }

3. CAROUSEL ITEM

.et_pb_video_slider .et_pb_carousel_item { }

4. CAROUSEL

.et_pb_video_slider .et-carousel-group { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 81
 PART FI VE

BROWS ER
DEVELOPER
TOOLS

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 82
 How to u se your browser’s
deve loper tools
ON
PA RT FI VEE

In this part, we’ll be showing you how simple CSS changes can be tested and reviewed using
the extremely handy developer tools built into all modern-day web browsers.

TESTING SIMPLE CSS UPDATES WITH DEVELOPER

TOOLS

Now, we’ll take a behind-the-scenes look at the Divi theme to see how CSS can be used to
change the look of certain elements.

For this demonstration, we've created a standard section comprised of two rows: a single column
with a text module followed by three columns of blurbs and buttons.

After adding a number of headings, some dummy text and a few images, the front-end of the
section looks like this:

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 83
 ON
PA RT FI VEE

Now, we’re going to assess these front-end elements a bit deeper to figure out the HTML make
up.

For this, we’ll be using the web browser’s built-in developer tool. With most modern browsers,
you should be able to right-click on a certain web element and select “Inspect” or “Inspect
Element” or similar.

• If you are using Google Chrome, navigate to File > View> Developer > Developer Tools.


• If you are using Safari you will need to activate the Develop Menu by selecting the checkbox
in Safari’s Advanced preferences, then navigate to Develop > Show Web Inspector.


• If you are using Mozilla Firefox navigate to Tools > Web Developer and select Inspector from
the list.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 84
 By default, this should appear at the bottom of the page and look something like this.
ON
PA RT FI VEE

While inspecting the web page or a certain element therein, the website/host compiles all of the
information together and presents the page as HTML. The main window displays all of the HTML,
while the right-hand side window shows the CSS applied to the specific element currently
selected.

This entire Section created with the Divi Builder in the back end...

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 85
 … is represented in a single highlighted section as:
ON
PA RT FI VEE

Arrows are used to show and hide groups of elements. Clicking on the arrow on the left-hand side will
expand to show two green rows. You can see them clearly labeled with CSS Class names.

i.e <div class=“ et_pb_row “et_pb_row_0 ”>

This means that the HTML element, a div, has been assigned the classes of “et_pb_row” and
“et_pb_row_0”. Following this element, a second element has been assigned the classes of
“et_pb_row” and “et_pb_row_1”.

Now, we can use CSS either to target both rows using the class name of “et_pb_row” or we can target
either one of the elements by using the second class name of either “et_pb_row_0” or “et_pb_row_1”.

TARGETING ELEMENTS WITH CSS

If you only want your changes to apply to the rows on this page and not the rows on the rest of your
site you will need to be more specific. One way to do this would be to assign your own CSS class
name to the row that you want to target with CSS.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 86
 To do so, return to the back end of the page, select the Row in question and click on the
hamburger menu on the top left-hand side of the green row.
ON
PA RT FI VEE

Once selected, click the Advanced tab and enter a unique CSS Class name.

Save the changes to the module and page, click Preview and assess the front end. Nothing should
change in the page itself. Instead, return to the Inspect Element console and view the same element
as before.

Now you will see an additional Class name  divispace_example_row has been added to the first row.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 87
PA RT FI V E

Navigate to the right-hand side Inspect Element window and you’ll be able to see the new CSS
Class name (highlighted here in yellow).

Before going straight to the stylesheet, you can test your CSS changes right in the Inspect Element
console to see what effect it will have on your page. Now, let’s change the background color to
yellow.

To do so, use the CSS section of the Inspect Element tool on the right-hand side, click between the
open and close curly brackets “{ }” in the CSS section, type the following code and then hit enter.

background-color:yellow;

Instantly you’ll see your original web page transform from this:

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 88
 …to this.
PA RT FI V E

If you are happy with the change you’ve made to the element, you can copy the entire section of
syntax:

divispace_example_row { background-color: yellow; }

And paste it into either the style.css file of your Divi website’s child theme or into the Custom CSS box
in the Divi Theme Options console. Read Part Three of this guide for a refresher on the various ways
you can Add CSS to Divi.

If you wanted to add the same style change to another row or module element in your website, you
would need to add the same unique class name to the next element.

Using the browser’s developer tools to inspect the HTML elements is a great way to test different CSS
properties and play around with different styling until you create an effect that suits your style.

These changes are temporary, and as soon as the page is refreshed, the changes will disappear.
Nevertheless, becoming familiar with the browser’s Developer Tools is a great way to explore how a
website is constructed and how it can be enhanced aesthetically.

As well as experimenting with the CSS on a page of your website by adding, removing or changing a
setting, you can also use this handy tool to inspect other website’s elements. Rest assured no one
else in the world will see it.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 89
 Brea king Down CSS Comman ds
PA RT ON E

In the example above, we changed an element’s background color. The CSS is broken down into
two parts: the property, in this case “background-color” and the value, “yellow”.

This is but one of the myriad of CSS commands available to web designers to use. For an
extensive list of the properties, visit W3 Schools.

CSS is constantly under development, seeing new additions being made all the time. If you’re
starting out with CSS, we recommend playing around by testing the effect of various properties
and values applied to the Divi Builder modules, and using your browser’s developer tools to
assess changes.

We highly recommend playing around on a development or testing site. To set up a development

site to play around in, we recommend setting up a local, offline site using Desktop Server.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 90
 PART SIX

TRO UBL ESHO OTIN G

C SS

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 91
 How to Troub leshoot CSS
PA RT S I X

If you’re adding CSS to your child theme’s stylesheet but the changes you're employing aren't
reflecting, there are a number of things you can to do troubleshoot your work.

Step One: Check that the stylesheet has been added correctly. If none of the CSS is loading it could be
that the entire stylesheet has been added incorrectly. Follow the steps outlined in Part Two to enqueue
the stylesheet from your functions.php file.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Step Two: Check that the template is being called correctly in the stylesheet header. Be sure to
write ‘Divi’ with a capital D exactly as it is on the parent theme folder.

/*
Theme Name: Example Header
Theme URI: https://divi.space/
Description: A Child Theme built for Divi
Author: SJ
Author URI: https://divi.space
Template: Divi
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Step Three: If you suspect that the CSS itself is broken, try adding something simple obvious and
unmissable to the style sheet such as:

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 92
 * { background: red ; }
PA RT S I X

If your website looks something like this:

... then you can safely say that the stylesheet is enqueued properly and that the CSS code itself is
intact.

If you added the { background: red ;} change to the stylesheet and you did not see a change there
are a few things you can do.

First, try moving this code to the top of the stylesheet and previewing the changes. If the CSS you’ve
applied works at the top of the style sheet but not at the bottom, then there is a syntax error
somewhere in your code.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 93
 The first ‘C’ in CSS stands for ‘cascading’ which means that if there is an error in it, only the code above the
error will work, which is why * { background: red ; } did nothing at the bottom of the style sheet.
PA RT S I X

Formatting is imperative when writing CSS, and in this case, it could be that you’ve missed a closing bracket
at the end of a style, a colon is missing after a property, or it could be a wrongly structured media query.

If most of your CSS works then it’s likely the issue is at the bottom of the stylesheet, but if almost none of it
works then the issues is probably at the top somewhere.

If you have a really large stylesheet you could try and place lines of CSS throughout to help you identify
where the error is. Try adding these lines of code at different intervals.

* { background: red ; }

* { background: yellow ; }
* { background: green ; }
* { background: blue ; }

If your site turns yellow, then you know that your error is somewhere between where you added the yellow
line and where you added the green line.

Step Four: Check that Divi’s stylesheet isn’t overriding your own CSS stylesheet. If all of your other CSS is
working, your CSS edits could be being overridden by Divi’s own styles.

Some CSS, such as that added by the customizer options is placed ‘in-line’ or with !important tags appended
to it. Try adding !important tags to your own CSS or making it more specific by utilising the ID’s and classes
from the page structure.

For example, instead of using:

h1 { font-size: 1.8em; }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 94
 Try:
PA RT S I X

#et-main-area #main-content h1 { font-size: 1.8em; }

As a last resort, you could try adding the CSS to the Divi Theme Options CSS panel instead.

Step Five: Check that there isn’t a caching plugin overriding your stylesheet. If you have a caching plugin or
system in use, your browser could be serving up a cached version of your page which is why you aren’t
seeing your changes. Luckily, there’s a quick way to test this.

Use your browser dev tools to open the sources and view your style sheet.

If you can see your CSS saved

in the back end of your site but
not when viewing the style
sheet in your browser then it’s
most likely a caching issue, not
a CSS issue.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 95
 PART SEVEN

RESOURCES

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 96
 The Be st Resources for
Lea rning CSS
PA RT S EV EN

CSS is one of the core elements of a website. This makes learning CSS one of the most important
things you can do as a web designer. This is even true if you use Divi to build your websites. Even
though Divi can be styled with its built-in adjustments, having a strong grasp of CSS lets you style
your sections, rows, and modules even further, as well as styling elements that you normally wouldn’t
have access to.

Fortunately, there are a lot of tutorials and courses available on the web all geared to help you learn
CSS. In this section, we’ll look at the best CSS resources for Divi and see some of the best resources
for learning CSS in general..

If you’d like to improve your web development skills and learn CSS from the best in the business, read
more about our popular online course Transforming Divi with CSS and jQuery.

WHY YOU SHOULD LEARN CSS

CSS tells the website what styles to use - including fonts, colors, effects, and animations. CSS is a skill
that’s in demand and that demand isn’t going away. CSS is an essential part of web design, so it’s an
essential skill to have.

You can make these adjustments easily in Divi, but learning CSS gives you even more control. Divi
doesn’t require CSS knowledge to build intricate and elegant websites, but it does have features to
take advantage of CSS knowledge and that knowledge can take your Divi websites even further.
You’ll have more control over the site.

Learning CSS makes you more valuable to your clients. You’ll be able to produce higher quality
websites with features that set your designs apart from the rest. Increasing your skill-set helps give
you a competitive advantage over your competition. Your designs will look more professional and
you’ll be able to increase your rates because you can bring more to the project. You’ll be able to
create websites that are more unique.

You’ll be able to use the CSS that you find on many of the websites that focus on Divi. Learning to use
CSS means that you’ll be able to customize the CSS for your specific needs rather than just copy and
paste, which can give results that you might not need or want.
You’ll be able to offer new services, go after more work, go after larger projects, which helps build
your web design business.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 97
 Best Online C ourses for
Lea rning CSS with Divi
PA RT S EV EN

Here’s a list of courses that focus on using CSS with Divi. Courses give a structure to the learning
experience and ensure that you learn everything you need to learn - removing the guesswork from
hunting through tutorials. They teach how to write clean code, cover the best tools and how to use
them, includes downloads and resources, and provide feedback and support. Many include student
interaction, providing an environment to help each other.

TRANSFORMING DIVI WITH CSS AND JQUERY

Transforming Divi with CSS and jQuery is our

online course that covers Divi, CSS, and jQuery
from beginner to advanced level. It teaches
how to write clean code and includes real-
world examples, a one hour call per week
during the course, guided learning, an
extended jQuery cheat-sheet, access to
recorded sessions, a Facebook group, and
lifetime access to the course. It’s the only Divi
CSS course that also teaches jQuery. It also teaches building a website with Divi from start to finish. You
get a certification as a Divi frontend developer which includes a digital certificate and badge for your
website.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 98
 Best Online C ourses for
Lea rning CSS with Divi
PA RT S EV EN

JOSH’S DIVI/CSS COURSE

Josh’s Divi CSS Course from Josh Hall teaches the basics of CSS and how to customize Divi with plugins
like Gravity Forms and Woo Commerce, troubleshooting and solving styling problems, and helps you to be
comfortable using CSS. It’s designed for both beginners and advanced Divi web designers and works with
any WordPress theme. It includes lots of resources, lifetime access, a Facebook group, and is designed
more as a training guide than an academic course.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 99
 Best Online C ourses for
Lea rning CSS with Divi
PA RT S EV EN

THE CSS & DIVI BEGINNER COURSE

The CSS & Divi Beginner Course from Michelle Nunan teaches the basics of CSS and how to use it with
Divi. It’s for beginners and advanced users. It’s taught in bite-sized lessons and includes homework with
quizzes, tools and resources, etc. It includes bonus material, access to a Facebook group, webinars,
lifetime access, etc.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 100
 Divi Comm unit y Blogs
PA RT S EV EN

Here are a few blogs with CSS tutorials from the Divi community. There are lots of Divi blogs out there that
include a tutorial or two, but these blogs include more than a few that focus on CSS. Some provide
downloads that you can use in your projects

DIVI SOUP

Michelle Nunan’s Divi Soup includes several step-by-step tutorials with downloads.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 101
 Divi Comm unit y Blogs
PA RT S EV EN

QUIROZ

Geno’s blog includes lots of CSS snippets for Divi modules. It also includes lots of articles with tips and
tutorials to do specific things with CSS for your Divi website.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 102
 Divi Comm unit y Blogs
PA RT S EV EN

DIVI SPACE

SJ James has compiled a nice list of CSS resources to help you learn more about Divi and CSS. Feel free
to add your own list of resources in the comments.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 103
 Best Websi tes and Learning
Portals to Learn CSS
PA RT S EV EN

These websites offer courses and tutorials about CSS in general. None focus specifically on Divi, but they
do cover from the basics to advanced level of using CSS in general, which can be applied to Divi.

W3SCHOOLS CSS TUTORIALS

W3schools is an excellent place to learn and practice just about any programming or markup language for
the web. Of course, this includes CSS. It’s not specific to any theme, but the basics are there and it includes
lots of examples and places where you can experiment and see the results as you go. The tutorials are
free. They even have a CSS developer certification for a fee.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 104
 Best Websi tes and Learning
Portals to Learn CSS
PA RT S EV EN

LY N D A

Lynda, from LinkedIn, has over 1800 tutorials for CSS and covers every level from beginner to advanced.
Many are broader or similar topics that include CSS. They cover a large range of subjects. 70 are labeled
as courses. Many cover the same or similar material by different authors. Sort by types, skill level, duration,
subjects, companies, and authors.
More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 105
 Best Websi tes and Learning
Portals to Learn CSS
PA RT S EV EN

UDEMY

Udemy currently has 316 courses that are about or include CSS. Many of them include many hours of
training, have excellent ratings, and are priced well. Sort by top, new, favorites, language, topic, rating, and
duration.
More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 106
 Best Websi tes and Learning
Portals to Learn CSS
PA RT S EV EN

CODE ACADEMY

Learn CSS from Code Academy includes 6 lessons. They’re taught with different formats including
interactive, freeform projects that you can use in your portfolio, articles, and video. Each lesson includes
quizzes.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 107
 Best Websi tes and Learning
Portals to Learn CSS
PA RT S EV EN

UDACITY

Intro to HTML and CSS is a free course from Udacity that’s designed for beginners. It takes three weeks to
complete and includes CSS syntax, selectors, units, code editors, and Developer Tools.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 108
 Best Websi tes and Learning
PA RT S EV EN

Portals to Learn CSS

HTML DOG

HTML Dog has lots of free CSS tutorials for beginner, intermediate, and advanced levels. The page lists
each tutorial with links. The tutorials are simple and include code that you can copy to use.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 109
 Best Websi tes and Learning
Portals to Learn CSS
PA RT S EV EN

STACK SOCIAL

Stack Social has several courses from beginner to expert level. They also have a free course that isn’t
included in their standard list. Most include HTML training as well as CSS.

More Information

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 110
 Endi ng Thoug hts
PA RT S EV EN

That’s our list of the best CSS resources for Divi and sources where you can learn CSS in general. CSS is an
important skill that every designer and developer should learn. It will help you attract better clients, better
projects, you can charge more, and can help you build a flourishing Divi design business. Developing your
CSS skills can make your Divi designs look better than they can look by using Divi out of the box.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 111
 Lea rn CSS for Divi
PA RT S EV EN

If you want to learn the ins and outs of CSS as well as jQuery, enroll for the Divi Space online course,
Transforming Divi with CSS & jQuery.

Divi is a powerful theme and you can probably do more with it than any other builder without using code.
However, if you do use code you can get far more out of Divi. Learning CSS and jQuery on your own can
be a slow and daunting task and knowing how to use it with Divi is another story. A structured course is far
easier to follow.

Our course, Transforming Divi and CSS & jQuery provides everything you need to build amazing websites
with Divi. In the course you’ll learn the fundamentals of CSS and jQuery as applied to Divi.

COURSE OVERVIEW
The course is divided into 4 modules with 17 lessons, providing around 14 hours of training. It takes you
from a beginner level to a skilled knowledge of writing your own code in both languages. It goes from an
introduction to CSS to manipulating HTML elements with jQuery and creating custom triggers for them.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 112
 When you complete this course you’ll have a functioning knowledge of Divi, CSS, and jQuery, and be able
to create your own child themes and layouts. You’ll also know how to take code snippets from code
PA RT S EV EN

libraries and using them in your own projects.

The course will show you how to :

• Create CSS and jQuery ready child themes.

• Write the CSS and jQuery that goes into those child themes.
• Move, hide, replace, and customize objects- including objects on template pages that you don’t have
access to in the WordPress backend.
• Use the Divi Builder any way you want including in the menu, theme pages, WooCommerce, etc.
• How to make sweeping changes to Divi’s default styles using CSS within your child themes.
• How to reverse engineer the effects from one of the world’s top websites and learn how to apply those
effects to your own projects with Divi.


The course uses video, text, webinars, quizzes, has lifetime access to current and future materials, and lots
of help such as a private Facebook group, live Q&A’s, and direct support. All of the code will be available to
download both as a child theme and a plugin. It includes an exclusive cheat-sheet with 20 complete
functions that are ready to use and customize for your own projects.

Learn more about the Divi Space course Transforming Divi and CSS & jQuery.

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 113
 CSS Resources
PA RT S EV EN

To learn more about CSS, have a look at the following resources or bookmark this page.

1 30 CSS Best Practices for Beginners

2 How to Edit Source Files Directly in Chrome

3 An Introduction to CSS Transitions & Animations

4 CSS Tricks For Your Divi Theme Project And Product Thumbnails

5 On The Tenth Day Of Divi, We Explore Seven Simple CSS Tricks

6 CSS @keyframes Rule

7 Sizing with CSS3's vw and vh units

8 Specificity Calculator

9 Specifics on CSS Specificity

10 Using media queries

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 114
 CSS Resources
PA RT S EV EN

11 CSS Layout - The position Property

12 Child Themes - Codex

13 CSS Selector Reference

14 How The Custom CSS Tab and The Divi Library Can Transform Your Workflow

15 Inspiration for Text Styles & Hover Effects

16 How To Add Custom Fonts In WordPress

17 Hover.css v2

18 How to Create Diagonal Lines Between Sections in Divi

19 Transform a Divi Menu Item Into a CTA Button

20 Adding JavaScript / jQuery to the Divi Theme

21 360 Of The Best Free Icons For The Modern Web

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 115
 CSS Resources
PA RT S EV EN

22 https://caniuse.com/

23 Meet the Pseudo Class Selectors

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 116
 TABLES
Divi Se le c tor s
B a sic pro per ty reference
C SS Se le ctor s
C SS  Uni ts
C ol or val ue s

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 117
 Divi S electors
Selector Description

Header and Footer

1. Main header before scroll #main-header { }
2. Main header after scroll #main-header.et-fixed-header { }
3. Logo #Logo { }
4. Top Navigation #et-top-navigation { }
5. Main Menu List Item #top-menu li a { }
6. Main Menu Drop Down Arrow #top-menu .menu-item-has-children > a:first-child:after { }
7. Search icon #et_search_icon:before { }
8. Top Header #top-header
1. Phone Icon #et-info-phone:before { }
2. Phone number #et-info-phone { }
3. Email Icon #et-info-email:before { }
4. Email Address #et-info-email { }
5. Facebook icon .et-social-facebook a.icon:before { }
6. Twitter Icon .et-social-twitter a.icon:before { }
7. Google + Icon .et-social-google-plus a.icon:before { }
8. RSS Icon .et-social-rss a.icon:before { }
9. Top Header Menu Item #et-secondary-menu > ul > li a { }
10. Top Header Drop Down Arrow #et-secondary-nav .menu-item-has-children > a:first-child:after { }
11. Cart .et-cart-info span:before { }
12. Number of Items .et-cart-info span { }
1. Top Navigation Sub Menu #et-secondary-nav .sub-menu { }
2. Top Navigation Drop Down Link #et-secondary-nav li li a { }
3. Top Navigation link with Drop Down #et-secondary-nav .menu-item-has-children > a:first-child { }
1. Main Menu Drop Down Link #top-menu .menu-item-has-children > a:first-child { }
2. Main Header Sub Menu Link #top-menu li li a { }
3. Main Header Sub Menu #top-menu .sub-menu { }
1. Footer Info Text #footer-info p { }
2. Footer Links #footer-info a { }
3. Facebook Icon Footer #footer-bottom .et-social-facebook a.icon:before { }
4. Twitter Icon Footer #footer-bottom .et-social-twitter a.icon:before { }
5. Google + Icon Footer #footer-bottom .et-social-google-plus a.icon:before { }
6. RSS Icon Footer #footer-bottom .et-social-rss a.icon:before { }
7. Icon Container Footer .et-social-icons { }
8. Bottom Links Container #footer-bottom .container { }
9. Mobile Menu Icon ( Hamburger ) .mobile_menu_bar:before { }
10. Mobile Menu Main Link .et_mobile_menu .menu-item-has-children > a { }
11. Mobile menu Normal Link .et_mobile_menu li a { }
12. Mobile Menu .et_mobile_menu { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 118
 Divi S electors
Selector Description

Accordion
.et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target
1. Open Accordion
all accordions)
2. Closed Accordion .et_pb_accordion .et_pb_toggle_close { }
3. Accordion Closed Title .et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { }
4. Accordion Open Title .et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { }
5. Accordion Content .et_pb_accordion .et_pb_toggle_content { }
6. Accordion Plus Icon .et_pb_accordion .et_pb_toggle_title:before { }

Audio
1. Cover Art .et_pb_audio_cover_art { }
2. Audio Module .et_pb_audio_module { }
3. Audio Title .et_pb_audio_module_content h2 { }
4. Controls Container .et_pb_audio_module .mejs-container .mejs-controls { }
5. Play Button .et_pb_audio_module .mejs-controls .mejs-play button { }
.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-
6. Timer Control
rail .mejs-time- handle { }
.et_pb_audio_module .et_audio_container span.mejs-time-total.mejs-
7. Time Slider
time-slider { }
.et_pb_audio_module .et_audio_container .mejs-container .mejs-
8. Time Display
controls .mejs-time span { }
9. Mute Button .et_pb_audio_module .mejs-controls .mejs-mute button { }
10. Current Volume Bar .et_pb_audio_module .mejs-horizontal-volume-current { }
.et_pb_audio_module .et_audio_container .mejs-controls .mejs-horizontal-
11. Volume Bar Background { }
volume- slider .mejs-horizontal-volume-total { }

Bar Counters
1. Full bar .et_pb_counters .et_pb_counter_container { }
2. Amount .et_pb_counters .et_pb_counter_amount { }
3. Title .et_pb_counters .et_pb_counter_title { }
4. Counter Amount .et_pb_counters span.et_pb_counter_amount_number { }
5. Entire Module .et_pb_counters { }

Blog
1. Post .et_pb_blog_grid .et_pb_post { }
2. Post Image .et_pb_blog_grid .et_pb_image_container img { }
3. Post Title .et_pb_blog_grid .et_pb_post h2 a { }
4. Post Meta .et_pb_blog_grid .et_pb_post .post-meta { }
5. Post Meta Links .et_pb_blog_grid .et_pb_post .post-meta a { }
6. Post Preview Text .et_pb_blog_grid .et_pb_post p:not(.post-meta) { }
1. Full Width Blog .et_pb_post { }
2. Full Width Blog Image .et_pb_post a img { }
3. Post Title .et_pb_post h2 a { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 119
 Divi S electors
Selector Description

4. Post Meta .et_pb_post .post-meta { }

5. Post Meta Links .et_pb_post .post-meta a { }
6. Full Width Post Preview .et_pb_post p:not(.post-meta) { }

Blurbs
1. Entire Blurb .et_pb_blurb { }
2. Blurb Icon .et_pb_blurb .et-pb-icon { }
3. Blurb Text .et_pb_blurb .et_pb_blurb_container { }
4. Blurb Title .et_pb_blurb h4 { }
5. Blurb Icon Border .et_pb_blurb .et-pb-icon-circle-border { }
6. Blurb Icon Circle .et_pb_blurb .et-pb-icon-circle { }
7. Blurb Image .et_pb_main_blurb_image { }

Call to Actions
1. Entire CTA Module .et_pb_promo { }
2. CTA Title .et_pb_promo_description h2 { }
3. Description .et_pb_promo_description p { }
4. CTA Button .et_pb_promo_button { }
5. CTA Button on Hover .et_pb_promo_button:hover { }
6. CTA Arrow on Hover .et_pb_promo .et_pb_button:after { }

Circle Counter
1. Circle Counter .et_pb_circle_counter { }
2. Circle Counter Value .et_pb_circle_counter .percent p { }
3. Circle Counter Title .et_pb_circle_counter h3 { }

Contact Form
1. Contact Form Title .et_pb_contact_main_title { }
2. Name .et_pb_contact_name { }
3. Email Address .et_pb_contact_email { }
4. Message .et_pb_contact_message { }
5. Captcha sum span .et_pb_contact_captcha_question { }
6. Answer .et_pb_contact_captcha { }
7. Submit Button .et_pb_contact_submit.et_pb_button { }
8. Container .et_pb_contact_form_container { }

Countdown Timer
1. Title .et_pb_countdown_timer .title { }
2. Days Left .et_pb_countdown_timer .days p.value { }
3. Day(s) label .et_pb_countdown_timer .days p.label { }
4. Hour(s) label .et_pb_countdown_timer .hours p.label { }
5. Minute(s) label .et_pb_countdown_timer .minutes p.label { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 120
 Divi S electors
Selector Description

6. Second(s) label .et_pb_countdown_timer .seconds p.label { }

7. Hours Left .et_pb_countdown_timer .hours p.value { }
8. Minutes Left .et_pb_countdown_timer .minutes p.value { }
9. Seconds Left .et_pb_countdown_timer .seconds p.value { }
10. Separators .et_pb_countdown_timer .sep { }
11. Entire Module . et_pb_countdown_timer { }

Email opt-In
1. Module .et_pb_newsletter.et_pb_subscribe { }
2. Title .et_pb_newsletter_description h2 { }
3. Description .et_pb_newsletter_description:not(h2) { }
4. Name .et_pb_newsletter.et_pb_subscribe #et_pb_signup_firstname { }
5. Email Address .et_pb_newsletter.et_pb_subscribe #et_pb_signup_email { }
6. Button .et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { }

Portfolio
1. Overlay .et_pb_portfolio_image .et_overlay { }
2. Image .et_pb_portfolio_image img { }
3. Portfolio Icon .et_pb_portfolio_image .et_overlay:before { }
4. Title .et_pb_portfolio_image h3 { }
5. Portfolio Meta .et_pb_portfolio_image p.post-meta { }
6. Module .et_pb_fullwidth_portfolio { } /** For full-width portfolio **/

Gallery
1. Overlay icon .et_pb_gallery_image .et_overlay:before { }
2. Gallery Grid Title .et_pb_gallery_grid .et_pb_gallery_title { }
3. Overlay .et_pb_gallery_image .et_overlay { }
4. Image .et_pb_gallery_image { }

Image
1. Image background in lightbox .mfp-bg { }
2. Image in lightbox img.mfp-img { }
3. Close X .mfp-image-holder .mfp-close { }
4. Image .et_pb_image { }

Login
1. Login Module .et_pb_login { }
2. Title .et_pb_login h2 { }
3. Description .et_pb_login .et_pb_newsletter_description:not(h2) { }
4. Username .et_pb_login #user_login { }
5. Password .et_pb_login #user_pass { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 121
 Divi S electors
Selector Description

6. Forgot Password Text .et_pb_login .et_pb_forgot_password { }

7. Submit Button .et_pb_login .et_pb_newsletter_button { }

Map
1. Map Module .et_pb_map_container { }
The pin styling is not set with CSS. You can learn how to change it 

2. Map Pin
using this pretty cool article by Dan Mossop.

Number Counter
1. Number Counter .et_pb_number_counter { }
2. Number .et_pb_number_counter span.percent-value { }
3. Number Counter Text .et_pb_number_counter h3 { }
4. With Percentage .et_pb_number_counter .percent { }

Person
1. Person Module .et_pb_team_member { }
2. Image .et_pb_team_member_image img { }
3. Name .et_pb_team_member_description h4 { }
4. Position .et_pb_member_position { }
5. Description .et_pb_team_member_description { }
6. Facebook .et_pb_team_member .et_pb_facebook_icon { }
7. Twitter .et_pb_team_member .et_pb_twitter_icon { }
8. Google + .et_pb_team_member .et_pb_google_icon { }
9. LinkedIn .et_pb_team_member .et_pb_linkedin_icon { }

All social media icons .et_pb_team_member .et_pb_font_icon { }

Pricing Table
1. Header Section .et_pb_pricing_heading { }
2. Featured Table .et_pb_pricing_table.et_pb_featured_table { }
3. Pricing Section .et_pb_pricing_content_top { }
4. Price .et_pb_pricing_table .et_pb_sum { }
5. Per Year .et_pb_pricing_table .et_pb_frequency { }
6. Dollar Sign .et_pb_pricing_table .et_pb_dollar_sign { }
7. List Item .et_pb_pricing_table ul.et_pb_pricing li { }
Or when not available .et_pb_pricing_table li.et_pb_not_available { }
8. Button .et_pb_pricing_table_button { }
9. Pricing Title .et_pb_pricing_heading h2 { }
10. Best Value .et_pb_pricing_table .et_pb_best_value { }
11. Pricing Top .et_pb_pricing_content_top { }
12. Standard pricing Table .et_pb_pricing_table { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 122
 Divi S electors
Selector Description

Shop
1. Product .et_pb_shop .product { }
2. Overlay .et_pb_shop .product .et_overlay { }
And Image .et_pb_shop .product img { }
3. Sale .et_pb_shop .woocommerce span.onsale { }
4. Price .et_pb_shop span.amount { }
5. Title .et_pb_shop .woocommerce ul.products li.product h3 { }
6. Star Rating .et_pb_shop .woocommerce ul.products li.product .star-rating { }
7. Deleted price .et_pb_shop .woocommerce ul.products li.product .price del { }
8. New Price .et_pb_shop .woocommerce ul.products li.product .price ins { }
1. Product Image img.attachment-shop_single { }
2. Product Title .product_title { }
3. Shop Price .entry-summary p.price span { }
4. Description .entry-summary p:not(.price) { }
5. Product Meta .product_meta { }
6. Quantity .woocommerce div.product form.cart div.quantity { }
7. Button .woocommerce .product .cart .button { }
8. Tabs .woocommerce .product .woocommerce-tabs .tabs li { }
9. Tab Titles .wc-tab h2 { }
10. Tab description .wc-tab p { }
11. Tabs ALL .wc-tabs-wrapper { }

Slider
1. Previous Slide .et_pb_slider .et-pb-arrow-prev { }
2. Next Slide .et_pb_slider .et-pb-arrow-next { }
3. Active Slide .et_pb_slide.et-pb-active-slide { }
4. Slide Image .et_pb_slider .et_pb_slide_image img { }
5. Slide Description (This usually
.et_pb_slider .et_pb_slide_description { }
controls the height of the slider)
6. Slide Title .et_pb_slide_title a { }
7. Slide Text .et_pb_slide_content { }
8. Slide Button .et_pb_slider .et_pb_button { }
9. Active Slide Dot .et-pb-active-control { }
10. All dots .et-pb-controllers a { }

.et-pb-controllers a:nth-child(1) { }
*It is possible to target the dot
.et-pb-controllers a:nth-child(2) { }
navigation individually like so…
.et-pb-controllers a:nth-child(3) { }

.et_pb_slide.et_pb_slide_1 { }
It is also possible to target the slides
.et_pb_slide.et_pb_slide_2 { }
individually like so…
.et_pb_slide.et_pb_slide_3 { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 123
 Divi S electors
Selector Description

Tabs
1. Tabs Module .et_pb_tabs { }
2. All tabs (inside) .et_pb_tabs .et_pb_all_tabs { }
3. Tab Controls .et_pb_tabs .et_pb_tabs_controls { }
4. Tabs content .et_pb_all_tabs .et_pb_active_content { }
5. Active Tab .et_pb_tabs li.et_pb_tab_active { }
.et_pb_tabs li.et_pb_tab_0 { }
6. Tabs List .et_pb_tabs li.et_pb_tab_1 { }
.et_pb_tabs li.et_pb_tab_2 { }
Tabs are ordered from the 0 to the last, even if you have two or three on
one page. So if you had two tab modules on a page and the first one had
three tabs then the first tab of the second one would be ‘tab_3’. Make
sense?

Testimonials
1. Testimonial Module .et_pb_testimonial { }
2. Testimonial Portrait .et_pb_testimonial_portrait { }
3. Description .et_pb_testimonial_description_inner { }
4. Author .et_pb_testimonial_author { }
5. Meta .et_pb_testimonial_meta { }
6. Meta Links .et_pb_testimonial_meta a { }

Toggle
1. Toggle Open .et_pb_toggle.et_pb_toggle_open { }
2. Toggle Closed .et_pb_toggle.et_pb_toggle_close { }
3. Toggle Open Title .et_pb_toggle.et_pb_toggle_open h5.et_pb_toggle_title { }
4. Toggle Text .et_pb_toggle_content p:last-of-type { }
5. Toggle to close .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before { }
6. Toggle Close Title .et_pb_toggle_close h5.et_pb_toggle_title { }
7. Toggle Closed Title .et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title { }

Video Slider
1. Video .et_pb_video_slider .et_pb_video_wrap { }
2. Video Overlay .et_pb_video_slider .et_pb_video_overlay_hover { }
3. Carousel Item .et_pb_video_slider .et_pb_carousel_item { }
4. Carousel .et_pb_video_slider .et-carousel-group { }

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 124
 Basic propert y reference
Property Description

A
Specifies the alignment between the lines inside a flexible container when the items do not use
align-content
all available space
align-items Specifies the alignment for items inside a flexible container
align-self Specifies the alignment for selected items inside a flexible container
all Resets all properties (except unicode-bidi and direction)
animation A shorthand property for all the animation-* properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long an animation should take to complete one cycle
Specifies a style for the element when the animation is not playing (before it starts, after it ends,
animation-fill-mode
or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies a name for the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation
B
backface-visibility Defines whether or not the back face of an element should be visible when facing the user
background A shorthand property for all the background-* properties
background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-clip Defines how far the background (color or image) should extend within an element
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-origin Specifies the origin position of a background image
background-position Specifies the position of a background image
background-repeat Sets if/how a background image will be repeated
background-size Specifies the size of the background images
border A shorthand property for border-width, border-style and border-color
border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the radius of the border of the bottom-left corner
border-bottom-right-
Defines the radius of the border of the bottom-right corner
radius
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-collapse Sets whether table borders should collapse into a single border or be separated
border-color Sets the color of the four borders
border-image A shorthand property for all the border-image-* properties
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 125
 Basic propert y reference
Property Description

border-image-source Specifies the path to the image to be used as a border

border-image-width Specifies the width of the border image
border-left A shorthand property for all the border-left-* properties

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for the four border-*-radius properties

border-right A shorthand property for all the border-right-* properties

border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-spacing Sets the distance between the borders of adjacent cells

border-style Sets the style of the four borders

border-top A shorthand property for border-top-width, border-top-style and border-top-color
border-top-color Sets the color of the top border
border-top-left-radius Defines the radius of the border of the top-left corner

border-top-right-radius Defines the radius of the border of the top-right corner

border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
bottom Sets the elements position, from the bottom of its parent element
Sets the behavior of the background and border of an element at page-break, or, for in-line
box-decoration-break
elements, at line-break.
box-shadow Attaches one or more shadows to an element
Defines how the width and height of an element are calculated: should they include padding
box-sizing
and borders, or not
break-after Specifies the page-, column-, or region-break behavior after the generated box

break-before Specifies the page-, column-, or region-break behavior before the generated box
break-inside Specifies the page-, column-, or region-break behavior inside the generated box
C
caption-side Specifies the placement of a table caption
caret-color Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable

@charset Specifies the character encoding used in the style sheet

clear Specifies on which sides of an element floating elements are not allowed to float
clip Clips an absolutely positioned element
color Sets the color of text

column-count Specifies the number of columns an element should be divided into

column-fill Specifies how to fill columns, balanced or not
column-rule A shorthand property for all the column-rule-* properties

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 126
 Basic propert y reference
Property Description

column-rule-color Specifies the color of the rule between columns

column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns

column-span Specifies how many columns an element should span across

column-width Specifies the column width
columns A shorthand property for column-width and column-count
content Used with the :before and :after pseudo-elements, to insert generated content

counter-increment Increases or decreases the value of one or more CSS counters

counter-reset Creates or resets one or more CSS counters
cursor Specifies the mouse cursor to be displayed when pointing over an element
D
direction Specifies the text direction/writing direction

display Specifies how a certain HTML element should be displayed

E
empty-cells Specifies whether or not to display borders and background on empty cells in a table
F

filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties

flex-grow Specifies how much the item will grow relative to the rest

flex-shrink Specifies how the item will shrink relative to the rest

flex-wrap Specifies whether the flexible items should wrap or not

float Specifies whether or not a box should float

A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and
font
the font-family properties
@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
Allows authors to use a common name in font-variant-alternate for feature activated differently
@font-feature-values
in OpenType
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs

font-stretch Selects a normal, condensed, or expanded face from a font family

font-style Specifies the font style for text
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 127
 Basic propert y reference
Property Description

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-
feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it
applies to
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers
Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript
font-variant-position
regarding the baseline of the font
font-weight Specifies the weight of a font

G
A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas,
grid
grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
Either specifies a name for the grid item, or this property is a shorthand property for the grid-
grid-area
row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size

grid-column A shorthand property for the grid-column-start and the grid-column-end properties

grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns

grid-column-start Specifies where to start the grid item

grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties

grid-row A shorthand property for the grid-row-start and the grid-row-end properties

grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows

grid-row-start Specifies where to start the grid item

grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-
areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items

grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
H

hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
height Sets the height of an element
hyphens Sets how to split words to improve the layout of paragraphs

I
Gives a hint to the browser about what aspects of an image are most important to preserve
image-rendering
when the image is scaled
@import Allows you to import a style sheet into another style sheet

isolation Defines whether an element must create a new stacking content

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 128
 Basic propert y reference
Property Description

J
Specifies the alignment between the items inside a flexible container when the items do not use
justify-content
all available space
K

@keyframes Specifies the animation code

L
left Specifies the left position of a positioned element

letter-spacing Increases or decreases the space between characters in a text

line-break Specifies how/if to break lines
line-height Sets the line height

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)

list-style-type Specifies the type of list-item marker

M

margin Sets all the margin properties in one declaration

margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element
max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

@media Sets the style rules for different media types/devices/sizes
min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

mix-blend-mode Specifies how an element's content should blend with its direct parent background
O
Specifies how the contents of a replaced element should be fitted to the box established by its
object-fit
used height and width
object-position Specifies the alignment of the replaced element inside its box
opacity Sets the opacity level for an element

order Sets the order of the flexible item, relative to the rest
Sets the minimum number of lines that must be left at the bottom of a page when a page break
orphans
occurs inside an element
outline A shorthand property for the outline-width, outline-style, and the outline-color properties
outline-color Sets the color of an outline

outline-offset Offsets an outline, and draws it beyond the border edge

outline-style Sets the style of an outline

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 129
 Basic propert y reference
Property Description

outline-width Sets the width of an outline

overflow Specifies what happens if content overflows an element's box
Specifies whether or not the browser may break lines within words in order to prevent overflow 

overflow-wrap
(when a string is too long to fit its containing box)
Specifies whether or not to clip the left/right edges of the content, if it overflows the element's 

overflow-x
content area
Specifies whether or not to clip the top/bottom edges of the content, if it overflows the
overflow-y
element's content area
P
padding A shorthand property for all the padding-* properties
padding-bottom Sets the bottom padding of an element

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

page-break-after Sets the page-breake behavior after an element

page-break-before Sets the page-breake behavior before an element
page-break-inside Sets the page-breake behavior inside an element

perspective Gives a 3D-positioned element some perspective

perspective-origin Defines at which position the user is looking at the 3D-positioned element

pointer-events Defines whether or not an element reacts to pointer events

position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
Q

quotes Sets the type of quotation marks for embedded quotations

R
resize Defines if (and how) an element is resizable by the user

right Specifies the right position of a positioned element

S
scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a
straight jump
T
tab-size Specifies the width of a tab character
table-layout Defines the algorithm used to lay out table cells, rows, and columns

text-align Specifies the horizontal alignment of text

Describes how the last line of a block or a line right before a forced line break is aligned when

text-align-last
text-align is "justify"
text-combine-upright Specifies the combination of multiple characters into the space of a single character

text-decoration Specifies the decoration added to text

text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration

text-decoration-style Specifies the style of the line in a text decoration

text-indent Specifies the indentation of the first line in a text-block

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 130
 Basic propert y reference
Property Description

text-justify Specifies the justification method used when text-align is "justify"

text-orientation Defines the orientation of the text in a line

text-overflow Specifies what should happen when text overflows the containing element
text-shadow Adds shadow to text

text-transform Controls the capitalization of text

text-underline-position Specifies the position of the underline which is set using the text-decoration property

top Specifies the top position of a positioned element

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements

transform-style Specifies how nested elements are rendered in 3D space

transition A shorthand property for all the transition-* properties

transition-delay Specifies when the transition effect will start

transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for

transition-timing-function Specifies the speed curve of the transition effect

U
Used together with the direction property to set or return whether the text should be
unicode-bidi
overridden to support multiple languages in the same document
user-select Specifies whether the text of an element can be selected
V

vertical-align Sets the vertical alignment of an element

visibility Specifies whether or not an element is visible

W
white-space Specifies how white-space inside an element is handled
Sets the minimum number of lines that must be left at the top of a page when a page break
widows
occurs inside an element
width Sets the width of an element
word-break Specifies how words should break when reaching the end of a line

word-spacing Increases or decreases the space between words in a text

word-wrap Allows long, unbreakable words to be broken and wrap to the next line

writing-mode Specifies whether lines of text are laid out horizontally or vertically
Z

z-index Sets the stack order of a positioned element

https://www.w3schools.com/cssref/default.asp

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 131
 CSS Se lectors
Selector Example Description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
Selects all <p> elements that are placed immediately after <div>
element+element div + p
elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
Selects all elements with a title attribute containing the word
[attribute~=value] [title~=flower]
"flower"

[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"

Selects every <a> element whose href attribute value 


[attribute^=value] a[href^="https"]
begins with "https"
Selects every <a> element whose href attribute value 

[attribute$=value] a[href$=".pdf"]
ends with ".pdf"
Selects every <a> element whose href attribute value contains
[attribute*=value] a[href*="w3schools"]
the substring "w3schools"

:active a:active Selects the active link

::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
Selects every <p> element that has no children (including text
:empty p:empty
nodes)

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
Selects every <p> element that is the first <p> element of its
:first-of-type p:first-of-type
parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 132
 CSS Se lectors
Selector Example Description

:invalid input:invalid Selects all input elements with an invalid value

Selects every <p> element with a lang attribute equal to
:lang(language) p:lang(it)
"it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
Selects every <p> element that is the last <p> element of its
:last-of-type p:last-of-type
parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
Selects every <p> element that is the second child of its parent,
:nth-last-child(n) p:nth-last-child(2)
counting from the last child
Selects every <p> element that is the second <p> element of its
:nth-last-of-type(n) p:nth-last-of-type(2)
parent, counting from the last child
Selects every <p> element that is the second <p> element of its
:nth-of-type(n) p:nth-of-type(2)
parent
Selects every <p> element that is the only <p> element of its
:only-of-type p:only-of-type
parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with placeholder text
:read-only input:read-only Selects input elements with the "readonly" attribute specified
Selects input elements with the "readonly" attribute NOT
:read-write input:read-write
specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
Selects the current active #news element (clicked on a URL
:target #news:target
containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links

https://www.w3schools.com/cssref/css_selectors.asp

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 133
 CSS Units
Absolute Lengths Example

cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

Relative Lengths Example

Relative to the font-size of the element (2em means 2

em
times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 134
 Co lor va lues
Absolute Lengths Example

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
Hexadecimal Colors BB (blue) hexadecimal integers specify the components of the color. All values must be
between 00 and FF. For example, the #0000ff value is rendered as blue, because the
blue component is set to its highest value (ff) and the others are set to 00.

RGBA color values are an extension of RGB color values with an alpha channel - which
specifies the opacity of the object.
RGBA Colors An RGBA color is specified with the rgba() function, which has the following syntax:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

SL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate

representation of colors.
An HSL color value is specified with the hsl() function, which has the following syntax:
HSL Colors hsl(hue, saturation, lightness)
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240
is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full
color. Lightness is also a percentage; 0% is black, 100% is white.

https://www.w3schools.com/cssref/css_colors_legal.asp

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 135
 THE END

w w w. di v i .s pa ce

D I V I S PAC E | D I V I C S S A N D C H I L D T H E M E G U I D E 136
w w w. d i v i . s p a c e