How to Use CSS to Style Your R Shiny Projects

I hope you will give me 7 minutes to convince you why CSS is a good thing, and why you should be using it in your projects. In this post I’ll give you a little overview of CSS and I’ll discuss adding CSS to R Shiny. In my future article I’ll compare SASS and CSS, and I’ll show you how you can use SASS in R.

So, R Shiny provides scalability, fast prototyping, and power, but without CSS, it looks like this:

Source: http://shiny.rstudio.com/gallery/faithful.html

With CSS, it can look like this:

source: https://github.com/leoluyi/ptt_give_dashboard

Are you convinced? Good!  Let’s take a look at the possibilities. So what is CSS? It’s basically as old as HTML itself. But don’t let that scare you. It’s still incredibly useful, time-saving and adds sanity to your developer lifestyle.

CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed (in any media). Every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called statements. Every CSS statement consists of two parts. There is the outside part of the bracket, which is the selector for the elements and a set of rules for the elements. The outside part tells you which elements will be affected, and the inside part tells you the rules that are applied.

One of the best things about CSS is that you can one set of rules that allows you to control the layout of multiple web pages all at once. As long as you keep the pages consistent, you don’t have to re-do any of the stylings.

There are currently 3 main ways you can add css styling to your code:

1. Add styling directly to HTML tags
2. Add CSS to your HTML header
3. Add style sheets with the www directory

But if we are to “cut to the chase,” the best way #3 — add style sheets to your www directory. But I do want you to know about the other options, just in case you run into it, and so that you can judge for yourself which method works best for your projects.

1. Add styling directly to HTML tags… here is an example:

shinyUI(fluidPage(
headerPanel(
h1("New Application",
style = "-weight: 500; color: #4d3a7d;"))
))

The downsides to adding styling directly to HTML tags are the following:  (1) They are easy to lose track of in large projects with a lot of code, and (2)  Impossible to reuse in different objects. If you are using the element in more than one place, you will have to repeat the styling!

2. Add CSS to your HTML header

ui <- shinyUI(semanticPage(
tags$head(
tags$style(HTML("
@import url('my-.url');
h1 {
-weight: 500;
color: #48ca3b;
}

This is a tiny bit better, because you are defining it outside of the actual HTML elements.  But at the same time, because you are still doing it in the code, you are not using a separate file. And because you’re not using a separate file, you cannot cache this and optimize the app. That means you are still missing some of the options that make CSS really good.

3. Add style sheets with the www directory

uui <- shinyUI(semanticPage(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
)
))

Adding a separate file makes the code much cleaner. You have a completely separate place for all of the rules. And you can add more than one file, so you can add a bit of structure to however you want to style your stuff.

Other benefits:  (1) Allows code to be reused; (2) Allows caching. 

I hope you give it a try!  In the next post, I will compare CSS with SASS and show you how to use SASS with R.

You can find me on LinkedIn or just leave a comment below.

Article How to Use CSS to Style Your R Shiny Projects comes from Appsilon Data Science | End­ to­ End Data Science Solutions.