Referencing the CSS file
Rather than adding styles to each Markdown file within the file, you can create and reference a Cascading Style Sheet (CSS) file each time you create a new file that contains particular styles and fonts.
In this exercise, the styles you've specified have been added to a CSS file called styles.css. You'll reference this file in the YAML header instead of specifying the styles within the Markdown file.
This exercise is part of the course
Reporting with R Markdown
Exercise instructions
- Add a
cssfield to the YAML header after thehtml_documentfield before thetocfield. - List the name of the CSS file,
styles.css, that contains the styles you've specified for the Markdown file.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
{"investment_report.Rmd":"---\ntitle: \"Investment Report for Projects in `r params$country`\"\noutput: \n html_document:\n toc: true\n toc_float: true\ndate: \"`r format(Sys.time(), '%d %B %Y')`\"\nparams:\n country: Brazil\n year_start: 2017-07-01\n year_end: 2018-06-30\n fy: 2018\n---\n\n```{r setup, include = FALSE}\nknitr::opts_chunk$set(fig.align = 'center', echo = TRUE)\n```\n\n```{r data, include = FALSE}\nlibrary(readr)\nlibrary(dplyr)\nlibrary(ggplot2)\n\ninvestment_annual_summary <- read_csv(\"https://assets.datacamp.com/production/repositories/5756/datasets/d0251f26117bbcf0ea96ac276555b9003f4f7372/investment_annual_summary.csv\")\ninvestment_services_projects <- read_csv(\"https://assets.datacamp.com/production/repositories/5756/datasets/bcb2e39ecbe521f4b414a21e35f7b8b5c50aec64/investment_services_projects.csv\")\n```\n\n\n## Datasets \n\n### Investment Annual Summary\nThe `investment_annual_summary` dataset provides a summary of the dollars in millions provided to each region for each fiscal year, from 2012 to 2018.\n```{r investment-annual-summary}\nggplot(investment_annual_summary, aes(x = fiscal_year, y = dollars_in_millions, color = region)) +\n geom_line() +\n labs(\n title = \"Investment Annual Summary\",\n x = \"Fiscal Year\",\n y = \"Dollars in Millions\"\n )\n```\n\n### Investment Projects in `r params$country`\nThe `investment_services_projects` dataset provides information about each investment project from 2012 to 2018. Information listed includes the project name, company name, sector, project status, and investment amounts. Projects that do not have an associated investment amount are excluded from the plot.\n\n```{r country-investment-projects}\ncountry_investment_projects <- investment_services_projects %>%\n filter(country == params$country) \n\nggplot(country_investment_projects, aes(x = date_disclosed, y = total_investment, color = status)) +\n geom_point() +\n labs(\n title = \"Investment Services Projects\",\n x = \"Date Disclosed\",\n y = \"Total IFC Investment in Dollars in Millions\"\n )\n```\n\n### Investment Projects in `r params$country` in `r params$fy`\nThe `investment_services_projects` dataset was filtered below to focus on information about each investment project from the `r params$fy` fiscal year, and is referred to as `country_annual_investment_projects`. Projects that do not have an associated investment amount are excluded from the plot.\n```{r country-annual-investment-projects}\ncountry_annual_investment_projects <- investment_services_projects %>%\n filter(country == params$country,\n date_disclosed >= params$year_start,\n date_disclosed <= params$year_end) \n\nggplot(country_annual_investment_projects, aes(x = date_disclosed, y = total_investment, color = status)) +\n geom_point() +\n labs(\n title = \"Investment Services Projects\",\n x = \"Date Disclosed\",\n y = \"Total IFC Investment in Dollars in Millions\"\n ) \n```\n\n\n","styles.css":"#TOC {\n color: #708090;\n font-family: Calibri;\n font-size: 16px; \n border-color: #708090;\n}\nh1.title {\n color: #F08080;\n background-color: #F5F5F5;\n opacity: 0.6;\n font-family: Calibri;\n font-size: 20px;\n}\nh4.author {\n color: #708090;\n font-family: Calibri;\n background-color: #F5F5F5;\n}\nh4.date {\n color: #708090; \n font-family: Calibri;\n background-color: #F5F5F5;\n}\nbody {\n color: #708090;\n font-family: Calibri;\n background-color: #F5F5F5;\n}\npre {\n color: #708090;\n background-color: #F8F8FF;\n}\n\n\n"}