title: Trying to edit a message that is displayed by innerHTML
body: <p>I am trying to edit the welcome message I have for a site using css. I currently have a message that displays if it is the first time a user vists the site and another if they are a repeat user using cookies. I am trying to edit the message div using css. 
  Here is my JavaScript code that picks which message to display using cookies:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function welcomeMessage(){ 
    var visitData = decodeURIComponent(document.cookie);
    if (visitData.length == 0)
     document.getElementById('welcome').innerHTML = "&lt;h4&gt;Welcome back to our website!&lt;/h4&gt;";
    else
     document.getElementById('welcome').innerHTML = "&lt;h4&gt;Welcome to our website. Please browse the site to learn about our services.&lt;/h4&gt;";
    var expiresDate = new Date();
    expiresdate.setFullYear(expiresDate.getFullYear() - 1);
    document.cookie = encodeURIComponent("expires=" + expiresDate.toUTCString());
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have the message displayed like this on the html:</p>
  
  <pre><code>&lt;div id="welcome"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I would like to use css to align the text and possibly more like add a border. For some reason when I try to use a css file to style it won't work on the div.  I don't know if it is because the function uses innerHTML or what. 
  I am new to JavaScript so any advice would be very helpful. Thanks in advance.</p>