How to Change Font Color Using CSS?

For creating an awesome website add font color to your web designs with some CSS. In this post, you will learn these 3 Methods for how to change font color using CSS. If you want to create an awesome website with some different font colors? Then use the CSS, CSS stands for Cascading Style Sheets and it is used for styling the webpage.

There are three methods to use CSS in HTML to apply the CSS properties. Which are inline CSS, internal/embedded CSS, and external CSS. Let’s start post, and explore these 3 Methods for how to change font color using CSS.

Know how to change Font Color using CSS

Method One: Inline CSS

For changing the font color using CSS, you need to understand the rules of CSS Value. The inline Method is almost used for all elements for applying the style.

  <body>
  <!-- Method One: Using Inline CSS -->
  <p style="color: #004aad">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae fugiat
    perspiciatis adipisci ipsa delectus? Nostrum sequi reprehenderit molestias
    iure minus perspiciatis, doloribus, pariatur iste velit accusamus,
    officiis quis sit saepe in dolor odio quaerat iusto!

  </p>
</body>

Output:

3 Methods to Change Font Color Using CSS

You can also give this same effect using the internal or external CSS.

Method Two: Internal CSS

When you understand the rules of CSS Value, then you know that inline CSS does not refer to use always. For that time, you can use inline CSS which is written in the top section of the HTML code in the <style> tag.

Using a style element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3 Methods to Change Font Color Using CSS</title>

  <!-- Method Three: Using External CSS -->
  <style>
      p{
          color: #5f13a7;
      }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
    inventore ipsa esse quidem blanditiis provident natus culpa quo dolorem
    odio ratione, eius ea repudiandae suscipit deleniti cupiditate. Laborum
    odio laudantium fugiat harum eligendi enim excepturi fuga quibusdam,
    adipisci tempora sunt vel dolor reprehenderit corrupti tempore.

  </p>
</body>
</html>

Output:

3 Methods to Change Font Color Using CSS

Method Three: External CSS

The third method can give the same effect by using the External CSS stylesheet. using the editor, create one more file and give to name which you want but the Extension has compulsory (.CSS). Like we gave the stylesheet.css. Link this file with your HTML index page, then give style to your paragraph.

To color your text body red, for example, use an external stylesheet, like this:

<!-- Stylesheet of External CSS -->
* {

margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: #ff0000;
}

Remember, in your HTML document you should include the link to your external stylesheet and the HTML head element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3 Methods to Change Font Color Using CSS</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <!-- Method Three: Using External CSS -->
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
    inventore ipsa esse quidem blanditiis provident natus culpa quo dolorem
    odio ratione, eius ea repudiandae suscipit deleniti cupiditate. Laborum
    odio laudantium fugiat harum eligendi enim excepturi fuga quibusdam,
    adipisci tempora sunt vel dolor reprehenderit corrupti tempore.

  </p>
</body>
</html>

Output:

3 Methods to Change Font Color Using CSS

Change Font color in html using without CSS

You can also Change the font color without using the CSS, like:

  <body>
  <!-- 3 Methods to Change Font Color Using CSS -->

  <!-- Using Only HTML -->
  <p>
    <font color="Green"
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
      inventore ipsa esse quidem blanditiis provident natus culpa quo dolorem
      odio ratione, eius ea repudiandae suscipit deleniti cupiditate. Laborum
      odio laudantium fugiat harum eligendi enim excepturi fuga quibusdam,
      adipisci tempora sunt vel dolor reprehenderit corrupti tempore.

    </font>
  </p>
</body>

Output:

3 Methods to Change Font Color Using CSS

Changing Font Color in CSS Is the most Straightforward

I hope you learned how to change Font Color using CSS, you also learned how to change font color using plain HTML. Try these 3 methods and see which method is best for you!

Leave a Reply

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

error: Content is protected !!