How to Make Asterisks a Different Color in HTML
Asterisks call your attention to information on a Web page. You can use asterisks with text or to create bullets within a list. The <LI> tag handles lists in HTML and supports discs, squares and circles. Since asterisks are not supported in bullet lists, you can use a graphic for a colored asterisk instead. If you're not inserting the asterisk in a list, you can format it as text on a Web page and color it in your HTML code.
Other People Are Reading
Instructions
-
Image Required
-
1
Open the HTML file you want to modify in a text editor, such as Notepad, Textpad or EditPad.
-
2
Add the following code between the <HEAD> tag to create a style for the asterisk image. Replace "myAsterisk.gif" with the name of the colored asterisk graphic.
<style type="text/css">
<!--
li {
text-indent: 5px;
list-style-position:outside;
list-style-image:URL('myAsterisk.gif');
}
-->
</style>
-
-
3
Add the following code after the <BODY> tag where the bulleted list goes:
<ul>
<li>My first line</li>
<li>My second line</li>
</ul>
No Image Required: Option One
-
4
Open the HTML file you want to modify in a text editor, such as Notepad, Textpad or EditPad.
-
5
Add the following code between the <HEAD> tag to create a style for the asterisk image. Replace "red" with the correct color you want to apply:
<style type="text/css">
<!--
.myColor { color:red; }
-->
</style>
-
6
Add the following code between the <BODY> tag where the colored asterisk appears:
<span class="myColor">*</span>
No Image Required: Option Two
-
7
Open the HTML file you want to modify.
-
8
Scroll to the <BODY> tag where the asterisk will go.
-
9
Add the following code to color the asterisk red. To use a different color, replace "red" with the color you want to use:
<span style="color:red;">*</span>
-
1
References
- Photo Credit Hemera Technologies/Photos.com/Getty Images
