How to Make an Asterisk Red in CSS

Web forms sometimes use red asterisks to indicate a required field, such as “name” or “email address.” To change the formatting of a small piece of text on a Web page, place “<span>” tags around the text and add a class name so you can target it in the stylesheet code. A class like “red” can have the code to change the color of text, including an asterisk. Once you write the CSS code for the “red” class, you can reuse the same span code again and again, as needed.

Instructions

1. Open your HTML file in Notepad or a code editor. Find your asterisk in the page code. If the asterisk is part of a Web form, you will most likely find it next to an “<input>” tag, sometimes within “<label>” tags.

2. Wrap your asterisk in a pair of “<span>” tags. Add a class name of “red” to the tags:

   <span class=”red”>*</span>

   You can do this for as many asterisks as you need to make red.

3. Find the “<style>” tags in the head of your HTML code or add them:

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

4. Write a style rule for the “red” class. Inside the style rule, set the “color” property to “red”:

   <style type=”text/css”>
   .red {
   color: red;
   }
   </style>

   You can also use “#ff0000” instead of “red” if you prefer hexadecimal color codes.

Tips & Warnings

• Back up your Web pages before editing them, in case you make a mistake and cannot track it down.