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
css
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:
css
h1 {color: hsl(227, 2%, 12%);}/* To apply it to all headings, do this */h1,h2,h3,h4,h5,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.
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:
html
<body><h1 style="color: #3a3a3a;">This is a title</h1><p style="color: #7d7d7d;">This is a paragraph</p></body>
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.
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