6.1 Apply custom CSS

We strongly recommend that you learn some CSS and JavaScript if you wish to customize the appearance of HTML documents. The Appendix B of the blogdown book [blogdown2017] contains short tutorials on HTML, CSS, and JavaScript.

For beginners, it is extremely important to understand selectors and precedence of rules in CSS, otherwise you may be confused why your custom CSS rules do not work as expected (they may not have enough precedence).

To include one or multiple custom stylesheets in an Rmd document, you can use the css option, e.g.,

output:
  html_document:
    css: "style.css"
    # or multiple sheets in an array
    # css: ["style-1.css", "style-2.css"]

Alternatively, you can use a css code chunk to embed the CSS rules directly in your Rmd document, e.g.,

We embed a `css` code chunk here.

```{css, echo=FALSE}
p {
  font-size: 32px;
}
```

The chunk option echo = FALSE means the CSS code will not be displayed verbatim in the output, but a <style> tag containing the CSS code will be generated to the HTML output file.