| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
Using text color in HTML can be achieved through several methods, primarily using inline styles, internal styles, and external stylesheets with CSS. Here are examples of each method:
1. Inline Styles
Inline styles are applied directly within an HTML element using the style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<p style="color: red;">This is a red paragraph.</p>
<p style="color: blue;">This is a blue paragraph.</p>
<p style="color: #00FF00;">This is a green paragraph using a hex color code.</p>
</body>
</html>
2. Internal Styles
Internal styles are defined within a ‘<style>‘ element in the ‘<head>' section of the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Example</title>
<style>
.red-text {
color: red;
}
.blue-text {
color: blue;
}
.green-text {
color: #00FF00;
}
</style>
</head>
<body>
<p class="red-text">This is a red paragraph.</p>
<p class="blue-text">This is a blue paragraph.</p>
<p class="green-text">This is a green paragraph using a hex color code.</p>
</body>
</html>
3. External Stylesheet
External stylesheets are linked to the HTML document using the ‘<link>‘ element. This method is preferred for larger websites to maintain a consistent style across multiple pages.
style.css:
.red-text {
color: red;
}
.blue-text {
color: blue;
}
.green-text {
color: #00FF00;
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="red-text">This is a red paragraph.</p>
<p class="blue-text">This is a blue paragraph.</p>
<p class="green-text">This is a green paragraph using a hex color code.</p>
</body>
</html>
4. Using Named Colors
You can use named colors directly within the ‘style‘ attribute or in CSS.
<!DOCTYPE html>
<html>
<head>
<title>Named Colors Example</title>
</head>
<body>
<p style="color: tomato;">This is a tomato-colored paragraph.</p>
<p style="color: orange;">This is an orange paragraph.</p>
<p style="color: gold;">This is a gold paragraph.</p>
</body>
</html>
5. Using RGB and RGBA
RGB (Red, Green, Blue) and RGBA (Red, Green, Blue, Alpha) allow more precise color definitions and transparency control.
<!DOCTYPE html>
<html>
<head>
<title>RGB and RGBA Example</title>
</head>
<body>
<p style="color: rgb(255, 0, 0);">This is a red paragraph using RGB.</p>
<p style="color: rgba(0, 0, 255, 0.5);">This is a semi-transparent blue paragraph using RGBA.</p>
</body>
</html>
These methods demonstrate different ways to apply color to text in HTML using CSS. Each approach has its advantages and use cases, depending on the complexity and size of your project.
