01-Jan-2024

Cheatsheet: The Order that CSS is Applied in Oxygen

There isn’t currently a way to manage the priority of the CSS in Oxygen by reordering the selectors as they come from the various stylesheets. Understanding how the CSS is added by default can be helpful if something isn’t quite working as expected.

There are lots of different ways to apply CSS in Oxygen and it makes a difference in terms of priority.

The default order of Oxygen CSS

From top to bottom, this is the order that the styles are added to the page. (the later CSS rules will override the earlier ones unless more specific – like using IDs are more specific than using classes).

Oxygen.css

First the default Oxygen.css stylesheet is added, containing normalize.css and some base styles for Oxygen components. This is a global stylesheet found on every page and is the first to load.

Page.css / template.css

Next are the styles that are specific to the page or template being viewed. When styles are added to an element using the style controls on an element’s ID, these styles are added here – in the exact order they are added, newest last.

If the page being viewed is inheriting a template, the inherited template CSS will come first.

Universal.css

After all the page/template specific styles are added, this global stylesheet is added which contains a few things, always in the following order;

  1. Default CSS from Oxygen components.
  2. CSS from stylesheets managed in Oxygen (in the order they appear)
  3. CSS added by custom selectors managed inside Oxygen

So any CSS added via stylesheets (2) will always come before those added via custom selectors (3), no matter how late they were added.

Inline CSS

Some Oxygen components (like the gallery) will output inline CSS inside the body of the page just underneath where the element is.

Code Block CSS

The last CSS to be added is any that was added in via a code block. This is added inline towards the very bottom of the page after all of the content. It can be a bad idea to add CSS inside code blocks if they are targeting elements above the fold and visible when the page first loads.

Note – The stylesheets that are output from Oxygen in the <head> are output quite late so they will generally come after any CSS from plugins or WordPress CSS such as the block library stylesheet for Gutenberg. If you’re needing to override these styles from inside a plugin, we have a tutorial on how to load a custom CSS file after Oxygen’s stylesheets.

Adapted from: https://wpdevdesign.com/cheatsheet-the-order-that-css-is-applied-in-oxygen/, viewed 1-Jan-2024

Leave a Reply

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram