Modifier la couleur des puces dans une liste

Voici une astuce pour égayer vos listes. Je vous rappelle que les puces sont les petits ronds (ou carrés) devant chaque élément d'une liste.

Lorsque vous faîtes une liste avec puce :

• puce 1
  
• puce 2
  
• puce 3

En mode html, cette liste apparaîtra ainsi

<ul>
    <li>puce 1</li>
    <li>puce 2</li>
    <li>puce 3</li>
</ul>

Pour mettre une puce de même couleur sur toutes les lignes

Vous allez rajouter ce qui est en rouge

<ul style="color:#ff0000;">
    <li>puce 1</li>
    <li>puce 2</li>
    <li>puce 3</li>
</ul>

ce qui donne

• puce 1
  
• puce 2
  
• puce 3
  

Vous constatez que les écrits ont aussi changé de couleur.

Si vous désirez remettre les écrits dans la couleur d'origine, vous rajoutez ce qui est en bleu

<ul style="color:ff0000;">
    <li><font color="#000033">puce 1</font></li>
    <li><font color="#000066">puce 2</font></li>
    <li><font color="#000099">puce 3</font></li>
</ul>

et vous obtenez

• puce 1
  
• puce 2
  
• puce 3
  

Pour une mettre une puce de couleur différente à chaque ligne
Vous rajoutez ce qui est en vert

<ul style="color: ff0000;">
    <li ><font color="#000000">puce 1</font></li></ul>
<ul style="color: ffff00;">
    <li ><font color="#ff0000">puce 2</font></li></ul>
<ul style="color: ffffff;">
    <li "><font color="#ffff00">puce 3</font></li></ul>

ce qui donne

• puce 1
  

• puce 2
  

• puce 3