title: tags$style specific modaldialog element in shiny
body: <p>basic syntax question I think, but i'm stuck on it. 
  I have an app with many elements that I try to style, for instance modalDialogs. 
  How do I make this code specific to only modaldialog 1, and not apply to modaldialog 2? </p>
  
  <pre><code>tags$head(tags$style(".modal-body {padding: 10px}
                       .modal-content  {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
                       .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
                       .modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
                       .modal { text-align: right; padding-right:10px; padding-top: 24px;}
                       .close { font-size: 16px}"))
  </code></pre>
  
  <p>full demo app: </p>
  
  <pre><code>library(shiny)
  
  ui &lt;- fluidPage(  
    tags$head(tags$style(".modal-body {padding: 10px}
                           .modal-content  {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
                         .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
                         .modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
                         .modal { text-align: right; padding-right:10px; padding-top: 24px;}
                         .close { font-size: 16px}")),
    h5("Hello there"),                                          # First text on the window
    br(),                                                       # empty line
    actionButton(inputId = "ClickonMe", label = "button1"),   # button 1
    actionButton(inputId = "ClickonMe2", label = "button2") # button 2
  )
  
  server &lt;- function(input,output,session) {
  
    observeEvent(input$ClickonMe,{
      showModal(modalDialog(
        inputId = 'Dialog1', 
        title = HTML('&lt;span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif "&gt;Display help popups&lt;span&gt;
                     &lt;button type = "button" class="close" data-dismiss="modal" "&gt;
                     &lt;span style="color:white; "&gt;x &lt;span&gt;
                     &lt;/button&gt; '),
        easyClose = TRUE,
        footer = NULL ))
    })
  
    observeEvent(input$ClickonMe2,{
  
      showModal(modalDialog(
        inputId = 'Dialog2', 
        title = HTML('&lt;span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif "&gt;Display help popups&lt;span&gt;
                     &lt;button type = "button" class="close" data-dismiss="modal" "&gt;
                     &lt;span style="color:white; "&gt;x &lt;span&gt;
                     &lt;/button&gt; '),
        easyClose = TRUE,
        footer = NULL ))
        })
  
  
  }
  
  shinyApp(ui, server)
  </code></pre>
  
  <p>thanks for helping if you can! </p>
  
  <p>Mark</p>