title: How to set multiple styles to an element with Javascript
body: <p>tried creating a custom div named <code>container</code> and I cannot get the styles to work, in fact the lines 33-39 are prohibiting line 41 from working. I tried everything to get the <code>container</code> div to show up but no luck. Please help, thanks.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html lang="en"&gt;&lt;head&gt;
  &lt;/head&gt; 
  &lt;style&gt;
  body
  {       
      background-repeat:repeat;
      background-color: white;    
  }
  #container
  {       
      position: relative; 
      margin: 0 auto;     
  }
  #p_1
  {
      font-style:italic;
      font-size: 50px;
      font-color: black;
  }
  #p_2
  {
      font-style:italic;
      font-size: 50px;
      font-color: black;
  }
  &lt;/style&gt;
  &lt;script language = "JavaScript"&gt;
  function initialize_container(container)
  {   
      document.getElementById("p_1").innerHTML = "&lt;p&gt; output p1  &lt;/p&gt;";
  
      var CONTAINER_TAG = document.getElementById("container");   
      CONTAINER_TAG.setAttribute("style", "width: 100px;");   
      CONTAINER_TAG.setAttribute("style", "heigth: 100px;");      
      CONTAINER_TAG.setAttribute("style", "border: 2px solid;");  
      CONTAINER_TAG.setAttribute("style", "border-radius: 25px;");    
      CONTAINER_TAG.setAttribute("style", "border-style: solid;");    
      CONTAINER_TAG.setAttribute("style", "border-color: purple;");   
  
      document.getElementById("p_2").innerHTML = "&lt;p&gt;  output p2 &lt;/p&gt;";
  } 
  &lt;/script&gt;
  &lt;body onload = "initialize_container('container')"&gt;
      &lt;div id = "container"&gt;                      
          &lt;p id = "p_1"&gt;&lt;/p&gt;  
          &lt;p id = "p_2"&gt;&lt;/p&gt;  
      &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>