How to Change the Bullet Color in an HTML Unordered List

Save

Normally when you create an unordered list in HTML, the bullets and text both adopt the same color as the text on the page. If you want to specify a different color for the bullets in an unordered list in your HTML page, you can implement a string of CSS code into the HTML to specify the color of the bullets in the list as well as the text in the list.

  • Open the HTML document you wish to change the bullet color of an unordered list using a text editor or HTML editor.

  • Add the following code between the "<head>" and "</head>" tags on the page:

    <style type="text/css"></style>

  • Add the following code between the opening and closing "<style>" tags you just inserted into the document:

    ul#colored-bullets li

    {

    color:#FF0000;

    }

    ul#colored-bullets li span

    {

    color:#000000;

    }

    Change "#FF0000" to the HTML hexadecimal color code that you want to change the bullets in an unordered list to. Change "#000000" to the HTML color code or hexadecimal color code of the text portion of the list. If you do not want the text to change colors specify the same color as the other text on the page (the default is "#000000").

  • Add the following code into the page where you want the unordered list to appear:

    <ul id="colored-bullets">

    </ul>

    By specifying the "colored-bullets" ID for the unordered list, other unordered lists in your page are not affected. Add the "colored-bullets" ID to any unordered lists you want to change the bullet colors for.

  • Add the following code for each bullet you want to appear in the list, between the "<ul>" opening and closing tags:

    <li><span>Bullet Text</li>

    This creates a bullet in the list. Replace "Bullet Text" with the text of the bullet. Continue adding the above code for as many bullets as you wish to appear in the list.

  • Save the file and upload it to your server.

Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!