I want to apply styling to divs in various RMarkdown files using a CSS file. However, I am encountering syntax issues when trying to use the external CSS file to style the div.
Embedding the style tag within the rmarkdown body works as shown below:
---
title: "Untitled"
output:
html_document
---
<style>
div.positive {
background-color: #006B35;
color: #ffffff;
font-size: 16px;
text-align: left;
vertical-align: middle;
padding: 0 10px 80px;
}
div.negative {
background-color: #C83C4D;
color: #ffffff;
font-size: 16px;
text-align: left;
vertical-align: middle;
padding: 0 10px 80px;
}
</style>
<div class="positive">
Green background div
</div>
<div class="negative">
Red background div
</div>
When I remove the inline styles and reference a separate CSS file, the divs are not getting styled as expected, as shown in the following code snippet:
CSS
.positive {
background-color: #006B35;
color: #ffffff;
font-size: 16px;
text-align: left;
vertical-align: middle;
padding: 0 10px 80px;
}
.negative {
background-color: #C83C4D;
color: #ffffff;
font-size: 16px;
text-align: left;
vertical-align: middle;
padding: 0 10px 80px;
}
RMarkdown
---
title: "Untitled"
output:
html_document:
css: "style.css"
---
<style>
div.positive {
}
div.negative {
}
</style>
<div class="positive">
Green background div
</div>
<div class="negative">
Red background div
</div>
The reason for wanting to use a single CSS file is to have a centralized location to modify styles across multiple RMarkdown files easily rather than updating each file individually.
Your assistance with this issue would be highly appreciated.