Hi Chad,

In this example I set the "Red Section" section to have class "red", the "Blue Section" section to have class "blue", etc. I then used the following three CSS rules:

.red .cf-section-header {color: red;}
.blue {color: blue;}
.green > .cf-section-header {color: green;}

In 01-red.png, you can see that the section header is in red, but so is the header for a table under that section. This is because they both have the "cf-section-header" class.

In 02-blue.png, everything in the section, including custom HTML text, is in blue.

In 03-green.png, only the section header and not the table header is in green. The rule above states to apply the green color to only elements with the "cf-section-header" class which are immediate children of elements in the "green" class; there are other elements wrapping the table header so it does not fall under this rule.

In general, there isn't CSS documentation in the Help Files because it's all standard CSS; W3Schools is a good reference, and more advanced tricks can be found in sites like StackOverflow, etc. Your greatest friend in finding the appropriate selectors is in opening Developer Tools (F12) and exploring the DOM of the page to discover the relevant classes, structure of HTML elements, and existing style values at each level.

Hope this helps!