Design Converter
Education
Frontend Engineer
Last updated on Jan 2, 2025
Last updated on Jan 2, 2025
Want to learn how to change text color in HTML? 🌈
It's simpler than you think! Whether you're just starting with coding or creating your first website, adding a splash of color to your text can make your content pop. In this blog, we'll walk you through the basics step by step. Get ready to add some fun and personality to your pages!
HTML text color refers to the visual appearance of text on a web page, which can be modified using HTML and CSS. Initially, the <font>
tag was used for changing text color. Although deprecated, it holds historical significance in the evolution of web design. The <font>
tag is still supported by some browsers for backward compatibility, but modern web development strongly favors using CSS for styling purposes.
Today, cascading style sheets (CSS) are the preferred method for styling text, offering advanced tools to adjust font color, background, and more, improving readability and the website’s readability.
In HTML, you can use color names like red, blue, and green or define color values using RGB, RGBA, and HEX codes. A hex color code is a numeric representation assigned to colors, where pairs of digits correspond to red, green, and blue color intensities. These methods are applied within an HTML document to customize text and background colors.
1<p style="color: red;">This is red text.</p> 2<p style="color: #00FF00;">This is green text.</p> 3<p style="color: rgb(0, 0, 255);">This is blue text.</p>
Using these methods allows you to create unique text color HTML styles that enhance the visual appeal of your web page.
RGB defines colors using a combination of red, green, and blue, while RGBA adds an alpha value for transparency.
1<p style="color: rgba(255, 0, 0, 0.5);">This is semi-transparent red text.</p>
Knowing how to use RGB values and RGBA values ensures flexibility in designing your web page.
HEX codes are a shorthand way to define colors, consisting of numbers (0–9) and letters (A–F).
Example of hex code usage:
1<p style="color: #800080;">This is purple text using a HEX code.</p>
The CSS color property lets you define text colors efficiently. CSS can also be used to change font size. Apply it via:
1<p style="color: blue;">This text is styled using inline CSS.</p>
1<style> 2 .blueText { color: blue; } 3</style> 4<p class="blueText">This is blue text styled with internal CSS.</p>
1/* styles.css */ 2.blueText { 3 color: blue; 4}
CSS can control various font sizes within the same paragraph, offering flexibility in presentation.
Inline CSS uses the style attribute directly within an HTML tag. While quick for small changes, it’s less ideal for larger projects.
1<p style="color: green;">This green text is styled inline.</p>
<head>
using the <style>
tag:1<style> 2 p { color: green; } 3</style>
1<link rel="stylesheet" href="styles.css">
<font>
Color AttributeThe <font>
color attribute is a deprecated method for changing text color in HTML. Although it is no longer supported in HTML5, it can still be used for backward compatibility. This attribute allows you to specify text color using color names, hex codes, and RGB values.
Example:
1<font color="red">Red Text</font> 2<font color="#ff0000">Red Text</font> 3<font color="rgb(255, 0, 0)">Red Text</font>
While the <font>
color attribute can still be used, it is not recommended due to its deprecated status and potential compatibility issues. Modern web development practices favor CSS for styling text colors, offering more flexibility and control.
CSS Alternative:
1<style> 2 .red-text { color: red; } 3</style> 4<span class="red-text">Red Text</span>
Using CSS provides a more robust and scalable approach to text styling. It allows for greater precision with hex codes and RGB values and integrates seamlessly with other CSS properties.
CSS classes allow styling multiple elements consistently.
1<style> 2 .redText { color: red; } 3</style> 4<p class="redText">This is red text using a CSS class.</p>
Changing text color HTML is easy using HTML and CSS. Whether you choose inline styles, internal CSS, or external CSS, understanding color values, RGB, and hex code ensures a polished design for your web page. For modern, scalable design, always use CSS. 🌐
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.