HTML | Color Attribute - GeeksforGeeks

Trang chủ » Html Notepad Color Codes » HTML | Color Attribute - GeeksforGeeks

Có thể bạn quan tâm

The HTML font color attribute is used to specify the text color within the <font> tag. Although this method is deprecated in HTML5, it’s still important to understand its historical use.

Modern HTML uses CSS for styling purposes, but let’s see how the font color attribute works.

Syntax

<font color="color_name|hex_number|rgb_number">

Attribute Values:

TypeHow It WorksExample Usage
Color NamePick from common color names to set the text color."red"
Hex CodeUse a 6-digit hex code to define specific colors."#0000ff"
RGB CodeDefine colors using the RGB model with three values for red, green, and blue."rgb(0, 153, 0)"

Note: The <font> color attribute is not supported in HTML5. It is recommended to use CSS for setting text colors in modern development.

How to Change Text Color in HTML – Examples

Here are a few examples to help you understand how to set text color using the <font> color attribute:

Example 1: Setting Text Color Using the <font> Color Attribute

In this example, we set the text color of three different elements using the <font> color attribute. We demonstrate the use of a color name, a hex code, and an RGB code to style the text.

HTML <!DOCTYPE html> <html> <head> <title> HTML | <font> color Attribute </title> </head> <body> <font size="6" face="verdana" color="green"> GeeksforGeeks! </font> <br> <font size="6" face="arial" color="#008000"> GeeksforGeeks! </font> <br> <font size="6" color="rgb(128, 128, 0)"> GeeksforGeeks! </font> </body> </html>

Output:

font color html using color attribute

Although the font tag and its attributes are obsolete in HTML5, the above browsers still support them for backward compatibility. However, for modern web development, use CSS to style your text.

Example 2: Setting Text Color Using CSS Classes

In this example, we define CSS classes to set the text color using a color name, a hex code, and an RGB code. The classes are then applied to different <p> elements.

HTML <!DOCTYPE html> <html> <head> <title>Font Color Example with CSS</title> <style> .red-text{ color:red; } .blue-text{ color:#0000ff; } .green-text{ color:rgb(0,153,0); } </style> </head> <body> <p class="red-text"> This text is red using CSS class. </p> <p class="blue-text"> This text is blue using CSS class. </p> <p class="green-text"> This text is green using CSS class. </p> </body> </html>

Output:

Screenshot-2024-06-24-162017

Modern Approach to style font color

While the <font> tag and its color attribute were useful in the past, modern HTML relies on CSS for styling. Understanding the historical context can help when dealing with legacy code, but using CSS is the best practice for current and future web development.

Supported Browsers

The following browsers still support the deprecated <font> tag and its color attribute, allowing the changes in text color to be displayed:

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Note: While these browsers support the <font> tag for backward compatibility, it is strongly recommended to use CSS for styling text in modern web development. CSS offers more flexibility, control, and is future-proof.

HTML Font Color Attribute – FAQs

How can I change the color of text in HTML?

You can style your text using the style attribute or CSS to add a splash of color that suits your design.

What’s a quick way to set the font color using a hex code?

Simply use something like <font color=”#ff0000″>Text</font> in legacy HTML, or opt for modern CSS with style=”color: #ff0000;” for a better approach.

Can I use RGB to style font color in HTML?

Absolutely! RGB lets you mix values for red, green, and blue to create custom colors like rgb(255, 0, 0) for a vibrant red.

How do I switch my font color to white in HTML?

If you’re looking to go bright, set the font color to white using color=”white” in the deprecated <font> tag or through CSS: style=”color: white;”.

Is there an HTML tag to make text red?

Yes, using the outdated <font> tag: <font color=”red”>Red Text</font>, but in modern HTML, CSS is your best friend for styling!

Comment More info Next Article HTML bgcolor Attribute author jit_t Follow Improve

Từ khóa » Html Notepad Color Codes