Author: Theo Boutaris
Date: 2025-11-28

# make_css

#### Theo Boutaris

#### 2025-11-28

In this tutorial we can see how to use `make_css` to create a css file. We can then use this file in our web application (including shiny) or html file. Initially, we can see how to use this function on its own and then the ways we can combine it with shiny.

A simple example of how to use `make_css` would be:

    library(tableHTML)
    mycss <- make_css(list('table', c('text-align', 'font-size'), c('center', '20px')),
                      list('th', c('background-color', 'height'), c('lightgreen', '30px')))
    print(mycss)

    ## table {
    ##   text-align: center;
    ##   font-size: 20px;
    ## }
    ##
    ## th {
    ##   background-color: lightgreen;
    ##   height: 30px;
    ## }

As seen from the above example `make_css` takes an arbitrary number of lists as arguments. The number of lists provided depends on the user and how big the css file will be according to their needs. Each list needs to have a length of three and needs to follow a specific format i.e.:

- The first element of each list will be the selector. If a vector is provided then the selectors will be comma separated.
- The second element of each list will be the style definitions. This can be a vector as well.
- The third element of each list will be the values of the style definitions. This needs to be of the same lenght as the second element.

    #another example
    mycss <- make_css(list(c('table', 'td'), c('text-align', 'font-size'), c('center', '20px')),
                      list('th', c('background-color', 'height'), c('lightgreen', '30px')))
    print(mycss)

    ## table,
    ## td {
    ##   text-align: center;
    ##   font-size: 20px;
    ## }
    ##
    ## th {
    ##   background-color: lightgreen;
    ##   height: 30px;
    ## }

You can use any selector that you would normally use in a css file:

    #adding a special selector
    mycss <- make_css(list('table td', c('text-align', 'font-size'), c('center', '20px')))
    print(mycss)

    ## table td {
    ##   text-align: center;
    ##   font-size: 20px;
    ## }

You can even use selectors like hover using the following way:

    mycss <- make_css(list('table td:hover', 'background-color', 'lightyellow'))
    print(mycss)

    ## table td:hover {
    ##   background-color: lightyellow;
    ## }

And a more complicated example that uses some of the above:

    mycss <- make_css(list(c('.myclass', '.myclass2', '#myid', '.myclass[type="text"]'),
                           c('padding', 'margin-bottom', 'background-color', 'box-shadow'),
                           c('15px', '15px', 'rgba(0,0,0,0.5)', '0 1px 2px #ccc, inset 0 1px 0 #fff')))
    print(mycss)

    ## .myclass,
    ## .myclass2,
    ## #myid,
    ## .myclass[type="text"] {
    ##   padding: 15px;
    ##   margin-bottom: 15px;
    ##   background-color: rgba(0,0,0,0.5);
    ##   box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    ## }

The way we used `make_css` above will create a string of the css. In order to save that to a file we need to use the file argument in the following way:

    make_css(list(c('table', 'td'), c('text-align', 'font-size'), c('center', '20px')),
             list('th', c('background-color', 'height'), c('lightgreen', '30px')),
             file = 'mycss.css')

# make_css and shiny

There are two ways to use `make_css` with shiny.

### Directly in the ui.R

The first one would be directly in the ui.R using `tags$style` (which is what `includeCSS` uses behind the scenes after it loads the file):

    library(shiny)
    #ui.R
    shinyApp(
     ui = fluidPage(
       fluidRow(
        #leave some spacing
        br(),
        tags$style(make_css(list('tr:hover', 'background-color', 'lightyellow'))),
        column(width = 1),
        uiOutput("mytable"))
     ),
     server = function(input, output) {
      output$mytable <- renderUI(
       tableHTML(mtcars, second_headers = list(c(3, 4, 5), c('col1', 'col2', 'col3')))
     )}
    )

### Creating a file and loading it with includeCSS

The second way is the standard way i.e. creating a file with all the css and then loading it in shiny using `includeCSS` in the way it was described in the tableHTML tutorial. As a fast example we create a css file using `make_css`:

    #when working on shiny the css file is best placed in the www/ folder of the shiny app.
    #This will then be read by includeCSS in the normal way.
    #check the above link for more info.
    make_css(list('tr:hover', 'background-color', 'lightyellow'), file = 'www/mycss.css')

    #ui.R
    shinyUI(
     fluidPage(
      fluidRow(
       #leave some spacing
       br(),
       column(width = 1),
       #include css file in shiny
       includeCSS('www/mycss.css'),
       uiOutput("mytable"))
     )
    )

    #server.R
    shinyServer(
    function(input, output) {
       output$mytable <- renderUI(
        tableHTML(mtcars, second_headers = list(c(3, 4, 5), c('col1', 'col2', 'col3')))
       )}
    )

This would complete our tutorial on the `make_css` function!