Quarto Inline style

Quickly apply inline CSS styles in Quarto for HTML documents using the []{} syntax. Highlight text instantly without writing a full CSS class.

April 13, 2024 · 2 min read

View raw

Christophe

Markdown, WSL and Docker lover ~ Insatiable curious.

Cet article existe aussi en français — lire la version française.

This article is over a year old but was reviewed on July 30, 2026 — the content is still accurate.

This article is part of the Discovering Quarto series:

Quarto Inline style

⚡

TL;DR

This article shows Quarto's inline CSS span syntax [text]{style="..."} for quickly styling a bit of text (color, background, etc.) without defining a CSS class — noting it only renders in HTML output, and is silently ignored in Word or PDF.

Don't want to take the time to create a CSS class and figure out how to integrate it into Quarto to quickly highlight part of your paragraph?

Quarto supports an inline css style syntax for producing HTML documents (not working for, f.i., pdf or docx). If you need the content itself, and not just its styling, to differ between formats, see Quarto conditional display.

Syntax

You can apply styles to inline text by creating spans using [] to surround the text you want to style and {} to define the style you want to apply.

So to put a text like red in red, the syntax for Quarto is [red]{style="color: red;"}. The text enclosed between brackets will get the specified inline CSS style.

# Inline style

To draw attention to a specific part of the text, you might want to make it [red]{style="color: red;"} with a [yellow background]{style="background-color: yellow;"}; [like this]{style="color: red; background-color: yellow;"}.

This is correctly rendered in HTML:

html