How to Change the Background Color of Bullets With HTML
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 color, 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 color.
Other People Are Reading
Instructions
-
-
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>
<li>Shoes</li>
<li>Socks</li>
</ul>
Add span tags to the list items:
<ul>
<li><span>Shoes</span></li>
<li><span>Socks</span></li>
</ul>
-
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
Open your CSS file by selecting "File" and "Open" in Notepad, and choosing the CSS file. Add the color properties to your CSS file. For example, if you want your bullet points to be green:
li {
color: green;
}
To change the color of the text in the bullet points, add an additional rule:
li span {
color: green;
}
For contrast, use different colors for "li" and "li span."
-
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".
-
1
Tips & 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.
References
- Photo Credit Thomas Northcut/Photodisc/Getty Images
More Like This
Comments
-
VERY HELPFUL
