Table of Contents

PART ONE

PART TWO

PART THREE

PART FOUR

PART FIVE

PART SIX

PART SEVEN

PART EIGHT

The Divi CSS and Child Theme Guide

2nd Edition
www.divi.space

Introduction

If you’re a Divi user and are interested in improving your web design skills, then this eBook is for you. The Divi CSS and Child Theme Guide 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 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:

  • What CSS is and why you should learn it
  • What a child theme is and why it should be used in your web development process
  • A thorough guide to working with Divi child themes
  • Various ways that you can add custom CSS to your Divi website
  • CSS selectors and how to target elements
  • Divi-specific CSS selectors
  • How to test and troubleshoot CSS changes
  • CSS resources for further learning 

ABOUT AUTHOR:

Stephen James

Stephen James is a UK based web developer whose name is synonymous with Divi. An early adopter of ‘Divi as a framework’, his easy to follow tutorials and Divi extensions have saved thousands of designers from hours of pain.

Lisa-Robyn Keown

Lisa-Robyn Keown is a copywriter and brand strategist from Cape Town, South Africa. She specializes in writing Divi, WordPress and web design related content.

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 pluginsfor 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.

Part One:
Introduction to CSS

What is CSS

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

If you think of HTML as the content and general structure of the website, then think of CSS as the design style that influences various aspects of these elements. CSS styling can enhance various web elements such as color, style, font size, margins, padding and much more.

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

A OVERVIEW OF BASIC CSS TERMINOLOGY

    1. 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.

Why You Should Learn CSS

Even though Divi requires no knowledge of code, designers will find their websites a step above the rest by gaining an understanding of CSS.

Divi’s out-of-the-box aesthetic is generally appealing, although some users may want to create a more unique look and feel for their website. The modules of the Divi Builder can be styled and customized using in the various settings in the Design tab. Beyond this, the Custom CSS tabs offer the ability to add CSS styling to each module. While this may suffice for small tweaks, if you’re looking to create a particular look and feel for your website, or wish to add more personalization, you’ll need to become familiar with CSS.

While there are hundreds of articles written about CSS in the general sense, there aren’t all that many that have been adapted specifically for use with the Divi framework or Divi plugin.

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.

Learn CSS with Divi Space

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

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!

Part Two:
Child Themes

An Introduction to Child Themes

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

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.

Build a Divi Child Theme 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!

What is a Child Theme?

“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 such as Envato Market, 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.

Why Do I Need to Use a Child Theme?

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.

THEME UPDATES

At various stages along the way, theme development agencies or creatives will decide to update their 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.

How to Create a Child Theme

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.

3. USE THE ASPEN ROOTS CHILD THEME

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.

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 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.

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

How to Create a Divi Child Theme From Scratch

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.

In the stylesheet description, the most important things to note are the “Theme Name” and “Template” sections:

  • 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.

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.

How to install Divi Child Theme?

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.

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.

Part Three:
6 Ways to Add CSS to Divi

6 Ways to Add CSS to Divi

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:

Add CSS to Divi Using Inline CSS

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).

PROS AND CONS OF USING INLINE STYLING

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

Add CSS to Divi Using the Divi Theme Options Custom CSS

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.

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

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

Add CSS to Individual Divi Modules using the Advanced Tab CSS

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. The main content box is where the styling of the specific module should go.
  • 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.

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.

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

Add CSS to Divi Using the Divi Builder Page Settings

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

To demonstrate the Divi Builder Page Settings, a second text module is added and assigned the H1 tag.

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.

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..

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

 

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

Add CSS to Divi Using a Stylesheet

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

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.

Read our step by step guide to creating a child theme with the Divi Space Child Theme Builder.

Add Custom CSS and JavaScript with a Plugin

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.

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.

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:

PROS:

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.

Part Four:
Divi Selectors

CSS Selectors

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 any element on a web page you’ll see these three components 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.

Sections, Rows & Columns

Sections

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

Rows

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

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.

What if you don’t want your changes to be so broad?

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.

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

Top Header – Secondary Menu

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 { } .et-social-google-plus a.icon:before { }

Top Header – Navigation

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 { }

Top Header – Sub Menu

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 { }

Mobile Menu

1. MOBILE MENU ICON ( HAMBURGER )
.mobile_menu_bar:before { }

2. MOBILE MENU MAIN LINK
.et_mobile_menu .menu-item-has-children > a { }

3. MOBILE MENU NORMAL LINK
.et_mobile_menu li a { }

4. MOBILE MENU
.et_mobile_menu { }

Accordion

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 { }

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 { }

6. TIMER CONTROL
.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-handle { }

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{ }

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 { }

4. POST META
.et_pb_post .post-meta { }

5. POST META LINKS
.et_pb_post .post-meta a { }

6. FULL WIDTH POST PREVIEW
.a.et_pb_post p:not(.post-meta) { } h2 a { }

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 { }

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 { }

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 { }

.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 { }

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 { }

6. MODULE
.et_pb_fullwidth_portfolio { } /** For full-width portfolio **/ .et_pb_portfolio_grid { } /** For grid portfolio **/

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 { }

Map

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.

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 can be targeted at once with: .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 { }

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 { }

Shop

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 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 { }

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 { }

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 { }

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’.

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 { }

Part Five: Browser Developer Tools

How to use your browser’s developer tools

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:

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.

By default, this should appear at the bottom of the page and look something like this.

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…

… is represented in a single highlighted section as:

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.

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.

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.

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:

… to this.

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.

Breaking Down CSS Commands

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.

Part Six:
Troubleshooting CSS

How to Troubleshoot CSS

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 late
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:

* { background: red ; }

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.

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.

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; }

Try

#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.

Part Seven:
Resources

The Best Resources for Learning CSS

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.

Best Online Courses for Learning CSS with Divi

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

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

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

Divi Community Blogs

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

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

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

Best Websites and Learning Portals to Learn CSS

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

Lynda

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

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

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

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

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

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

Ending Thoughts

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.

Learn CSS for Divi

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.

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
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.

CSS Resources

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

Part Eight:
Tables

Divi Selectors

SelectorDescription
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
Top Header - Secondary Menu
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 { }
Top Header - Navigation
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 { }
Top Header - Sub Menu
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 { }
Footer
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 { }
Accordion
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.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 { }
6. Timer Control.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time- handle { }
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 { }
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 { }
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 { }
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 { }
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 { }
2. Map PinThe pin styling is not set with CSS. You can learn how to change it 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 can be targeted at once with: .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 { }
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 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 { }
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 { }
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 { }
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’.
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 { }l

Basic Property Reference

PropertyDescription
A
align-contentSpecifies the alignment between the lines inside a flexible container when the items do not use all available space
align-itemsSpecifies the alignment for items inside a flexible container
align-selfSpecifies the alignment for selected items inside a flexible container
allResets all properties (except unicode-bidi and direction)
animationA shorthand property for all the  animation-*  properties
animation-delaySpecifies a delay for the start of an animation
animation-directionSpecifies whether an animation should be played forwards, backwards or in alternate cycles
animation-durationSpecifies how long an animation should take to complete one cycle
animation-fill-modeSpecifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-countSpecifies the number of times an animation should be played
animation-nameSpecifies a name for the @keyframes animation
animation-play-stateSpecifies whether the animation is running or paused
animation-timing-functionSpecifies the speed curve of an animation
B
backface-visibilityDefines whether or not the back face of an element should be visible when facing the user
backgroundA shorthand property for all the  background-*  properties
background-attachmentSets whether a background image scrolls with the rest of the page, or is fixed
background-blend-modeSpecifies the blending mode of each background layer (color/image)
background-clipDefines how far the background (color or image) should extend within an element
background-colorSpecifies the background color of an element
background-imageSpecifies one or more background images for an element
background-originSpecifies the origin position of a background image
background-positionSpecifies the position of a background image
background-repeatSets if/how a background image will be repeated
background-sizeSpecifies the size of the background images
borderA shorthand property for  border-width, border-style  and  border-color
border-bottomA shorthand property for  border-bottom-width, border-bottom-style  and  border-bottom-color
border-bottom-colorSets the color of the bottom border
border-bottom-left-radiusDefines the radius of the border of the bottom-left corner
border-bottom-right-radiusDefines the radius of the border of the bottom-right corner
border-bottom-styleSets the style of the bottom border
border-bottom-widthSets the width of the bottom border
border-collapseSets whether table borders should collapse into a single border or be separated
border-colorSets the color of the four borders
border-imageA shorthand property for all the  border-image-*  properties
border-image-outsetSpecifies the amount by which the border image area extends beyond the border box
border-image-repeatSpecifies whether the border image should be repeated, rounded or stretched
border-image-sliceSpecifies how to slice the border image
border-image-sourceSpecifies the path to the image to be used as a border
border-image-widthSpecifies the width of the border image
border-leftA shorthand property for all the  border-left-*  properties
border-left-colorSets the color of the left border
border-left-styleSets the style of the left border
border-left-widthSets the width of the left border
border-radiusA shorthand property for the four  border-*-radius  properties
border-rightA shorthand property for all the  border-right-*  properties
border-right-colorSets the color of the right border
border-right-styleSets the style of the right border
border-right-widthSets the width of the right border
border-spacingSets the distance between the borders of adjacent cells
border-styleSets the style of the four borders
border-topA shorthand property for  border-top-width, border-top-style  and  border-top-color
border-top-colorSets the color of the top border
border-top-left-radiusDefines the radius of the border of the top-left corner
border-top-right-radiusDefines the radius of the border of the top-right corner
border-top-styleSets the style of the top border
border-top-widthSets the width of the top border
border-widthSets the width of the four borders
bottomSets the elements position, from the bottom of its parent element
box-decoration-breakSets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadowAttaches one or more shadows to an element
box-sizingDefines how the width and height of an element are calculated: should they include padding and borders, or not
break-afterSpecifies the page-, column-, or region-break behavior after the generated box
break-beforeSpecifies the page-, column-, or region-break behavior before the generated box
break-insideSpecifies the page-, column-, or region-break behavior inside the generated box
C
caption-sideSpecifies the placement of a table caption
caret-colorSpecifies the color of the cursor (caret) in inputs, textareas, or any element that is editable
@charsetSpecifies the character encoding used in the style sheet
clearSpecifies on which sides of an element floating elements are not allowed to float
clipClips an absolutely positioned element
colorSets the color of text
column-countSpecifies the number of columns an element should be divided into
column-fillSpecifies how to fill columns, balanced or not
column-gapSpecifies the gap between the columns
column-ruleA shorthand property for all the  column-rule-*  properties
column-rule-colorSpecifies the color of the rule between columns
column-rule-styleSpecifies the style of the rule between columns
column-rule-widthSpecifies the width of the rule between columns
column-spanSpecifies how many columns an element should span across
column-widthSpecifies the column width
columnsA shorthand property for  column-width  and  column-count
contentUsed with the :before and :after pseudo-elements, to insert generated content
counter-incrementIncreases or decreases the value of one or more CSS counters
counter-resetCreates or resets one or more CSS counters
cursorSpecifies the mouse cursor to be displayed when pointing over an element
D
directionSpecifies the text direction/writing direction
displaySpecifies how a certain HTML element should be displayed
E
empty-cellsSpecifies whether or not to display borders and background on empty cells in a table
F
filterDefines effects (e.g. blurring or color shifting) on an element before the element is displayed
flexA shorthand property for the  flex-grow, flex-shrink , and the  flex-basis  properties
flex-basisSpecifies the initial length of a flexible item
flex-directionSpecifies the direction of the flexible items
flex-flowA shorthand property for the  flex-direction  and the  flex-wrap  properties
flex-growSpecifies how much the item will grow relative to the rest
flex-shrinkSpecifies how the item will shrink relative to the rest
flex-wrapSpecifies whether the flexible items should wrap or not
floatSpecifies whether or not a box should float
fontA shorthand property for the  font-style, font-variant, font-weight, font-size/line-height , and the  font-family properties
@font-faceA rule that allows websites to download and use fonts other than the "web-safe" fonts
font-familySpecifies the font family for text
font-feature-settingsAllows control over advanced typographic features in OpenType fonts
@font-feature-valuesAllows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font-kerningControls the usage of the kerning information (how letters are spaced)
font-language-overrideControls the usage of language-specific glyphs in a typeface
font-sizeSpecifies the font size of text
font-size-adjustPreserves the readability of text when font fallback occurs
font-stretchSelects a normal, condensed, or expanded face from a font family
font-styleSpecifies the font style for text
font-synthesisControls which missing typefaces (bold or italic) may be synthesized by the browser
font-variantSpecifies whether or not a text should be displayed in a small-caps font
font-variant-alternatesControls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-capsControls the usage of alternate glyphs for capital letters
font-variant-east-asianControls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligaturesControls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numericControls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-positionControls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weightSpecifies the weight of a font
G
gridA shorthand property for the  grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns , and the  grid-auto-flow  properties
grid-areaEither specifies a name for the grid item, or this property is a shorthand property for the  grid-row-start ,  grid-column-start ,  grid-row-end , and  grid-column-end  properties
grid-auto-columnsSpecifies a default column size
grid-auto-flowSpecifies how auto-placed items are inserted in the grid
grid-auto-rowsSpecifies a default row size
grid-columnA shorthand property for the  grid-column-start  and the  grid-column-end  properties
grid-column-endSpecifies where to end the grid item
grid-column-gapSpecifies the size of the gap between columns
grid-column-startSpecifies where to start the grid item
grid-gapA shorthand property for the  grid-row-gap  and  grid-column-gap  properties
grid-rowA shorthand property for the  grid-row-start  and the  grid-row-end  properties
grid-row-endSpecifies where to end the grid item
grid-row-gapSpecifies the size of the gap between rows
grid-row-startSpecifies where to start the grid item
grid-templateA shorthand property for the  grid-template-rows ,  grid-template-columns  and  grid-areas  properties
grid-template-areasSpecifies how to display columns and rows, using named grid items
grid-template-columnsSpecifies the size of the columns, and how many columns in a grid layout
grid-template-rowsSpecifies the size of the rows in a grid layout
H
hanging-punctuationSpecifies whether a punctuation character may be placed outside the line box
heightSets the height of an element
hyphensSets how to split words to improve the layout of paragraphs
I
image-renderingGives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
@importAllows you to import a style sheet into another style sheet
isolationDefines whether an element must create a new stacking content
J
justify-contentSpecifies the alignment between the items inside a flexible container when the items do not use all available space
K
@keyframesSpecifies the animation code
L
leftSpecifies the left position of a positioned element
letter-spacingIncreases or decreases the space between characters in a text
line-breakSpecifies how/if to break lines
line-heightSets the line height
list-styleSets all the properties for a list in one declaration
list-style-imageSpecifies an image as the list-item marker
list-style-positionSpecifies the position of the list-item markers (bullet points)
list-style-typeSpecifies the type of list-item marker
M
marginSets all the margin properties in one declaration
margin-bottomSets the bottom margin of an element
margin-leftSets the left margin of an element
margin-rightSets the right margin of an element
margin-topSets the top margin of an element
max-heightSets the maximum height of an element
max-widthSets the maximum width of an element
@mediaSets the style rules for different media types/devices/sizes
min-heightSets the minimum height of an element
min-widthSets the minimum width of an element
mix-blend-modeSpecifies how an element's content should blend with its direct parent background
O
object-fitSpecifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-positionSpecifies the alignment of the replaced element inside its box
opacitySets the opacity level for an element
orderSets the order of the flexible item, relative to the rest
orphansSets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
outlineA shorthand property for the  outline-width, outline-style , and the  outline-color  properties
outline-colorSets the color of an outline
outline-offsetOffsets an outline, and draws it beyond the border edge
outline-styleSets the style of an outline
outline-widthSets the width of an outline
overflowSpecifies what happens if content overflows an element's box
overflow-wrapSpecifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)
overflow-xSpecifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-ySpecifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area
P
paddingA shorthand property for all the  padding-*  properties
padding-bottomSets the bottom padding of an element
padding-leftSets the left padding of an element
padding-rightSets the right padding of an element
padding-topSets the top padding of an element
page-break-afterSets the page-breake behavior after an element
page-break-beforeSets the page-breake behavior before an element
page-break-insideSets the page-breake behavior inside an element
perspectiveGives a 3D-positioned element some perspective
perspective-originDefines at which position the user is looking at the 3D-positioned element
pointer-eventsDefines whether or not an element reacts to pointer events
positionSpecifies the type of positioning method used for an element (static, relative, absolute or fixed)
Q
quotesSets the type of quotation marks for embedded quotations
R
resizeDefines if (and how) an element is resizable by the user
rightSpecifies the right position of a positioned element
S
scroll-behaviorSpecifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump
T
tab-sizeSpecifies the width of a tab character
table-layoutDefines the algorithm used to lay out table cells, rows, and columns
text-alignSpecifies the horizontal alignment of text
text-align-lastDescribes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-combine-uprightSpecifies the combination of multiple characters into the space of a single character
text-decorationSpecifies the decoration added to text
text-decoration-colorSpecifies the color of the text-decoration
text-decoration-lineSpecifies the type of line in a text-decoration
text-decoration-styleSpecifies the style of the line in a text decoration
text-indentSpecifies the indentation of the first line in a text-block
text-justifySpecifies the justification method used when text-align is "justify"
text-orientationDefines the orientation of the text in a line
text-overflowSpecifies what should happen when text overflows the containing element
text-shadowAdds shadow to text
text-transformControls the capitalization of text
text-underline-positionSpecifies the position of the underline which is set using the text-decoration property
topSpecifies the top position of a positioned element
transformApplies a 2D or 3D transformation to an element
transform-originAllows you to change the position on transformed elements
transform-styleSpecifies how nested elements are rendered in 3D space
transitionA shorthand property for all the  transition-*  properties
transition-delaySpecifies when the transition effect will start
transition-durationSpecifies how many seconds or milliseconds a transition effect takes to complete
transition-propertySpecifies the name of the CSS property the transition effect is for
transition-timing-functionSpecifies the speed curve of the transition effect
U
unicode-bidiUsed together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
user-selectSpecifies whether the text of an element can be selected
V
vertical-alignSets the vertical alignment of an element
visibilitySpecifies whether or not an element is visible
W
white-spaceSpecifies how white-space inside an element is handled
widowsSets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
widthSets the width of an element
word-breakSpecifies how words should break when reaching the end of a line
word-spacingIncreases or decreases the space between words in a text
word-wrapAllows long, unbreakable words to be broken and wrap to the next line
writing-modeSpecifies whether lines of text are laid out horizontally or vertically
Z
z-indexSets the stack order of a positioned element
Edit
Property Description
.class.introSelects all elements with class="intro"
#id#firstnameSelects the element with id="firstname"
**Selects all elements
elementpSelects all p elements
element,elementdiv, pSelects all div elements and all

elements

element elementdiv pSelects all p elements inside
elements
element>elementdiv > pSelects all p elements where the parent is a
element
element+elementdiv + pSelects all p elements that are placed immediately after < div > elements
element1~element2p ~ ulSelects every ul element that are preceded by a

element

[attribute][target]Selects all elements with a target attribute
[attribute=value][target=_blank]Selects all elements with target=" _blank "
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word " flower "
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"
[attribute^=value]a[href^="https"]Selects every a element whose href attribute value begins with "https"
[attribute$=value]a[href$=".pdf"]Selects every a element whose href attribute value ends with ".pdf"
[attribute*=value]a[href*="w3schools"]Selects every a element whose href attribute value contains the substring "w3schools"
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each p element
::beforep::beforeInsert something before the content of each p element
:checkedinput:checkedSelects every checked input element
:defaultinput:defaultSelects the default input element
:disabledinput:disabledSelects every disabled input element
:emptyp:emptySelects every p element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled input element
:first-childp:first-childSelects every p element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every p element
::first-linep::first-lineSelects the first line of every < p > element
:first-of-typep:first-of-typeSelects every < p > element that is the first

element of its parent

:focusinput:focusSelects the input element which has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects all input elements with an invalid value
:lang(language)p:lang(it)Selects every p element with a lang attribute equal to "it" (Italian)
:last-childp:last-childSelects every p element that is the last child of its parent
:last-of-typep:last-of-typeSelects every p element that is the last

element of its parent

:linka:linkSelects 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
:nth-last-child(n)p:nth-last-child(2)Selects every p element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every p element that is the second p element of its parent, counting from the last child
:nth-of-type(n)p:nth-of-type(2)Selects every p element that is the second p element of its parent
:only-of-typep:only-of-typeSelects every p element that is the only p element of its parent
:only-childp:only-childSelects every p element that is the only child of its parent
:optionalinput:optionalSelects input elements with no "required" attribute
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
::placeholderinput::placeholderSelects input elements with placeholder text
:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified
:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified
:requiredinput:requiredSelects input elements with the "required" attribute specified
:root:rootSelects the document's root element
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all input elements with a valid value
:visiteda:visitedSelects all visited links

CSS Selectors

SelectorExampleDescription
.class.introSelects all elements with class="intro"
#id#firstnameSelects the element with id=" firstname"
**Selects all elements
elementpSelects all p elements
element,elementdiv, pSelects all div elements and all p elements
element elementdiv pSelects all p elements inside div elements
element>elementdiv > pSelects all p elements where the parent is a div element
element+elementdiv + pSelects all p elements that are placed immediately after div elements
element1~element2p ~ ulSelects 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"
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word "flower"
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"
[attribute^=value]a[href^="https"]Selects every a element whose href attribute value begins with "https "
[attribute$=value]a[href$=".pdf"]Selects every a element whose href attribute value ends with ".pdf"
[attribute*=value]a[href*="w3schools"]Selects every a element whose href attribute value contains the substring "w3schools"
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each p element
::beforep::beforeInsert something before the content of each p element
:checkedinput:checkedSelects every checked input element
:defaultinput:defaultSelects the default input element
:disabledinput:disabledSelects every disabled input element
:emptyp:emptySelects every p element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled input element
:first-childp:first-childSelects every p element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every p element
::first-linep::first-lineSelects the first line of every p element
:first-of-typep:first-of-typeSelects every p element that is the first p element of its parent
:focusinput:focusSelects the input element which has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects all input elements with an invalid value
:lang(language)p:lang(it)Selects every p element with a lang attribute equal to "it" (Italian)
:last-childp:last-childSelects every p element that is the last child of its parent
:last-of-typep:last-of-typeSelects every p element that is the last p element of its parent
:linka:linkSelects 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
:nth-last-child(n)p:nth-last-child(2)Selects every p element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every p element that is the second p element of its parent, counting from the last child
:nth-of-type(n)p:nth-of-type(2)Selects every p element that is the second p element of its parent
:only-of-typep:only-of-typeSelects every p element that is the only p element of its parent
:only-childp:only-childSelects every p element that is the only child of its parent
:optionalinput:optionalSelects input elements with no "required" attribute
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
::placeholderinput::placeholderSelects input elements with placeholder text
:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified
:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified
:requiredinput:requiredSelects input elements with the "required" attribute specified
:root:rootSelects the document's root element
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all input elements with a valid value
:visiteda:visitedSelects all visited links

CSS Units

Relative LengthsExample
emRelative to the font-size of the element (2em means 2 times the size of the current font)
exRelative to the x-height of the current font (rarely used)
chRelative to width of the "0" (zero)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport*
vhRelative to 1% of the height of the viewport*
vminRelative to 1% of viewport's* smaller dimension
vmaxRelative to 1% of viewport's* larger dimension
%Relative to the parent element
Absolute LengthsExample
cmcentimeters
mmillimeters
ininches (1in = 96px = 2.54cm)
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)

Color values

Absolute LengthsExample
Hexadecimal ColorsA hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
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 ColorsRGBA color values are an extension of RGB color values with an alpha channel - which
specifies the opacity of the object.
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).
HSL ColorsSL 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(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.
Source https://www.w3schools.com/cssref/css_colors_legal.asp