title: How to Style Each Symbol in Header
body: <p>I'm playing around with styling symbols and want to try to style this header by giving each of the dots between the letters the colors of the actual FRIENDS logo. I wanted to know what would be the best way to do this. Can symbol colors be changed in HTML? If yes, is making <code>p</code> tags with different ID's the only way to style the dots? Here is the header: </p>
  
  <pre><code>&lt;header&gt; F&amp;#8226;R&amp;#8226;I&amp;#8226;E&amp;#8226;N&amp;#8226;D&amp;#8226;S &lt;/header&gt;
  </code></pre>
  
  <p><strong>Note:</strong> I would only like to use HTML and CSS to do this not Javascript or JQuery</p>