In Quarto, how do I write inline CSS?

Question

I would like to color a word in a sentence that is being rendered in quarto to HTML. In R Markdown I would just add a css tag but I don't see how to do that in quarto. The quarto documentation says that it is possible to write inline css but there is no example. There is a hyperlink that shows a R Markdown example:

```{css, echo=FALSE}
body {
  color: red;
}
```

When I do that, quarto displays the code as a code block and does not use the CSS.

How do I add a CSS code block to a quarto document?

Answer 1

Just surround the word you want to style by [] and write the styles in {}, like this

the color is [red]{style="color: red;"}

so the word red will be in the color red.

To add more details,

---
title: "inline style"
format: html
---

## inline style in Quarto

We can apply styles to a sentence or a word 
by creating spans using `[]` to surround the
sentence or word that we want to style and 
use `{}` to define the style that we want to 
apply. For example,

The color of this word is [red]{style="color: red;"}. 
And [this line has a yellow background]{style="background-color: yellow"}.

After rendering, we get this,