Adding Custom CSS Tags to an Rmarkdown HTML Document

Adding styles to R Markdown File

Thanks to @JasonAizkalns , figured it out.

---
title: "Test Page"
output:
html_document:
theme: journal
---

With the options as following for theme :

"default", "cerulean", "journal", "flatly", "readable", "spacelab", "united", "cosmo"

R markdown: how to change style with internal css?

Markdown accepts raw HTML and passes it through unaltered, so define your "styled" elements as HTML:

<h2 style="color: red;">Header 1</h2>

Of course, some tools don't actually allow the raw HTML to be passed through (for security reasons or because the final output is not HTML), so your mileage may vary.

Depending on the Markdown implementation you are using, you may be able to define styles in the attribute list (if it supports arbitrary keys):

## Header 1 {style="color: red;"}

However, that is the least likely to work.

And remember, HTML <style> tags do not need to be in the document <head> to work. If you can use raw HTML, you can include a <style> element in the body of your document (as pointed out by @user5219763 in a comment):

---
title: "test"
output: 
    html_document
---

<style>
    #header1 {
        color: red;
    }
</style>

## Header 1 {#header1}
But how to change style with internal css?

How to customize a paragraph with css in RMarkdown

Level 2 headings are rendered as h2 html elements. To change the color of all of these headings you could do the following, which will change all ## {insert heading} to have a blue font.

h2 {
  color: blue;
}

To change the color of certain headings, you can create them using html tags and give them a class. Then change the style of the class in the CSS.

HTML:

<h2 class="purple-heading">Some heading</h2>

CSS:

.purple-heading {
  color: purple;
}

To style certain paragraphs, wrap them in a <p> tag and give them a class. Then style the class in CSS.

HTML:

<p class="large-p">A long and very large paragraph.</p>

CSS:

.large-p {
  font-size: 96px;
}

Overall markdown file:

---
title: "test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

<style type="text/css">
  body{
  font-size: 14pt;
  font-family: Garamond;
  line-height:1.8;
  }
  
  h2 {
    color: blue;
  }
  .purple-heading {
    color: purple;
  }
  
  .large-p {
    font-size: 96px;
  }
</style>

## H2
<h2 class="purple-heading">Some heading</h2>
some un-styled text

<p class="large-p">A long and very large paragraph.</p>

If you have more than a few things to style (and maybe even if you don't) I recommend separating the html/markdown from the CSS. You can create a .css file and change the YAML header as follows:

---
title: "test"
output: 
  html_document:
    css: your_path.css
---

Styling div from css file in multiple RMarkdown files

The YAML header needs indentation that corresponds to the logical organization. You had

---
title: "Untitled"
output: 
  html_document:
  css: "style.css"
---

but should have

---
title: "Untitled"
output: 
  html_document:
    css: "style.css"
---

with extra indentation for the css: line.

Custom CSS with knitr and markdown in R

This is the method provided by RStudio: http://www.rstudio.com/ide/docs/authoring/markdown_custom_rendering

options(rstudio.markdownToHTML = 
  function(inputFile, outputFile) {      
    require(markdown)
    markdownToHTML(inputFile, outputFile, stylesheet='custom.css')   
  }
)

I've never been able to get that working properly so I do it a little differently:

I do this by creating the standard output file, then dropping the header and css code at the top in R:

tmp <- readLines("your.html") 
tmp <- tmp[-c(1:50)] # or however many lines it is before the css ends
write(tmp,"your.html")

Then I use pandoc to add my own css in a standalone file

system("pandoc -s -S your.html -c your.css -o output.html")

Implementing CSS style for page breaks breaks the tables of contents in R Markdown

I found a hacky solution for this:

Insert:

<div class="page1 pb_after">
 
</div>

Before every header I want a seperate page for.

Adding a table of contents on the left side with HTML document in Rmarkdown

As shown in the code of your first answer, you need to add these in your YAML header, but you need to be careful with the spaces:

title: "cssTest"
    output:
    html_document:
      css: custom.css
      toc: yes

Then, the css file should be an external css file. Out of your Rmd code. Here, it is a file in the same directory than your Rmd file, which is called custom.css.