title: Different link color on different html pages using the same css doc
body: <p>I'm fairly new to programming, so I apologize for what is, I'm sure, a relatively simple question.</p>
  
  <p>I'm looking for an efficient way to make the link color within the <code>&lt;a&gt;</code> tags of each html page different (i.e. one page will have green links, while another will have blue links) without having to add <code>class="green"</code> or <code>class="blue"</code> to every single <code>&lt;a&gt;</code> tag.</p>
  
  <p>I understand that I could have separate css documents for each page, but I'd like to keep the whole site on one css page, so I don't have to update each style sheet separately when I want to make overarching changes.</p>
  
  <p>Is there a way of defining the style rules in the <code>&lt;a&gt;</code> tags in relation to the class of a higher tag? For example, would it be possible to say</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="page1content"&gt;
  &lt;p&gt;text here 
  &lt;a href="someurl.com"&gt; link here &lt;/a&gt; 
  more text 
  &lt;a href="secondurl.com"&gt; second link&lt;/p&gt; 
  &lt;/div&gt;
  
  &lt;div class="footer"&gt;
  &lt;p&gt;even more text
  &lt;a href="thirdurl.com"&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and then define the first two <code>&lt;a&gt;</code> tags (without affecting the third <code>&lt;a&gt;</code> tag) in relation to the <code>&lt;div class="page1content"&gt;</code>? I'd then replace that with <code>&lt;div class="page2"&gt;</code>, <code>&lt;div class="page3"&gt;</code>, etc. for each page.</p>
  
  <p>The only other thing I could think of was to try using JavaScript, which I'm not too familiar.
  I tried inserting</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var myObj = document.getElementsByTagName("a");
  myObj.style.color="green";
  &lt;/script&gt;
  </code></pre>
  
  <p>into a given page, hoping that it would make the text color within all the <code>&lt;a&gt;</code> tags on that page green, but it didn't seem to work.</p>
  
  <p>By way of comparison, I also tested my JavaScript by changing the "a" to a "p" as follows:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var myObj = document.getElementsByTagName("p");
  myObj.style.color="green";
  &lt;/script&gt;
  </code></pre>
  
  <p>in the hope that this would turn all my <code>&lt;p&gt;</code> text green, but that didn't work either, so clearly I miscoded the JavaScript, for starters. </p>
  
  <p>Any thoughts on how to alter multiple <code>&lt;a&gt;</code> tags on a given page at once (without putting a class inside the tag) would be greatly appreciated. </p>
  
  <p>Thanks!</p>