How to Make Asterisks a Different Color in HTML

Save

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.

Things You'll Need

  • Colored asterisk image file

Image Required

  • Open the HTML file you want to modify in a text editor, such as Notepad, Textpad or EditPad.

  • 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>

  • 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

  • Open the HTML file you want to modify in a text editor, such as Notepad, Textpad or EditPad.

  • 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>

  • Add the following code between the <BODY> tag where the colored asterisk appears:

    <span class="myColor">*</span>

No Image Required: Option Two

  • Open the HTML file you want to modify.

  • Scroll to the <BODY> tag where the asterisk will go.

  • 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>

References

  • Photo Credit Hemera Technologies/Photos.com/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

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