cssquarto

In Quarto, how do I write inline CSS?


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?


Solution

  • 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,

    quarto-doc-with-inline-css