title: How to use dynamic CSS
body: <p>I'm working on a footer generator which looks like this :</p>
  
  <p><a href="https://i.stack.imgur.com/porcl.png" rel="nofollow"><img src="https://i.stack.imgur.com/porcl.png" alt="enter image description here"></a></p>
  
  <p>When people fill in the data it generates the code and a preview image of what its gonna look like.</p>
  
  <p><a href="https://i.stack.imgur.com/Z27u7.png" rel="nofollow"><img src="https://i.stack.imgur.com/Z27u7.png" alt="enter image description here"></a></p>
  
  <p>For now it only works with the trademark and company name. What i am trying to achieve here is when people fill the field "your color" with some color value, I would like it to change the background color of the preview with the entered color. What is the best way to achieve this. Eventually i would like the entered value to be displayed.
  I'm not asking for code just a point in the right direction.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" type="text/css" href="resources/style.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="#"&gt;Footer Generator&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;!-- Customize your footer and submit --&gt;
          &lt;div id="container"&gt;
  
          &lt;form class ="form" method="post"&gt;
  
              &lt;h3&gt;Select your trademark&lt;/h3&gt;
  
                  &lt;select class="form-control" name="trademark" action=""&gt;
  
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option&gt;©&lt;/option&gt;
                      &lt;option&gt;™&lt;/option&gt;
                      &lt;option&gt;®&lt;/option&gt;
  
                  &lt;/select&gt;
  
              &lt;h3&gt;Your company name&lt;/h3&gt;
  
                  &lt;input class="form-control" type="text" name="companyName" placeholder="Your company name" /&gt;
  
                  &lt;h3&gt;Your Color&lt;/h3&gt;
  
                  &lt;input class="form-control" type="text" name="customColor" placeholder="Type in the value of your color e.g #ffffff" /&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt;
  
                  &lt;button class="form-control" type= "submit" name= "submit"&gt;Generate&lt;/button&gt;
          &lt;/form&gt;
  
          &lt;!-- Shows raw code on click --&gt;
  
  
  
  
  
          &lt;!-- script for the preview image --&gt;
  
  &lt;?php
  
  function footerPreview ()
  {
  echo "&lt;h3&gt;Preview:&lt;/h3&gt;";
  date_default_timezone_set('UTC');
  $trademark = $_POST["trademark"];
  $company = $_POST["companyName"];       
  $date = date("Y");          
  echo "&lt;div id='footer_date'&gt;$trademark $date $company &lt;/div&gt;";
  }
  
  
  // generate result for the head
  function rawHead()
  {
  $head = htmlspecialchars('&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet"&gt;
  &lt;/head&gt;',ENT_QUOTES);
  echo "&lt;pre&gt;&lt;h4&gt;Put this code inside your head tags&lt;/h4&gt;$head&lt;/pre&gt;";
  }
  
  
  
  // generate result for the body
  function rawBody ()
  {
  $body1of5 = htmlspecialchars('&lt;div id="footer_date"&gt;',ENT_QUOTES);
  $body2of5 = $_POST["trademark"];
  $body3of5 = date("Y");          
  $body4of5 = $_POST["companyName"];
  $body5of5 = htmlspecialchars('&lt;/div&gt;',ENT_QUOTES);
  echo "&lt;pre&gt;&lt;h4&gt;Put this code inside your body tags&lt;/h4&gt;$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 &lt;/pre&gt;";
  }
  
  // generate result for the CSS
  function rawCSS () 
  {
  $theCSS = htmlspecialchars('color:#ffffff;
  width:100%;
  background-color:rgba(0, 0, 0, 0.6);
  text-align:center;
  padding-top:15px;
  height:50px;
  font-family: "Raleway", sans-serif;
  position:fixed;
  right: 0;
  bottom: 0;
  left: 0;',ENT_QUOTES);
  echo "&lt;pre&gt;&lt;h4&gt;Put this code in your websites stylesheet&lt;/h4&gt;$theCSS&lt;/pre&gt;";
  }
  
      // Generate everything
  
      if(isset($_POST['submit']))
  
      {
          footerPreview();
          rawHead();
          rawBody();
          rawCSS();
      } 
  
  ?&gt;
  
  
  &lt;/div&gt;
  
  &lt;div id="generated_footer_date"&gt; © 2016 Footer Generator &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>