Introduction
Welcome to this tutorial on how to change text color in HTML. Changing the color of your text can make your website more visually appealing and improve readability. We’ll cover three main methods: inline CSS, internal CSS, and external CSS. Let’s dive in!
Inline CSS
Inline CSS allows you to apply styles directly to a specific HTML element. Here’s how you can change the text color using inline CSS:
<p style="color:blue;">This is a blue text.</p>
In the above example, the text within the paragraph tag (<p>) will appear blue.
Internal CSS
Internal CSS involves adding a <style> tag within the <head> section of your HTML document. This method is useful when you want to apply a style to multiple elements on a single page. Here’s an example:
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is a red text.</p>
</body>
In this example, all paragraph text on the page will be red.
External CSS
External CSS involves creating a separate .css file and linking it to your HTML document. This method is ideal for larger projects where you want to apply consistent styles across multiple pages. Here’s how you can do it:
/* In your .css file */
p {
color: green;
}
/* In your .html file */
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a green text.</p>
</body>
In this example, all paragraph text across all pages linked to the styles.css file will be green.
Conclusion
And that’s it! You now know how to change text color in HTML using inline CSS, internal CSS, and external CSS. Remember, a well-designed website is not just about looks, but also about readability and user experience. So, use colors wisely!
