<strong>Updated</strong>: February 16, 2022. How many times have you opened a website just to find yourself immediately closing it due to terrible visuals? Too many. As a developer, it’s your responsibility to make your apps easy to look at. In this article, you’ll learn how to use CSS to style your R Shiny dashboards. CSS is a powerful tool for enhancing your R Shiny apps, and it’s also pretty easy to learn. The hardest part is coming up with amazing UI designs, so that’s where you’ll spend most of your time. <blockquote>Are you a CSS power user? Read this article to learn how to use SASS in your R Shiny apps.</blockquote> Table of contents: <ul><li><a href="#what-is-css">What is CSS and Why Should You Care as an R Shiny Developer?</a></li><li><a href="#why-css">Why use CSS? Before and After Comparison</a></li><li><a href="#how-to-use-css-in-r-shiny">How to use CSS in R Shiny?</a></li><li><a href="#conclusion">Conclusion</a></li></ul> Want to learn more about CSS in Shiny and you prefer video? You’re in luck: <iframe title="YouTube video player" src="https://www.youtube.com/embed/nl0LBU9qbuc" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <hr /> <h2 id="what-is-css">What is CSS and Why Should You Care as an R Shiny Developer?</h2> CSS stands for <em>Cascading Style Sheets</em>. It describes how HTML elements should be displayed on a website or a web application. Every CSS document (either in a separate <code>.css</code> file or embedded in the head element of an HTML document) is a series of instructions - or statements. Every CSS statement consists of two parts – selectors for the elements, and their respective set of rules. The part outside of the bracket indicates which elements will be affected, and the part inside of the bracket enumerates the rules that will be applied. The concept is best summarized in the following image: <img class="size-full wp-image-12186" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022faaae8a26201c306f7_how-css-works.gif" alt="Image 1 - How CSS works" width="619" height="323" /> Image 1 - How CSS works The biggest benefit of using CSS is that you can write a set of rules once and apply it to multiple HTML documents. For example, in <em>Image 1</em> you’ve seen an element <code>.vestColor</code>. You can add a class attribute <code>.vestColor</code> to any HTML tag in any HTML document and the same styles will apply, as long as you’ve added a link to that CSS document. <em>Easy, right?</em> Right. Frontend developers aren’t the only IT professionals who should care about CSS. Every R Shiny developer should know the basics of CSS/SCSS too. Nobody wants to use an unstyled dashboard - it’s a terrible experience for your users. Make sure to use CSS wisely to highlight the elements you want, structure the application, and also make it mobile-friendly. <h2 id="why-css">Why use CSS? Before and After Comparison</h2> You now know what CSS is and why it’s important in R Shiny dashboards and apps. But what about real-world examples? We’ll show you the difference between a dashboard with and without CSS stylings. Here’s a dashboard of choice - our <a href="https://demo.appsilon.com/apps/shiny-enterprise-demo/">Shiny Enterprise Demo Dashboard</a> - first without CSS: <img class="size-full wp-image-12192" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022fa2eaf7ba211b05313_shiny-enterprise-demo-dashboard-without-css.webp" alt="Image 2 - Shiny Enterprise Demo Dashboard without CSS" width="2994" height="2216" /> Image 2 - Shiny Enterprise Demo Dashboard without CSS The charts look okay, but only because they’re styled and configured in a separate R file, and not in CSS. The other elements, such as dropdowns, text, and icons look horrible. Adding stylings helps drastically: <img class="size-full wp-image-12190" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022fb952f213de6d541af_shiny-enterprise-demo-dashboard-with-css.webp" alt="Image 3 - Shiny Enterprise Demo Dashboard with CSS" width="2994" height="2216" /> Image 3 - Shiny Enterprise Demo Dashboard with CSS We ensure you - it’s the same dashboard. Clearly, CSS allows us to build much more visually appealing products. CSS is as old as HTML itself but it still remains highly useful, introduces order into the development process, and saves time. <h2 id="how-to-use-css-in-r-shiny">How to use CSS in R Shiny?</h2> The question now remains - How can I add CSS to my R Shiny dashboards? There are currently three ways you can add CSS to your Shiny apps: <ol><li>Add stylings directly to HTML tags</li><li>Add CSS to HTML header</li><li>Add stylesheets to the <code>www</code> directory</li></ol> The last option is preferred - You should always add CSS files into a www directory when building R Shiny apps. However, the two remaining methods can be useful in certain situations and it can’t hurt to know them, both for personal projects and when reviewing the work of other developers. <h3>1. Add stylings directly to HTML tags</h3> <script src="https://gist.github.com/darioappsilon/7931dc664144ecf1a0706691c1e7e7cd.js"></script> This approach works but there are two downsides. First, it’s easy to lose track of CSS styles in large projects with a lot of code. Second, you can’t reuse them for different objects. If you plan to use the element more than once, you’ll have to repeat the styling. <h3>2. Add CSS to HTML header</h3> <script src="https://gist.github.com/darioappsilon/30cfba49ccd3ec5209afd484eb22adf1.js"></script> A slight improvement over the first approach, but not the optimal solution. You’re defining styles outside of the actual HTML elements. However, since you are still doing it in the code and not using a separate file, you cannot use cache and optimize the app. Therefore, you are still missing some of the options that make CSS particularly useful. <h3>3. Add stylesheets to the www directory</h3> <script src="https://gist.github.com/darioappsilon/9fd6424c55d1b9ded5471ba9fc3480b2.js"></script> Using a separate file for the style makes the code cleaner. It provides a separate place for all the rules, and also facilitates code reuse and caching. Using multiple files allows us to add structure to the styling process. <hr /> <h2 id="conclusion">Conclusion</h2> Long story short - you should be proficient in CSS if you want to develop production-ready R Shiny applications and dashboards. This article wasn’t a go-to guide on CSS, but rather a simple rundown on how to use CSS in R Shiny. There are three ways to do it, but the last one is preferred by R professionals. <em>What’s your preferred way to write CSS in R Shiny apps? Plain CSS or SASS?</em> Let us know in the comment section below. <h2>Follow Us for More</h2><ul><li>Follow @Appsilon on <a href="https://twitter.com/appsilon">Twitter</a></li><li>Follow Appsilon on <a href="https://www.linkedin.com/company/appsilon">LinkedIn</a></li><li>Try out our R Shiny <a href="https://appsilon.com/opensource/">open source</a> packages</li></ul>