Current Location：How HTML > HTML Articles > Content

How to Change Text Color in HTML

How to Change Text Color in HTML

Changing text color in HTML can help make your website more visually appealing and engaging for your readers. In this article, we will explore different ways to change text color using HTML.

1. Inline Style

You can change the text color of a specific element using inline style. Simply use the style attribute with the color property.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
</head>
<body>
    <h1 style="color: red;">Welcome to how2html.com</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

2. Internal Style Sheet

You can also use an internal style sheet to change the text color for multiple elements within a single HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        h1 {
            color: blue;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Welcome to how2html.com</h1>
    <p>Learn HTML easily with how2html.com</p>
</body>
</html>

Output:

How to Change Text Color in HTML

3. External Style Sheet

If you want to apply the same text color across multiple HTML files, you can use an external style sheet.

<!-- style.css -->
h1 {
    color: purple;
}
p {
    color: orange;
}

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Welcome to how2html.com</h1>
    <p>Explore HTML tutorials on how2html.com</p>
</body>
</html>

Output:

How to Change Text Color in HTML

4. Using Classes

You can create classes with specific text colors and apply them to elements as needed.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="red">Welcome to how2html.com</h1>
    <p class="blue">Discover HTML tips and tricks on how2html.com</p>
</body>
</html>

Output:

How to Change Text Color in HTML

5. Using IDs

IDs can also be used to change text color for specific elements on a page.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        #header {
            color: purple;
        }
        #footer {
            color: orange;
        }
    </style>
</head>
<body>
    <h1 id="header">Welcome to how2html.com</h1>
    <p>Explore HTML tutorials on how2html.com</p>
    <p id="footer">Connect with us on social media</p>
</body>
</html>

Output:

How to Change Text Color in HTML

6. Using the `color` Attribute

You can also change the text color using the color attribute directly within HTML tags.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
</head>
<body>
    <h1>Welcome to <span style="color: brown;">how2html.com</span></h1>
</body>
</html>

Output:

How to Change Text Color in HTML

7. RGB Values

RGB values can be used to specify custom text colors by mixing different amounts of red, green, and blue.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
</head>
<body>
    <h1 style="color: rgb(100, 50, 120);">Welcome to how2html.com</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

8. Hexadecimal Values

Hexadecimal values can also be used to specify text colors in HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
</head>
<body>
    <h1 style="color: #ff0000;">Welcome to how2html.com</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

9. Named Colors

HTML supports named colors that can be used to easily specify text colors.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
</head>
<body>
    <h1 style="color: magenta;">Welcome to how2html.com</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

10. Text Shadow

Adding a text shadow can also enhance the appearance of text on a webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        h1 {
            color: green;
            text-shadow: 2px 2px 4px #666;
        }
    </style>
</head>
<body>
    <h1>Welcome to how2html.com</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

11. Gradient Text Color

You can create gradient text colors using CSS to add a unique touch to your website.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        h1 {
            background: linear-gradient(to right, #ff3366, #33ffcc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <h1>Welcome to how2html.com</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

12. Changing Text Color on Hover

You can change the text color of an element when the user hovers over it using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        h1 {
            color: blue;
            transition: color 0.5s;
        }
        h1:hover {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Hover over me</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

13. Changing Text Color with JavaScript

You can also change text color dynamically using JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <script>
        function changeColor() {
            document.getElementById('text').style.color = 'purple';
        }
    </script>
</head>
<body>
    <h1 id="text">Click the button to change text color</h1>
    <button onclick="changeColor()">Change Color</button>
</body>
</html>

Output:

How to Change Text Color in HTML

14. Changing Text Color with jQuery

jQuery can also be used to change text color easily on a webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        (document).ready(function(){('#header').click(function(){
                $(this).css('color', 'orange');
            });
        });
    </script>
</head>
<body>
    <h1 id="header">Click me to change text color</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

15. Text Color Animation

You can create animations for text color changes using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        @keyframes colorchange {
            0% {
                color: red;
            }
            50% {
                color: blue;
            }
            100% {
                color: green;
            }
        }
        h1 {
            animation: colorchange 3s infinite;
        }
    </style>
</head>
<body>
    <h1>Color changing text</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

16. Text Color Transition

You can also create smooth transitions for text color changes using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        h1 {
            color: blue;
            transition: color 0.5s;
        }
        h1:hover {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Hover over me to see the color change</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

17. Text Color with Media Queries

You can use media queries to change text color based on the screen size or device type.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        h1 {
            color: blue;
        }
        @media only screen and (max-width: 600px) {
            h1 {
                color: red;
            }
        }
    </style>
</head>
<body>
    <h1>Responsive text color</h1>
</body>
</html>

Output:

How to Change Text Color in HTML

18. Text Color for Links

You can style text color specifically for links on your webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        a {
            color: purple;
        }
        a:hover {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">Visit how2html.com</a>
</body>
</html>

Output:

How to Change Text Color in HTML

19. Text Color for Lists

You can also specify text color for lists in HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        ul {
            color: navy;
        }
        li {
            color: maroon;
        }
    </style>
</head>
<body>
    <h2>List of tutorials on how2html.com</h2>
    <ul>
        <li>HTML Basics</li>
        <li>CSS Styling</li>
        <li>JavaScript Fundamentals</li>
    </ul>
</body>
</html>

Output:

How to Change Text Color in HTML

20. Text Color for Tables

Lastly, you can also change text color within tables on your webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Color</title>
    <style>
        table {
            color: darkgreen;
        }
        th {
            color: darkblue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Topic</th>
            <th>Category</th>
        </tr>
        <tr>
            <td>HTML Basics</td>
            <td>Web Development</td>
        </tr>
    </table>
</body>
</html>

Output:

How to Change Text Color in HTML

These examples demonstrate various ways in which you can change text color in HTML to customize the look and feel of your website. Experiment with different color combinations and techniques to create visually appealing content for your audience.

Like(0)

HTML Articles

Top
Top