<!--
  canonical-url: https://www.avonture.be/fr/blog/quarto-inline-style
  published:     2024-04-13
  This is a static plain-Markdown mirror generated at build time.
  Visit the canonical URL above for the fully rendered page, with images and interactive components.
-->

# Style inline avec Quarto

> Appliquez rapidement des styles CSS inline dans Quarto pour vos documents HTML avec la syntaxe []{}. Mettez un texte en évidence instantanément, sans écrire une classe CSS complète.

---
![Style inline avec Quarto](/img/v2/quarto.webp)

**TL;DR**

Cet article présente la syntaxe de span CSS inline de Quarto `[text]{style="..."}`, pratique pour styler rapidement un bout de texte (couleur, fond, etc.) sans définir de classe CSS — sachant qu'elle ne fonctionne qu'en sortie HTML et qu'elle est ignorée silencieusement en Word ou en PDF.

Pas envie de perdre du temps à créer une classe CSS et à comprendre comment l'intégrer dans Quarto juste pour mettre en évidence une partie de votre paragraphe ?

Quarto supporte une syntaxe de *style CSS inline* pour produire des **documents HTML** (cela ne fonctionne pas pour, par exemple, le pdf ou le docx). *Si c'est le contenu lui-même, et pas seulement son style, qui doit varier d'un format à l'autre, voyez [Quarto conditional display](/blog/quarto-conditional-display).*

> **Syntaxe:**
>
> Vous pouvez appliquer des styles à du texte inline en créant des spans : `[]` entoure le texte à styler et `{}` définit le style à appliquer.

Donc, pour afficher un texte comme *rouge* en rouge, la syntaxe Quarto est `[red]{style="color: red;"}`. Le texte entre crochets recevra le style CSS inline spécifié.

```markdown
# 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;"}.
```

Le rendu est correct en HTML :

![html](./images/html.webp)

> [source](https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/posts/11-spans/).

> **Image Docker avec Quarto:**
>
> Si vous n'avez pas encore d'image Docker avec Quarto, lisez cet article [Running Quarto Markdown in Docker](/blog/docker-quarto).

Mais c'est tout simplement ignoré en Word ou en PDF :

![docx](./images/docx.webp)

![pdf](./images/pdf.webp)
