Ollie Theme Academy

Styling with CSS

Custom CSS in the site editor

The site editor provides two methods for adding custom CSS: per-block CSS for targeting specific block types, and global CSS for site-wide custom styling.

For per-block CSS, select a block type in the styles sidebar, navigate to the Advanced section, and write CSS properties without selectors. The system automatically targets the correct block type and stores the CSS in theme.json under the blocks section.

For global CSS, use the “Additional CSS” option in the styles sidebar’s more menu. Here you write complete CSS with selectors and properties, just like in a regular stylesheet. This gets stored in theme.json’s main CSS section.

Both approaches integrate with WordPress’s style engine and export cleanly to theme.json, making them preferable to external stylesheets for small customizations. The CSS appears in theme.json with line breaks preserved using escape sequences.

Back to: Ollie Theme Academy > Styling with CSS