Change font color HTML: Not only you can change the font size in HTML, but also you can change your font/text color. HTML allows you to get into so many modifications irrespective of how long or in detail your script is. You need to come up with a new color attribute to change you font color in HTML. In this article, we will get to know how to change font/text color in HTML using detailed explanation and relevant examples.
HTML means Hyper Text Markup language which plays a major role in creating web pages and web applications. With the rapid growth in the development of web pages and web applications, HTML has been widely used because of its loose syntax. Although the structuring of an HTML script is hard to grasp, it is supported on almost every browser. HTML is free to use but you need to make sure that you can keep up with the deprecated tags.
To know how to change your font size in HTML you can explore the highlighted link below this text.
How to change font size in HTML
Change font color in HTML
In order to change your font color in HTML, firstly we will go through a quick intro on changing font colors in HTML. Let us learn about the color attribute in HTML fonts and its syntax as well.
Color Attribute and its Syntax:
A color attribute is the one which specifies the color of the text inside a <font> element. The syntax of the color attribute is as follows,
Here is the explanation of the attribute values,
|color_name ||Specifies the text color with a color name (like “red”)|
|hex_number||Specifies the text color with a hex name (like “ff0000”)|
|rgb_number||Specifies the text color with an rgb code (like “rgb(255,0,0)”)|
Here is a small example you can refer to, in regard to the above stated content.
<p><font color="red">This is some text!</font></p>
<p><font color="blue">This is some text!</font></p>
<p>The color attribute is not supported in HTML 5. Use CSS instead.</p>
The result for the above script is as depicted below,
Now we will see how you can change your Font color using CSS and also the Inline Style attributes.
Changing Font color using CSS
You can use basic CSS(Cascading Style Sheets) to define what color your text will appear in various elements on your page. CSS ensures that your web page is compatible with every possible browser.
Here are a few steps you can follow to change your font color using CSS in HTML.
CSS(Cascading Style Sheets)
- Open your HTML file
Firstly, you need to open your HTML file. This method will also work with external style sheets (separate CSS files).
- Place your cursor inside the <head> tag
You can define your styles inside this tag if you are using an internal style sheet.
- Tap <Style>
Enter <Style> to create an internal style sheet. When the <style>
tagis in the <head> tag, the CSS inside the <style> tag will be applied to any applicable elements on that page.
- Type the element
You can now 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.
- Type the color attribute
Now enter the color attribute onto the element sector. The color: attribute will tell the page what text color to use for that element.
- Type in a color for the text
Enter a color for the text. There are three ways to do so. You can enter 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.
- Add other selectors
You can 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.
- Define a CSS class
You can 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.
HTML script is very much useful in applying form validation in PHP. To know more about this topic, you can explore the highlighted link below this text.
How to apply PHP form validation
Change Font color using Inline Style attributes
To change your font color using Inline style attributes, here are a few steps you need to follow.
1)Open your HTML file
Firstly, you need to 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.
2) Find the element
Get the right element in the file you want to change color for. You can use inline style attributes to change the text color of any of your elements.
3) Add Style Attribute
Add a style attribute to the element. Type style=”” inside the opening tag for the element you want to change
4) Type in the color attribute
Enter your color attribute inside the ” ” space.
5) Type the color
Enter 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.
Hence, you have successfully changed your font color using the above two methods namely, CSS and Inline Style attributes.
Before we conclude let us go through some FAQ’s trending on the web in regard to this topic. We have handpicked them for you to clear up your doubts if any in regard to Fonts and font colors in HTML.
To change the text font in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p>tag, with the CSS property font-family, font-size, font-style, etc. HTML5 do not support the <font> tag, so the CSS style is used to change font.
It is supported for all of the regular browsers if you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF). You can add some fonts via Google Web Fonts. Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).
The <tt> element was used to identify text to be displayed using the browser’s default monospace or fixed-width font as it would appear on a fixed-width device such as a teletype.
To conclude: Hence, through this article we have learned how to change font/text color in HTML. If you have any queries in regard to this topic you can comment them below in the comment section. Also, do share the content if you like it. For some more interesting tech articles and latest tech news visit Morphigo.com and delve into the amazing content on web.
How useful was this post?
Click on a star to rate it!
Average rating / 5. Vote count:
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Let us improve this post!
Thanks for your feedback!