How toTech

How to change font/text color in HTML?

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,

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

Here is the explanation of the attribute values,

color_name
Specifies the text color with a color name (like “red”)
hex_numberSpecifies the text color with a hex name (like “ff0000”)
rgb_numberSpecifies 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.

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

The result for the above script is as depicted below,

Change in font color with respect to the Result of the script above
Change Font color example

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)

  1. Open your HTML file

    Firstly, you need to open your HTML file. This method will also work with external style sheets (separate CSS files).Open the HTML file

  2. Place your cursor inside the <head> tag

    You can define your styles inside this tag if you are using an internal style sheet. Place your cursor inside the head tag

  3. Tap <Style>

    Enter <Style> to create an internal style sheet. 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. Tap on Style tag

  4. 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. Tap on the element you want to change the style font for

  5. 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. Enter the color attribute

  6. 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.
    . Enter you color attribute

  7. 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. You can add other selectors to change the color of various elements

  8. 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.

Open your HTML file
OPEN HTML FILE

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.

Select the element in the file you want to change color for
Select the element

3) Add Style Attribute
Add a style attribute to the element. Type style=”” inside the opening tag for the element you want to change

Add style attribute to the element
Add Style attribute

4) Type in the color attribute
Enter your color attribute inside the ” ” space.

Type the color attribute
Type in the color attribute

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.

Type in the color you want
Enter the color

Hence, you have successfully changed your font color using the above two methods namely, CSS and Inline Style attributes.

FAQ’s

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.

How do you change Font type 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.

How do I import a font into HTML?

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).

What is monospace font in HTML?

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!

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close