title: override link style inside an html div
body: <p>I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:</p>
  
  <pre><code>A:link {text-decoration: none; color: #FF0000;}
  A:visited {text-decoration: none; color: #FF0000;}
  A:hover {text-decoration: none; color: #FF0000;}
  A:active {text-decoration: none; color: #FF0000;}
  
  #macrosectiontext
  {
      position:relative;
      font:Arial, sans-serif;
      text-align:center;
      font-size:50px;
      font-style: bold;
      margin-top:245px;
      opacity: 0.6;
      background-color:transparent;
  }
  
  #macrosectiontext A:link {text-decoration: none; color: #000000;}
  #macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
  #macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
  #macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
  </code></pre>
  
  <p>and I use the div like this:</p>
  
  <pre><code>&lt;div id="macrosectiontext"&gt;&lt;a href="www.google.it"&gt;bla bla bla&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>however it seems that it doesn't work. The div still inherits the global link style.</p>