How to write CSS in Oxygen

 /

There are many ways to add some custom CSS in Oxygen. If they all do the same thing, their purpose is a bit different.

Adding CSS properties to an Element

When editing an element, you can add some additional CSS properties.
Select your element and go to Advanced / Custom CSS :

Notice that the closed bracket is already added, so you don't have to add one :

The content will be stored in a new CSS file located in \wp-content\uploads\oxygen\css
It will be names like this : [postname]-[postid].css

This file will be loaded ONLY on this page.

Adding CSS properties in the Code Block element

You can write all your custom CSS in a Code Block.

 

The position of the Code Block doesn't matter if you use it ONLY for the CSS, because the CSS will be added in a <style> element in the footer.

Once again, these CSS will be applied only on this page.

I find the Code Block method more convenient, as it's faster and easier to access.

Adding CSS properties in a Stylesheet

You can also create some stylesheets, in the menu Manage / Stylesheets.
The content will be stored in the universal.css file, located in \wp-content\uploads\oxygen\css

NEVER edit this file manually. It's the default file Oxygen uses for all the styles.

The big difference with other methods is that this file is loaded on every page of your site.
So if you have to style your logo, some headings or some classes, you can do it in a stylesheet.

 

Adding CSS properties in the Customizer

Maybe you forgot about that one, but it's still possible to use the WordPress Customizer to add your custom CSS.
Go to Appearance / Customize, then add your CSS in the Additional CSS tab :

The content will be added in a <style> element just before the closing </head>.
It's also sitewide, so it will be added on every page.

Which method to choose

To understand better how it works, here is a simple example: You want to have a black background on every page of your site, except the homepage, where you want a red background.

  • Create a new stylesheet (or use one you already have created) and add :
    body { background-color: black }
    Now all your pages will have a black background because the stylesheet is loaded on each of them.
  • Edit your homepage, add a Code Block and in the CSS panel, add :
    body { background-color: red }
    Your homepage will now have a red background because the CSS in the Code Block is only applied to this page.