Search for Courses, Topics
certificate icon
Certificate

Learn on Scaler Topics and get certified.

static-certificate

How to Change Font and Text Color Using CSS

Learn 3 ways to Change Font and Text Color Using CSS

19 Jul 2021-5 mins read
quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

The presentation of a document written in markup languages such as HTML is described using a style sheet language known as CSS. HTML stands for HyperText Markup Language whereas CSS is the abbreviation for Cascading Style Sheets. They are unique in their syntax. While HTML could be regarded as the structure of a website, CSS is the styling done on the structure.

It is quite interesting to note that several websites could very well have the same HTML code but their styling or CSS is what would make them different! Talking about CSS in particular, a graphic designer displays their creativity through it. Not only does it give the web designer control over the appearance of the web pages but also aids in creating a visual-hierarchy through parameters like shape,color, space and size.

So let’s dive into this tutorial and learn the different ways of how we can change font color and also change text color in CSS.

Learn CSS

Setting up a HTML file

Let’s create a HTML file named Index.html. We will call its CSS file as style.css. Using this file, you will learn how to change text color in CSS.

After adding the required boilerplate, the contents Index.html are as follows –

<!doctype html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Welcome to InterviewBit!</h1>
    <h2> Learning CSS!</h2>
    <p> Hello World!</p>
  </body>
</html>

Learning how to change text color in CSS

We can change text color in CSS quite easily. There are three techniques we can use which are as follows-

  • Using Color Keywords
  • Using Hexadecimal Values
  • Using RGBA Color Values

change text color in css

Using color keywords to change text color in CSS

To change text color in CSS, you can use the color keywords to achieve this.

  • Color keywords are nothing but the names of the colors like red, blue, yellow etc.
  • We will change the font color of the heading or the h1 tag in Index.html to red.
  • To do this, you will go to the external CSS file which is style.css. You should add the following code to it –
h1 {
    color: red;
    }

The font color will successfully be changed to red from the default color.

Using Hexadecimal values to change text colors in CSS

More often than not, while designing a website, there could be a specific color scheme or brand kit that you might be required to use. This cannot be possible if you are using color keywords such as blue, green, red etc. So you can now learn to use the hexadecimal values to change the font color of the paragraph elements.

image alt

Let’s take a look how you can achieve this –

Add the following code to style.css. This will change the color of the paragraph elements to a specific shade of blue of our choice.

p { 
    color: #347deb;
  }

Using RGBA color values to change text color in CSS

RGBA color value manipulation is also a good way to change text color in CSS. The RGBA abbreviation stands for Red, Blue, Green and Alpha. The Alpha value controls the transparency of the color. For example, if the value of Alpha is set to 1- it means the color is completely opaque. On the other hand, when it is 0.75, it suggests the color would be only 75% opaque or 25% transparent.

how to change font color in css

So here is how you will change the color of our h2 tag in Index.html using the RGBA color values –

h2 {
    color: rgba(47,86,135,1);
}

Once the above code is added to the style.css file, you can say that you know how to change font color in CSS.

Conclusion

image alt

Now you know how to change font color in CSS efficiently. Although this can be achieved through internal CSS and inline CSS as well, the best practice remains using an external CSS file just like you did in this tutorial.

So now the next time someone asks you “How to change the font color using CSS?”, you will not only be able to tell them how to do that but also share some tips about different font properties as well!

In this tutorial, we covered the three different ways you can change font color in CSS. To sum it up, they are-

  • Using color keywords– You can simply use color keywords which are nothing but the name of colors to style your HTML file.
  • Using Hexadecimal values– Hex codes or hexadecimal values enable you to get intermediate colors and specific colors, which is not possible while using color keywords. So now, if you are asked to follow a particular color scheme or a brand kit, you know which technique to use in CSS.
  • Using RGBA values– If you are aware of the values of Red, Blue, Green and Alpha to be used then this is the best way for you to change text color in CSS. As a designer, you can also manipulate the transparency of the color using the Alpha attribute of this method.
Challenge Time!
quiz Time to test your skills and win rewards! Note: Rewards will be credited after the next product update.