In HTML, we can change the color of any text using different ways. Following are the easy and popular ways to change the text color. If we want to change the color of a text using Html tag which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of any text:
- HTML Tags
- Inline Styles
- CSS IDs
- CSS Classes
- CSS Selectors
- CSS Pseudo-classes and Pseudo-elements
Steps:
To create or access an HTML file, you can follow these steps:
- Launch a text editor application.
- Write or paste your HTML code into the text editor.
- Save the file with a .html extension to indicate it is an HTML document.
- To open an existing HTML file, locate it on your computer and double-click to open it in your web browser or text editor.
Start by creating a new HTML file or accessing an existing one that requires editing. You can use a simple text editor such as Notepad (for Windows) or any coding tool of your preference.
- Insert the Appropriate HTML Components:
Inside your HTML document, distinguish the particular text or component that you need to change the color of. For instance, you can utilize a section (<p>), heading (<h1>, <h2>, and so on), or some other HTML component containing text.
- Compose CSS for Text Color:
Next, you will need to write CSS code to modify the color of the text. This can be achieved using one of the following methods:
- Specify the Desired Color:
When writing CSS code, select the perfect color using a color name (such as "red," "blue," "green"), a hexadecimal color code (e.g., #FF0000 for red and others), or an RGB value (e.g., rgb(0, 0, 255) for blue). You can also make use of various CSS color references.
- Save and Preview Your HTML File:
After you've made changes to your HTML document, ensure to save it before launching it in a web browser. The content within the specified HTML element(s) should now be displayed in the color that you defined in your CSS.
1. Using HTML tag
Begin by entering the HTML code into a text editor or accessing an already existing HTML file in the text editor where you intend to utilize the HTML tag.
Step 2: Next, position the cursor at the beginning of the text that requires a color change. Subsequently, insert an empty HTML <font> tag at that specific location.
<font> Single Line text and statements
Step 3: Subsequently, it is necessary to conclude the font tag at the conclusion of the text for which we intend to modify the color.
<font> Single Line text and statements </font>
Step 4: Next, it is necessary to include the "color" attribute within the opening <font> tag of the font element. Specify the desired text color by assigning a value to the color attribute within the tag. Refer to the example below for guidance on specifying the color.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the text or font color Using HTML tag
</Title>
</Head>
<Body>
<font color = "red">
C# Tutorial <br>
</font>
<font color = "green">
Html Tutorial <br>
How to Change the Text Color in Html
</font>
</Body>
</Html>
Step 5: Finally, it is necessary to save the HTML code in the text editor and execute the code. When the code is run, the output will be displayed in the web browser. Below is a screenshot depicting the result of the aforementioned HTML code:
2. Using Inline Style Attribute
To modify the color of text on a webpage using an inline style attribute, the following steps need to be adhered to. By following these instructions, adjusting text color becomes a straightforward task.
To start, the initial step involves entering the HTML code into a text editor or accessing the already existing HTML file in the text editor that will be used to apply the style attribute for modifying the text color.
Step 2: Next, position the cursor at the beginning of the text you wish to modify the color of. Subsequently, input the inline style attribute within an element. In this case, the <p> (paragraph) tag is utilized:
<p style = " color: ; "> Any Text your choice
Step 3: In this step, we have to give a name of color as a value. We can give the color name in three forms:
- We can type the name of a color as per our choice
- We can also enter the RGB value of a color for better readability
- We can also enter the hexadecimal value of a color according to css colors.
Step 4 involves the closure of the element at the conclusion of the text where the desired color modification is to be applied.
<p style = " color :red; "> Any Text of your choice </p>
Step 5: Finally, ensure to save the HTML code that alters the text color by utilizing the CSS style attribute.
<!Doctype Html>
<Html>
<Head>
<Title>
Change color using style attribute
</Title>
</Head>
<Body>
<p style = "color :red;">
This page helps you to understand how to change the color of a text.
</p>
<p style = "color :yellow; ">
And, this section helps you to understand how to change text color using style attribute.
</p>
</Body>
</Html>
Output:
3. Using CSS Classes:
In CSS files, CSS classes are defined to style HTML elements by assigning them using the class attribute. Utilizing classes allows you to group elements together with shared styles, enhancing the structure and manageability of your code.
Syntax:
CSS File:
.red-text {
color: red;
}
HTML Document:
<p class = "red-text"> This is red coloured text. </p>
Example:
CSS File:
.red-text {
color: red;
}
HTML Document:
<!DOCTYPE html>
<html>
<head>
<title> CSS Classes </title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<p> C# Tutorial Company </p>
<p class = "red-text"> Technical Articles for Students </p>
</body>
</html>
Output:
4. Using CSS IDs:
CSS IDs are used to target specific HTML elements for unique styling purposes. These IDs are defined in CSS and assigned to elements using the id attribute. They are typically employed for singular and distinct elements.
Syntax:
CSS File:
#blue-heading {
color: blue;
}
HTML Document:
<h1 id = "blue-heading"> This is a blue colour heading </h1>
Example:
<!DOCTYPE html>
<html>
<head>
<title> CSS Class and ID Examples </title>
<style>
/* CSS class */
.red-text {
color: red;
}
.blue-text {
color: blue;
}
/* CSS ID */
#green-heading {
color: green;
}
#purple-paragraph {
color: purple;
}
</style>
</head>
<body>
<h1 class = "red-text"> This is a Web Development using HTML class. </h1>
<p class = "blue-text"> This is Example article to change text color. </p>
<h2 id = "green-heading"> This is a HTML Example with Class ID. </h2>
<p id = "purple-paragraph"> This is purple text with a class ID. </p>
</body>
</html>
Output:
5. Using CSS Selectors:
CSS selectors provide versatile methods for selecting and styling HTML elements based on their attributes, structure, or relationships with other elements. They provide precise control over properties like text color and various styles across a webpage. CSS includes various selectors that allow targeting specific elements based on their structure or characteristics, enabling advanced customization of text color.
Syntax:
CSS File:
/* Example using attribute selector */
[data-color = "orange"] {
color: orange;
}
/* Example using descendant selector */
div p {
color: brown;
}
HTML Document:
<div>
<p data-color = "orange"> This is of the colour orange text. </p>
</div>
<div>
<p> This is a brown colour text. </p>
</div>
6. Using CSS Pseudo-classes and Pseudo-elements:
Pseudo-classes and pseudo-elements in CSS enable you to style elements based on specific states or parts. For example, you can use :hover to adjust the color of links when a user hovers over them.
Syntax:
a:hover {
color: purple;
}
Conclusion
In summary, the ability to modify text color in HTML is a crucial skill for web developers. Whether you aim to highlight important content, align with your branding, improve readability, or enhance aesthetics, the methods outlined in this article provide you with the resources necessary to create visually appealing web content.
An effective approach to enhance the visual appeal of your web content involves modifying the color of text. This guide delves into various methods and recommended practices for altering text color in HTML. Experiment with these techniques to create a website that not only looks appealing but also effectively communicates your message to your audience.