Custom stylesheets
1. Custom stylesheets
Wow, your report looks a whole lot different now. But still, the theme that you chose comes from a selection of predefined RMarkdown themes. For your report to become truly unique, you need to refer to custom stylesheets.2. Cascading Style Sheets (CSS): Basic selectors
In the YAML header, you can specify not only preset themes, but refer to another file with the ending (dot) css. CSS stands for Cascading Style Sheets and is the technology that gives every website its colors, font sizes, and many more style specifications. Remember that your RMarkdown is knitted to an HTML file that may start like this – a sequence of HTML tags such as h2 for second level headers, etc. CSS plays well together with HTML. With CSS, you can refer directly to HTML tags, by using so-called selectors, which are, in their most basic form, HTML tag names. Here, we use the h2 selector to alter the font-family of all the second level headers in the document. Make sure that each rule is concluded with a semicolon. We can also specify more than one selector for the same CSS rule, if we want to apply the same rule not only to second, but also first level headers, and all the text in the document, using the body selector. We do that by separating HTML tag selectors with a comma. You can also specify colors, giving the name of the color, or using a HEX-code. Also, you can specify more than one rule per selector, as can be seen in the selector for links, having the a-tag.3. Cascading Style Sheets (CSS): Class selectors
There are also more complicated and advanced selectors than just those referring to HTML tags. Notice that the first strong tag in the HTML example on the left has the CSS class "red". Now, if we only use the basic strong selector, both strong elements will be colored blue. However, we can refer to the first one only, by adding .red to the strong selector. Now, the second strong element will remain blue, but the more specific CSS selector will overwrite the first selector and thus the first strong element will be colored in red.4. Cascading Style Sheets (CSS): Combinators
Here's one last family of helpful CSS selectors, the combinators. HTML elements can be nested, so for example, multiple paragraphs, denoted with the p tag, can be wrapped by a div element. You can use the descendant combinator, where div is followed by a blank and then p, to color all strong elements within the div tag. This will color every text wrapped in a strong tag in green, as long as its wrapped by a div tag. However, you can also specify to only color strong elements that are direct descendants of the div tag using the so-called child combinator, which is denoted by div > strong in this case. This will leave the strong element that is contained within the p tag green, while the one outside the paragraph will change its color to red, because it's a direct child of the div tag. Of course, this is by far not the whole story. There are many more CSS selectors and rules we cannot cover in this course, but they will be helpful once you start customizing your own reports, so make sure to have a look at the good resources over at the Mozilla Developer Network.5. Let's practice!
Let's try out some of these CSS selectors to give your existing report a more unique look.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.