Styling one section with Section block CSS

  • advanced
  • css
  • section
  • block-editor

The Section block has its own CSS box, Block CSS. Rules you write there apply to that one section and the blocks inside it, and nowhere else on the site. It's the quickest way to make a one-off change without editing sitewide Additional CSS.

Open Block CSS

  1. Select the Section. On a busy page, List View makes this easier.
  2. In the sidebar, expand Advanced.
  3. Type your CSS in Block CSS. The editor updates as you type.
  4. Click Update.

The box helps as you type: Tab indents, brackets and quotes close themselves, and Cmd + / (Ctrl + / on Windows) turns the current line into a comment.

Style the section itself

Type properties with no selector or braces, and they apply to the section:

border-radius: 1.5rem;
overflow: hidden;

Style blocks inside the section

Write ordinary CSS rules. Dirigible limits them to this section, so this changes only the headings and links inside it:

h2 {
  color: var(--accent);
}

p a {
  font-weight: 700;
}

Style both with :host

Once the box has any selector in it, use :host to mean the section itself:

:host {
  border-top: 4px solid var(--primary);
}

h2 {
  text-transform: uppercase;
}

Different styles on phones

Media queries work too. Dirigible's tablet layout starts at 768px, so 767px and narrower is phone size:

@media (max-width: 767px) {
  h2 {
    font-size: 1.75rem;
  }
}

Target one block inside the section

Give that block a class under its own Advanced → Additional CSS class(es), such as price-note, then style the class in the Section's Block CSS:

.price-note {
  color: var(--muted);
  font-size: 0.875rem;
}

Your palette and font variables all work here. The full list is in Adding custom CSS with Additional CSS.

Pick the right tool

You want Use
A common tweak: spacing, hide on phones, animate A magic class
The same style on several pages A custom class plus Additional CSS
A change to one section only Block CSS

Things to know

  • Only the Section block has a Block CSS box.
  • Block CSS is saved with the page. Copy the Section to another page and its CSS comes along.
  • If you duplicate a Section that has Block CSS, the copy and the original share it: rules in either one apply to both. To style the copy on its own, clear its Block CSS box or start from a new Section.
  • Don't use :root in Block CSS. Those rules apply to the whole page, not just the section. Use :host for the section itself.
  • To remove the styles, empty the box and update the page.