How to Change the Background Color of Bullets With HTML

Written by natalie smith
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Change the Background Color of Bullets With HTML
CSS adds colour and special effects to HTML. (Thomas Northcut/Photodisc/Getty Images)

HTML is the language that forms the basic structures of websites. Items like tables, columns, headings and subheadings, text, lists and images are all added in with HTML. CSS is a language that works with HTML to add style to the elements, such as colour, underlining, size, and decorations such as borders and text styles. You can create a bulleted list with HTML, but you must use CSS along with HTML to add the colour.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Open your HTML file by selecting "File" and "Open" in Notepad, and choosing the appropriate HTML file. Add span tags to your HTML list. For instance, if your list looks like this:

    <ul>

    &lt;li&gt;Shoes&lt;/li&gt;
    
    &lt;li&gt;Socks&lt;/li&gt;
    

    </ul>

    Add span tags to the list items:

    <ul>

    &lt;li&gt;&lt;span&gt;Shoes&lt;/span&gt;&lt;/li&gt;
    
    &lt;li&gt;&lt;span&gt;Socks&lt;/span&gt;&lt;/li&gt;
    

    </ul>

  2. 2

    Save the HTML file by selecting "File" and "Save As." in the save as menu, pull down the File Type drop-down menu and select "All file types." In the file name field, type the name of the file followed by ".html".

  3. 3

    Open your CSS file by selecting "File" and "Open" in Notepad, and choosing the CSS file. Add the colour properties to your CSS file. For example, if you want your bullet points to be green:

    li {

    colour: green;
    
    }
    

    To change the colour of the text in the bullet points, add an additional rule:

    li span {

    colour: green;

     }
    

    For contrast, use different colours for "li" and "li span."

  4. 4

    Save the CSS file by selecting "File" and "Save As." in the save as menu, pull down the file type drop-down menu and select "All file types." In the file name field, type the name of the file followed by ".css".

Tips and warnings

  • Keep in mind that the file name should not contain spaces or special characters other than a dash or an underscore or the web browser might not read the file.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.