8.6 Custom CSS

You can add your own CSS to a reveal.js presentation using the css option:

---
output:
  revealjs::revealjs_presentation:
    css: styles.css
---

If you want to override the appearance of particular HTML element document-wide, you need to qualify it with the .reveal section preface in your CSS. For example, to change the default text color in paragraphs to blue, you would use:

.reveal section p {
  color: blue;
}

8.6.1 Slide IDs and classes

You can also target specific slides or classes of slice with custom CSS by adding IDs or classes to the slides headers within your document. For example, the following slide header

## Next Steps {#nextsteps .emphasized}

would enable you to apply CSS to all of its content using either of the following CSS selectors:

#nextsteps {
   color: blue;
}

.emphasized {
   font-size: 1.2em;
}

8.6.2 Styling text spans

You can apply classes defined in your CSS file to spans of text by using a span tag. For example:

<span class="emphasized">Pay attention to this!</span>