Change Text Color in HTML

While you can change text color using the tag in HTML, this method is no longer supported in HTML5. Instead, you'll use basic CSS to define what color the text will appear in various elements on your page. Using CSS will ensure that your web page is compatible with every possible browser.

Steps

Using CSS

  1. Open your HTML file. The best way to change the color of your text is by using CSS. The old HTML </kbd> attribute is no longer supported in HTML5. The preferred method is to use CSS to define the style of your elements.
    • This method will also work with external stylesheets (separate CSS files). The examples below are for an HTML file using an internal stylesheet.
    </li>
  2. Place your cursor inside the <head> tag. You'll be defining your styles inside this tag if you're using an internal stylesheet.
  3. Type <style> to create an internal stylesheet. When the <style> tag is in the <head> tag, the CSS inside the <style> tag will be applied to any applicable elements on that page. When you're finished, the beginning of your HTML file should look something like this:[1]
  4. Type the element you want to change the text color for. You'll be using the <style> section to define the look of the different elements on your page. So for example, to change the style of all the body text on your page, type the following:
  5. Type the color: attribute into the element selector. The color: attribute will tell the page what text color to use for that element. In this example, it will change the text color of all body text, which is the default element for all text on your page:
  6. Type in a color for the text. There are three ways you can enter a color: the name, the hex value, or the RGB value. For example, for the color blue you could type blue, rgb(0, 0, 255), or #0000FF.
  7. Add other selectors to change the color of various elements. You can use the different selectors to change the color of your text for different parts of the page:
  8. Define a CSS class instead of changing an element. You can define a class and then apply it to any element you'd like throughout the page to instantly add the class style. For example, in the following file the ".redtext" class will make any element it's applied to use red text:
    9. </ol>

    Using Inline Style Attributes

    1. Open your HTML file. You can use inline style attributes to change the style of a single element on your page. This can be useful for one or two quick changes to the style, but is not recommended for widespread use. For comprehensive style changes, use the previous method.[2]
    2. Find the element in the file that you want to change. You can use inline style attributes to change the text color of any of your elements. For example, if you want to change the text color of a specific header, find it in your file:
    3. Add the style attribute to the element. Type style="" inside the opening tag for the element you want to change:
    4. Type the color: attribute inside the "". For example:
    5. Type the color you want to change the text to. There are three ways you can express a color. You can type the name of the color, you can enter the RGB value, or you can enter the hex value. For example, to change the color to yellow, you could type yellow;, rgb(255,255,0);, or #FFFF00;:

    Tips

    • You can see a list of supported color names and their hex values at http://www.w3schools.com/colors/colors_names.asp

    Related Articles

    Sources and Citations

    1. ↑ http://www.htmlgoodies.com/tutorials/colors/article.php/3479011
    2. ↑ http://www.w3schools.com/css/css_howto.asp

Retrieved from "https://kipkis.com/index.php?title=Change_Text_Color_in_HTML&oldid=308901"