How to change text color in HTML with CSS

Featured image of the post: How to change text color in HTML with CSS

To make our website look as professional as possible, we need to change the default font color in browsers. Below, you will learn how to do this easily using HTML and CSS.

To change the font color in HTML, we need to use the CSS property "color", which supports the following color formats: hexadecimal, RGB, RGBA, HSL, HSLA, or color names. To see all HTML colors, visit this link.

Changing text color in HTML on a web page

The CSS rule to change the text color is as follows: color: color code; To do it globally across the entire body of our HTML, we can apply the following code in the CSS file

body {
color: #7d7d7d;

How to change the CSS text color of heading tags

The headers of our articles (h1, h2, h3, h4, h5) are very important, and for this reason, we should highlight them to make it easier for our users to read.

Usually, the h tags (headings) should be darker to create contrast and differentiate between the title text and the content paragraphs. The code to set the color for the headings is as follows:

h1 {
color: hsl(227, 2%, 12%);
/* To apply it to all headings, do this */
h6 {
color: hsl(227, 2%, 12%);

How to change the text color of the HTML p tag

The color of the text in paragraphs of an article is crucial, as most of the content users read on our website is within this tag. To change its color, write the following code in your CSS.

p {
color: rgb(125, 125, 125);

Changing font color in CSS using inline styles

While it is not recommended to use inline styles to add CSS to HTML, there are often times when we need to add text color directly in the HTML without using an external CSS stylesheet. The proper way to embed inline styles for text color is as follows:

<h1 style="color: #3a3a3a;">This is a title</h1>
<p style="color: #7d7d7d;">This is a paragraph</p>

Guidelines and tips to consider when setting the text color for your web page

To wrap up, here's a list of some tips that will help you choose the ideal text color for your website.

  • If your website background is dark, white is the best option for the text color.
  • Avoid using pure black as it is too intense; try shades closer to gray instead.
  • Heading tags should be darker than the rest of the text.
  • The color of links should be different from the text to make it clear to the user that it's a link and to facilitate navigation on the web. Note: You can also add underlining to emphasize them even more.
Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me