How can I target specific slides with custom CSS in ioslide presentation?

Question

Reading this introductory text, I thought it is straightforward to color the body or bullet points on a specific slide green. I created my own css file containing the following lines:

body p {
 font-size: 24px;
 font-family: Frutiger Light;
 color: orange;
}

li {
 font-family: Frutiger Light;
 font-size: 20px;
 color: green;
}

.change {
 color: green;
}

and referred to the css-class change by adding {.change} to my header in the rmarkdown file. However, this is completely ignored. I am lost and would very much appreciate a hint in how to solve this.

Here is a simple reproducible example. Please make sure that the css is located in the same folder than the rmd.

Answer 1

This really depends on what exactly would you like to style. The ioslides manage the "content"** of each slide with an <article> that is given an id with the name of the slide. For example, if you do in your R Markdown file:

## Introduction

* Bullet 1
* Bullet 2

This will (after knit) render into a html similar to:

<hgroup> <h2>Introduction</h2> </hgroup>
<article  id="introduction">
<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
</ul>
</article>

This means you can use your .css to target the <li> bullets on that slide like so - very silly example, but you immediately see if you got it right (proper doc on this here):

#introduction ul li {
    font-size: 50px;
}

** I said content there vaguely, as the management of the entire <slide> is done via classes such as "current" which is variable and makes it more difficult to target a specific slide

EDIT: If you really want, you can also include the css directly in the .Rmd, using the example above you could do in your .Rmd:

<style type="text/css">
#introduction ul li {
  font-size: 50px;
} 
</style>

## Introduction

* Bullet 1
* Bullet 2