How To Set Font Color In Css

The presentation of a document written in markup languages such as HTML is described using a style canvas 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 construction.

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 well-nigh CSS in particular, a graphic designer displays their creativity through it. Non simply does information technology requite the spider web designer control over the appearance of the web pages just likewise aids in creating a visual-hierarchy through parameters like shape,colour, space and size.

Then let's dive into this tutorial and learn the different ways of how nosotros tin change font color and besides change text color in CSS.

Learn CSS

Setting upwardly a HTML file

Permit's create a HTML file named Index.html. We will call its CSS file as mode.css. Using this file, you volition acquire how to alter text color in CSS.

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

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

Learning how to modify text color in CSS

We can modify text color in CSS quite easily. There are three techniques we can use which are every bit follows-

Using Color Keywords
Using Hexadecimal Values
Using RGBA Color Values

change text color in css

Using colour keywords to change text colour in CSS

To change text color in CSS, y'all tin use the color keywords to achieve this.

Color keywords are nil but the names of the colors like ruby-red, blueish, yellow etc.
Nosotros will modify the font color of the heading or the h1 tag in Index.html to red.
To do this, you lot will go to the external CSS file which is way.css. You lot should add together the following code to it –

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

Using Hexadecimal values to change text colors in CSS

By and large, while designing a website, there could be a specific color scheme or brand kit that you might exist required to use. This cannot be possible if you are using colour keywords such as blueish, light-green, ruby-red etc. So you lot can now learn to use the hexadecimal values to change the font color of the paragraph elements.

image alt

Let's take a await how you can achieve this –

Add the post-obit lawmaking to style.css. This will change the color of the paragraph elements to a specific shade of blue of our choice.

Using RGBA color values to change text colour in CSS

RGBA color value manipulation is also a good manner to change text color in CSS. The RGBA abbreviation stands for Blood-red, Blueish, Green and Alpha. The Alpha value controls the transparency of the color. For example, if the value of Alpha is set to 1- it ways the color is completely opaque. On the other manus, when it is 0.75, information technology suggests the color would exist only 75% opaque or 25% transparent.

how to change font color in css

And so here is how you volition alter the color of our h2 tag in Index.html using the RGBA color values –

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

Once the to a higher place code is added to the style.css file, you can say that y'all know how to change font color in CSS.

Conclusion

image alt

At present you know how to change font colour in CSS efficiently. Although this tin can be achieved through internal CSS and inline CSS too, the best practice remains using an external CSS file only like you did in this tutorial.

Then now the side by side time someone asks yous "How to change the font color using CSS?", you will non but be able to tell them how to exercise that but besides share some tips about different font backdrop as well!

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

Using color keywords– You tin 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 colour keywords. Then now, if you lot are asked to follow a particular color scheme or a make kit, you know which technique to apply in CSS.
Using RGBA values– If you lot are aware of the values of Red, Blue, Dark-green and Blastoff to exist used then this is the all-time manner for you to change text color in CSS. As a designer, you can besides manipulate the transparency of the color using the Blastoff attribute of this method.