The Oxygen 2 site builder for WordPress provides a plethora of ways to set styles. This means flexibility and power but also some potential for confusion! Here is my attempt to document the different approaches as well as my own personal method of working - which may continue to evolve.
Select any element within a template and you will be able to set all manner of properties in the 'Primary' and 'Advanced' tabs, from fonts to margins. These settings will apply just to that individual element.
Here I have just added a top margin to a heading via the 'Size & Spacing' menu under the Advanced tab
Remember though that, depending on the template, that single element might appear on any number of pages. And if it is a reusable part, it might even appear in multiple templates.
Again with an element selected in the visual editor, Oxygen provides a 'Custom CSS' option (you'll find this under the 'Advanced' tab). Any CSS added here will apply only to that element and takes precedence over element properties set in the visual editor (assuming the specificity is the same). Note that the CSS will not take effect in the editor until you click the 'Apply Code' button at the bottom of the panel.
This element currently has no Custom CSS but it is easy to see the ID
Incidentally, looking in the 'Custom CSS' panel is a very useful way of quickly checking the ID of any given element, as it is always given at the top.
It's also possible to create an entire custom stylesheet of your own. In the visual editor, click on the 'Manage' menu, then 'Stylesheets', then 'Add Stylesheet'. Any CSS added here will apply to all templates, so can be used to style multiple elements - depending on the selector. It will also take precedence over the two approaches outlined above (assuming the same specificity).
Here I have added one stylesheet, 'jd-custom'. I can add more if I wish
In a way, editing your CSS here is much more like the standard WordPress approach of editing stylesheets via Appearance > Editor, however it comes with a major advantage. Any changes you make will appear in real time in the Oxygen visual editor, with no need to save and refresh. (Yes, I know WordPress now has a real-time CSS editor too, but this is just for additional CSS so is not useful for making major stylesheet edits.)
Within the 'Manage' menu you will also find the option to set Global Styles, for example the font size and font weight for <h1> elements across the entire site.
Setting the font size, font weight and color for the <h1> element via Global Styles
Options here include global colors, fonts, link styles, page widths and so on. Again these can be overwritten with a custom stylesheet (approach 3 above).
Personally I've fallen into the pattern of using element properties for setting the styles of individual elements, and using a custom stylesheet for abything else including setting global styles. On the rare occasions where I have needed to write custom CSS for individual elements, I have included it in my stylesheet too (rather than using the 'Custom CSS' option under the Advanced tab). This gives me two places to look rather than four - and I am too used to editing a stylesheet directly to change my ways now.
However I suspect that a user with no CSS knowledge would be able to get quite far using just element properties and the 'Global Styles' menu.
