How To Use The Font Tag To Change The Color Of The Text
Description:
The font tag is a popular HTML element that allows web developers to manipulate the appearance of text within a webpage. One of the most common applications of the font tag is changing the color of the text. In this article, we will guide you through the process of using the font tag effectively to modify text color and create visually appealing content.
The <font> tag is an HTML element that was widely used in the past to define the font characteristics of text within a webpage. It allowed web developers to manipulate the appearance of text by specifying attributes such as color, size, face, and more. However, with the evolution of web standards and the introduction of CSS (Cascading Style Sheets), the font tag has been deprecated in HTML5 and is no longer recommended for use. Instead, CSS should be used to style and format text in modern web development.
The syntax of the font tag is straightforward. To change the font color, you would specify the desired color using the color attribute within the font tag. For example:
|
1 |
<font color="red">This text is red.</font> |
In the above example, the text “This text is red.” would be displayed in red color. The color attribute can accept various color values, including named colors, hexadecimal color codes, or RGB values.
While the font tag served its purpose in the past, it has several drawbacks that led to its deprecation. First, it promotes mixing content with presentation, which goes against the principles of separation of concerns in web development. CSS, on the other hand, separates the styling from the content, allowing for easier maintenance and flexibility.
Additionally, using CSS provides more granular control over text styling. With CSS, you can target specific elements, classes, or IDs and apply consistent styles across an entire website. It also allows for more advanced typography features, such as custom fonts, text shadows, and text effects, which were not possible with the font tag alone.
Change Text Color In HTML:
How to use font color. In HTML, the font tag is used to change the color, size, and type of text. To change the color, use the font tag with the color attribute.
|
1 |
<font color="color"> ~ </font> |
How To Specify Colors:
There are two ways to specify colors: English notation and color code. English notation can be specified as it is, such as “red” or “blue”. A color code is a code that specifies the colors displayed on a web page.
It is represented by a 6-digit hexadecimal number following #, and red, blue, and green shades are expressed every two digits.
A hexadecimal number (0 to F) of 0 is the lightest, and the closer to F, the darker the color. For example, white is “#FFFFFF”, black is “#000000”, and olive is “#808000”.
It’s ok if you don’t remember this honestly. Copy and paste the code you want to use in the color code table when you want to use it!
Example: how to set font color using font tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Html and Css Font Size Tutorial</title> </head> <body> <p><font size="5" color="gray">Programming Digest</font></p> <p><font size="6" color="red">Programming Digest</font></p> <p><font size="7" color="blue">Programming Digest</font></p> <p><font size="7">hexadecimal color code:</font></p> <p><font size="5" color="#000000">Programming Digest</font></p> <p><font size="6" color="#808000">Programming Digest</font></p> <p><font size="7" color="#ff9990">Programming Digest</font></p> </body> </html> |
Important Point:
You can change the color of the text using the font tag like this in HTML, but since HTML is basically used to express structure and content, it is recommended to describe text decorations in CSS. It has been.
Therefore, it is recommended to use CSS when decorating characters such as colors.
Change Text Color With CSS
Using the color property
If you want to change the color of text with CSS, specify “color (English notation or color code)” in the “color” property.
The English notation of colors and color codes are explained in “How to use font color” above, so please take a look if you don’t understand.
Example: how to set font color using CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Html and Css Font Size Tutorial</title> <style> #color1{ font-size:20px; color:red; } #color2{ font-size:30px; color:green; } #color3{ font-size:40px; color:blue; } #color4{ font-size:70px; } #color5{ font-size:20px; color:#C418DE; } #color6{ font-size:30px; color:#25AAAA; } #color7{ font-size:40px; color:DF7E15; } </style> </head> <body> <p id="color1">Programming Digest</p> <p id="color2">Programming Digest</p> <p id="color3">Programming Digest</p> <p id="color4">hexadecimal color code:</p> <p id="color5">Programming Digest</p> <p id="color6">Programming Digest</font></p> <p id="color7">Programming Digest</p> </body> </html> |
How to work freely with website creation skills:
In order to be able to undertake website production on your own and work freely without being bound by location or time, you need to learn not only HTML but also CSS, JavaScript, WordPress, and PHP skills. The language you should learn is also explained in the Manu bar, so please take a look.
Summary:
What did you think? You can easily change the color of the text using the font tag in HTML, but since it is a text decoration, use CSS as much as possible. Please try it.
If you learned something new then do check out more articles in the above category, or if you have any questions then you can ask in the comment box. I would love to reply to every single one of your comments.
