7.1 Apply custom CSS

We strongly recommend that you learn some CSS and JavaScript if you wish to customize the appearance of HTML documents. Appendix B of the blogdown book (Xie, Hill, and Thomas 2017) 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.,

  1. output:
  2.   html_document:
  3.     css: "style.css"

To include multiple stylesheets, you may list them in brackets, e.g.,

  1. output:
  2.   html_document:
  3.     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.,

  1. We embed a `css` code chunk here.
  3. ```{css, echo=FALSE}
  4. p {
  5.   font-size: 32px;
  6. }
  7. ```

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.

References

Xie, Yihui, Alison Presmanes Hill, and Amber Thomas. 2017. Blogdown: Creating Websites with R Markdown. Boca Raton, Florida: Chapman; Hall/CRC. https://github.com/rstudio/blogdown.