Use Font Color Tags in HTML

The HTML font tag is now obsolete, and professional web developers should avoid using it.[1] While it is an easy way to change font color for personal projects, there is no guarantee that it will continue to work as browsers update. For best results, use the CSS method at the end of this article.

Steps

Sample HTML Code

Doc:HTML Font Color Code

Using HTML Tags

  1. Create the font tag. Place a <font> tag in front of the text you'd like in color. Close it with a </font> tag after the text.
    • Example:
      <font>I plan to make this text blue.</font>
  2. Add the color attribute. Insert color=" " inside the opening font tag. The color you want will go inside the quotation marks.
    • Example:
      <font>color=" "I plan to make this text blue.</font>
  3. Choose a color name. Color names are always one word, with no spaces. Try a simple name like "blue" or "red", or a descriptive name like "lightblue" or "darkblue". For more options, look up the list of recognized color keywords, which includes "maroon", "steelblue", and "lime".[2]
    • Example:
      <font color="blue">I plan to make this text blue.</font>
  4. Use a hex color code instead. HTML allows you to choose from millions of colors, but it doesn't have a name for every one. Instead, it uses a six-digit code written in a number system called Understand-Hexadecimal. There are many websites that list hex color codes, or that let you pick a color on screen and tells you the hex value. The code begins with the symbol # and has six digits using the numbers 0-9 or the letters A-F.
    • <font color="FF0000">The code #FF0000 is the same as the color name red.</font>
    • <font color="00FF00">This code produces green text.</font>
    • <font color="0000FF">This code makes blue text.</font>
  5. Play with RGB values. You don't need to know how hex color codes work to use an online color picker. If you'd like to experiment, however, start with the basics:
    • Each six digit code is divided into red, green, and blue values ("RGB"). For example, the code #FF0000 really means "red: FF green: 00 blue: 00."
    • To change the amount of red, change the first two digits. You can use anything from 00 (no red at all) to 99 (some red) or the letters AA (a little more red) through FF (maximum red).
    • Use the same system to change the green value (middle two digits) or blue value (last two digits).
  6. Understand the hex color code in depth. For more precise color selection, you'll need to know two more concepts:
    • Each of the three color values is a two digit number. To make small adjustments, just change the second digit. For example, #850000 and #890000 are very similar, but #A50000 is much brighter.
    • The RGB values combine using the Mix-Colors. Red and green make yellow; blue and green make cyan; and red and blue make magenta.[3]

Using In-Line CSS

  1. Insert the style attribute into an HTML tag. The attribute style=" " allows you to use CSS inside an HML document. This is an easy way to set font color even if you don't know CSS. Try putting the style attribute inside one of these HTML tags:
    • <p style=" ">The p tag surrounds a whole paragraph of text.</p>
    • <a style=" " href="https://www.wikihow.com">The a tag surrounds a link.</a>
    • <span style=" ">Use the span tag if you want to color part of a paragraph without changing the formatting.</span>
  2. Specify the color. Insert color: followed by a color name or hex code inside the quotation marks.[4] For detailed information on color names and codes, see the method above or try these examples:
    • <span style="color:red">This makes red text.</span>
    • <span style="color:#556B2F">This is the color code for dark olive green.</span>
    • <span style="color:#745">CSS supports shortened 3-digit color codes. The code 745 is short for 774455.</span>
  3. Use CSS classes for styles you use often. If you want to style every photo caption or chapter title on a large web page, you don't need to type in the full code every time. Instead, define a CSS class in the head of the document, so you can refer to it with a shorthand every time you want to use that style.[4] Here's an example which demonstrates a couple new uses of the style attribute:
    • In the <head>section of your HTML document, paste the following code:
      <style type="text/css">
      .fancy {
      font-family: Cursive;
      color: darkgreen;
      font-size:150%;
      }
      </style>
    • In the body of the same document, use the attribute class="fancy" to add this style to an element. For example <p class="fancy">this paragraph</p> would show up as dark green, large text in cursive font.
    • Note that you can use any word instead of "fancy" to describe a style.

Tips

  • Try to make your page easy to read. Bright colors are hard to read on a white background, and dark colors are hard to read on a black background.
  • Old computer displays are limited to about 65,000 colors, and very old displays are limited to 256. However, over 99% of internet users will be able to see any color you specify.[5]

Warnings

  • The font element is not supported in XHTML 1.0 Strict DTD.

Related Articles

Sources and Citations

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
  2. ↑ https://www.w3.org/TR/SVG/types.html#ColorKeywords
  3. ↑ http://hyperphysics.phy-astr.gsu.edu/hbase/vision/addcol.html
  4. ↑ 4.0 4.1 https://www.w3.org/TR/REC-html40/present/styles#h-14.2.2
  5. ↑ http://www.w3schools.com/browsers/browsers_display.asp
Retrieved from "https://kipkis.com/index.php?title=Use_Font_Color_Tags_in_HTML&oldid=266119"