What are the best ways to change an element’s font color in CSS?

CSS language is a very interesting language that is used to style the HTML web pages. You can change the color of text, change the font style and also you can change width and height of an element. You can do whatever you want with the HTML web page using the CSS language.

Today I shall teach you which css attribute would change an element’s font color.

According to me there are 2 ways to change the color of the element’s font color.

Using style attribute
Using class attribute

Table of Contents

Change an element’s font color using style attribute

Let’s learn how you can change an element’s font color to blue using the style attribute.

Step 1 – Create a blank html document

which css attribute would change an element's font color to blue?

In the above document you can see we have initialized a basic html document structure.

Step 2 – Add paragraph and heading in html document

In the above screenshot you will see a heading that is wrapped in <h1> and </h1> tag. And the second is the paragraph that is wrapped in <p> and </p> tag.

In the above screenshot you will see the rendered preview of the code in the web browser.

Now let’s change the color of the heading using the style attribute.

Step 3 – Add style attribute to element

In the above screenshot you will see, I have added the style attribute and added a property “color” with the value of “blue”. Now let’s render this in our web browser.

In the above screenshot. You will see the blue color heading which we have changed using the style attribute. This is the rendered web page which is displayed in the web browser.

Change an element’s font color using class attribute

In the above steps we have learned how to change an element’s font color using style attribute. Now let’s learn it using class attribute.

Step 1 – Add class to paragraph tag

In the above screenshot you will see I have added a class attribute in <p> tag. And the value “blue-text”. The value of class attribute is the class name that we shall use now to change the color of the text.

Now let’s start adding the style in the class.

Step 2 – Add css properties to class

In the above screenshot you will see the class and the properties in the dashed border. Now let’s render this code in our web browser.

You will see that our paragraph color is also blue.

This was the second method which is used to change the element’s font color to blue.

Summary

There will be many more methods to change the color of the text. But these are the popular ones that I have described above.