The Beaver Builder plugin automatically generates, caches and compresses a CSS file for each page created. The CSS included depends on what modules you use, your style settings and the global and page custom CSS you add under "Tools".
BB THEME CSS
1. style.css (child theme)
The traditional WordPress way and often the best. Here you add CSS to the style.css file in your child theme folder
Or go to Appearance > Editor > style.css
Pros - Tidy and can be used to style both Theme and Beaver Builder Plugin areas without long rules (see note)
Cons - No live view of changes unless using a CSS editor.
Note: With the Beaver Builder Theme this sheet is added to the document last so it's easier to overwrite styles in the other options. This is not always the case with other themes.
2. WordPress Customizer
The Customizer is now the recommended place for theme options and the Beaver Builder theme (and many others) have placed a space for Custom CSS.
Customize > Code > CSS
Pros - Convenient so often suggested by support. You can see the effect live and it has a nice mobile responsiveness switched to see those views.
Cons - Not much space. If you use styles.css you're likely to forget the code is there too. "internal" CSS is messy on the source code and can lose it with theme changes.
Note: With the Beaver Theme this is outputted second (internal styling) so can overwrite the plugin custom styles. Other themes maybe different.
BB CUSTOMIZER THEME SETTINGS.
Other theme settings made in the customizer are saved and compressed in a cached stylesheet with a unique ID like this:
BB PLUGIN CSS
3. BB Global CSS
Here you add CSS for the Beaver Builder plugin content area only (but technically you can style theme areas too)
Page Builder > Tools> Global Settings > CSS
Pros - Good for exporting all page builder styles for use with a new theme.
Cons - Comes early in the "cascade"needing to win with "specificity". This means longer CSS if styling theme areas.
Note: This CSS gets added to the bottom layout sheet just before any page Layout CSS (if added). The ID changes page by page. This example shows the 244 (this page), but homepage is 9.
<link rel='stylesheet' id='fl-builder-layout-244-css' href='https://only.beaverjunction.com/wp-content/uploads/bb-plugin/cache/244-layout.css' type='text/css' media='all' />
4. BB Layout (Page) CSS
Allows us to export CSS with Page Templates. (intended for content area, but you can style theme areas too)
Pros - Great for saving reusable designs for other projects. Good for sharing with others.
Cons - Need to remember that you added here. CSS needs to be more specific.
Note: This CSS is added to the bottom layout sheet where the ID will change page by page. This example shows the 2967, but homepage is 9.
Note: This CSS gets added to the bottom layout sheet (added after any global CSS added). The ID will change page by page. This example shows the 2967 (another page) but the homepage is 9.
<link rel='stylesheet' id='fl-builder-layout-2967-css' href='https://only.beaverjunction.com/wp-content/uploads/bb-plugin/cache/2967-layout.css' type='text/css' media='all' />
(If this link shows "not found" it's because the page it belongs to has not been loaded - https://only.beaverjunction.com/home-wireframe-1/)
5. The Text Editor
It's best not to overuse the text editor to style things like font sizes and Colour.
This is "inline styling" and is harder to overwrite globally with external CSS.
You can use something like <span class ="my-selector-name"> my content</span> in the Text/HTML tab
(just be careful not to forget it's there when in the visual tab).
This text is in a span tag and is being styled by Page Layout CSS.
It's overwriting the colour "accent" styles set in the Beaver Builder themes customiser setting. This is being done with !important. But it is better to add .fl-module-content to make rule more specific.
The button right bottom has a custom class added in the advanced tab of the button module, but the !important in the first button is preventing it from showing.