Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the text color of an element in HTML?
In HTML, you can change the text color of an element using several methods. While the deprecated <font> tag with the color attribute was used in older HTML versions, modern HTML5 uses CSS for styling text colors through inline styles, internal stylesheets, or external CSS files.
Note − The <font> tag and its color attribute are not supported in HTML5 and should be avoided in favor of CSS styling methods.
CSS color Property Syntax
Following is the syntax for changing text color using CSS −
color: value;
The value can be specified in multiple formats −
- Color names − red, blue, green, black, white, etc.
- Hexadecimal values − #FF0000, #00FF00, #0000FF, etc.
- RGB values − rgb(255, 0, 0), rgb(0, 255, 0), etc.
- HSL values − hsl(0, 100%, 50%), hsl(120, 100%, 50%), etc.
Using Inline CSS Styles
The most direct way to change text color is using the style attribute with the CSS color property.
Example
<!DOCTYPE html> <html> <head> <title>Inline CSS Text Color</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1 style="color: red;">Red Heading</h1> <p style="color: blue;">This paragraph has blue text.</p> <p style="color: #00FF00;">This paragraph uses hexadecimal green.</p> <p style="color: rgb(255, 165, 0);">This paragraph uses RGB orange.</p> </body> </html>
The output displays different colored text elements −
Red Heading (red text) This paragraph has blue text. (blue text) This paragraph uses hexadecimal green. (green text) This paragraph uses RGB orange. (orange text)
Using Internal CSS
Internal CSS allows you to define text colors in the <head> section and apply them to multiple elements using selectors.
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Text Color</title>
<style>
.primary-text { color: #2c3e50; }
.highlight { color: #e74c3c; }
.success { color: #27ae60; }
h2 { color: #8e44ad; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Purple Heading with Element Selector</h2>
<p class="primary-text">Dark blue-gray text using class selector.</p>
<p class="highlight">Red highlighted text.</p>
<p class="success">Green success message.</p>
</body>
</html>
The output shows styled text with different colors applied through CSS classes −
Purple Heading with Element Selector (purple text) Dark blue-gray text using class selector. (dark blue-gray text) Red highlighted text. (red text) Green success message. (green text)
Using CSS with Specific Elements
You can target specific HTML elements and change their text colors using CSS selectors.
Example
<!DOCTYPE html>
<html>
<head>
<title>Element-Specific Text Colors</title>
<style>
h1 { color: #d35400; }
p { color: #34495e; }
span { color: #e67e22; }
strong { color: #c0392b; }
em { color: #16a085; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Orange Heading</h1>
<p>This paragraph has dark gray text with <span>orange highlighted spans</span>.</p>
<p>You can also use <strong>bold red text</strong> and <em>italic teal text</em>.</p>
</body>
</html>
The output demonstrates how different HTML elements can have distinct text colors −
Orange Heading (orange text) This paragraph has dark gray text with orange highlighted spans. (gray with orange span) You can also use bold red text and italic teal text. (gray with red bold, teal italic)
Text Color Methods Comparison
| Method | Syntax | Best Used For | HTML5 Support |
|---|---|---|---|
| Inline CSS | style="color: red;" |
Single elements, quick styling | Full support |
| Internal CSS | <style> p { color: blue; } </style> |
Single page styling, multiple elements | Full support |
| External CSS | <link rel="stylesheet" href="styles.css"> |
Multiple pages, maintainable code | Full support |
| Font tag (deprecated) | <font color="red"> |
Legacy code only | Not supported |
Dynamic Text Color with JavaScript
You can also change text colors dynamically using JavaScript to modify the CSS color property.
Example
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Text Color</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 id="dynamicText">Click buttons to change my color!</h2>
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('blue')">Blue</button>
<button onclick="changeColor('green')">Green</button>
<button onclick="changeColor('#FF6B35')">Orange</button>
<script>
function changeColor(color) {
document.getElementById("dynamicText").style.color = color;
}
</script>
</body>
</html>
Clicking the buttons dynamically changes the heading text color using JavaScript −
Click buttons to change my color! (color changes based on button clicked) [Red] [Blue] [Green] [Orange]
Conclusion
Modern HTML5 uses CSS for changing text colors instead of the deprecated <font> tag. The CSS color property supports various formats including color names, hexadecimal, RGB, and HSL values. Use inline styles for single elements, internal CSS for page-wide styling, or external CSS for maintainable multi-page designs.
9K+ Views
