To change text color in HTML, you should use the CSS color property, which is the standard and recommended approach for modern web development. There are several ways to apply this property: inline, internal, or external CSS. Here’s how each method works:
1. Inline CSS
Apply the color directly to an HTML element using the style attribute:
<p style="color: skyblue;">
This text is sky blue.
</p>
<p style="color: #FF5733;">
This text uses a hex code for orange-red.
</p>
<p style="color: rgb(60,179,113);">
This text uses an RGB value (medium sea green).
</p>
<p style="color: hsl(122, 39%, 49%);">
This text uses HSL value (greenish).
</p>
You can use color names, hex codes, RGB/RGBA, or HSL/HSLA values.
2. Internal CSS
Place CSS rules inside the <style> tag in your <head>. This is effective for styling multiple elements on a single page.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: #1976d2; }
p { color: crimson; }
.highlight { color: #FFA500; }
</style>
</head>
<body>
<h1>This heading is blue</h1>
<p>This paragraph is crimson.</p>
<p class="highlight">This paragraph is orange.</p>
</body>
</html>
You can target any selector—tag, class, or id—with the CSS color property.
3. External CSS
Recommended for larger projects. Place your CSS in a separate .css file and link it with <link> inside the <head>.
Filename: styles.css
body {
color: #333333;
}
h1 {
color: #1976d2;
}
a {
color: #FF5733;
}index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This heading is blue</h1>
<p>The default text is dark gray.</p>
<a href="#">This link is orange-red.</a>
</body>
</html>
This keeps your HTML clean and makes style changes easier to manage.
Note on Deprecated Tags
The old <font> tag with a color attribute (e.g., <font color="red">) is deprecated and should NOT be used in modern HTML. Always use CSS for styling.