How to Style Each Symbol in Header

Question

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 p tags with different ID's the only way to style the dots? Here is the header:

<header> F&#8226;R&#8226;I&#8226;E&#8226;N&#8226;D&#8226;S </header>

Note: I would only like to use HTML and CSS to do this not Javascript or JQuery

Answer 1

You can use span tags which have class attributes and according CSS rules for the classes (which can be reused)

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.orange {
  color: orange;
}

.brown {
  color: brown;
}

<header> F<span class="red">&#8226;</span>R<span class="blue">&#8226;</span>I<span class="green">&#8226;</span>E<span class="yellow">&#8226;</span>N<span class="orange">&#8226;</span>D<span class="brown">&#8226;</span>S </header>