While working on your website user interface many of you must have battled with whether or not we can change the color of a font to make it look more attractive. It is often required for highlighting some of the text parts to make it more eye catchy and grab the attention of the viewers.
In this blog, we are going to learn how to change the color text html of a paragraph, heading, or other elements.
Problem Statement
The Problem statement here is how to change the Text color in HTML for a particular line of text.
A simple answer to this problem is that we can use the CSS Color property to change the text color easily based on our choices. This property helps us choose color in hex code, RGB, HSL and color name format.
For example, if you want to change the color of a text to green then you can either use the name of the color i,e. green or use the hex code of the color i,e. #00FF00 or the RGB Decimal code i,e. rgb(0,255,0) and HSL value i,e. (1200, 100%, 50%).
These three methods can be used to change the color of your text using inline CSS or external CSS easily. Let us move ahead in the tutorial and learn how to apply the CSS “color” property to our required text.
How to Change the Color Text in HTML Using the Color Text HTML Property?
You just have to follow some simple steps before you apply the css color property to change the text color of a paragraph or other elements.
Prerequisites
- Make sure you are familiar with the CSS and its properties.
- You must be familiar with all three color formats i,e. Name, RGB, and HSL color formats.
- Must be familiar with HTML framework.
Change Color using color text HTML property
- You have to use the style attribute either inline or external styling to apply the effect.
- You can directly put this style attribute in the HTML tag itself.
| <p style= “color:green”> Welcome to PW Skills </p> |
- You can use the other three color coding formats easily with the css color text html property.
| //Using the simple name value format
<p style= “color:green”> Welcome to PW Skills </p> //Using the Hex code color format <p style= “color:#00FF00”> Welcome to PW Skills </p> //Using the RGB Color format <p style= “color:rgb(0,255,0)”> Welcome to PW Skills </p> //Using the HSL Color format <p style= “color:(1200, 100%, 50%)”> Welcome to PW Skills </p> |
However, inline styling is not much preferred as it makes the website more complex and slow due to extra overhead in the HTML tag elements. We can go for external CSS styling for better and efficient development.
Using Class/id For Color Text HTML Inline Code
You can easily change the color using the inline color text html property with inline HTML tags.
Using class to apply the color styling on fonts
You can drop the CSS code styling under the <head> section in the HTML document to apply the color text html code. Check how to do it below.
| <!DOCTYPE html>
<html> <head> <style> class_name { color: value; } </style> </head> // … </html> |
Using id to apply the color styling on fonts
You can also use the id style attribute to apply the color changes in the HTML documents.
| <!DOCTYPE html>
<html> <head> <style> id_name { color: value; } </style> </head> // … </html> |
Apply External CSS Color Text HTML Property To A Paragraph
Let us learn how we can apply the CSS color text html property to an element using the external styling.
For external styling you have to add the CSS styling to your CSS file with the class name or ID of the element you want to apply the color change. Check the simple syntax for how you can apply and put the particular CSS styling in your file.
| class/id {
color: value; } |
The selector in the HTML tag can either be Class or an ID. For example,
| //HTML Code
<p> Welcome to PW Skills </p> //color text html p { color: #00FF00; } |
You can also use a class and add the css class property in the CSS file to apply the effect.
| //HTML Code
<p class=”paragraph” > Welcome to PW Skills </p> //CSS .paragraph { color: #00FF00; } |
You can also use id to apply the CSS code color text html property in your paragraph <p> element.
| //HTML Code
<p id=”paragraph” > Welcome to PW Skills </p> //CSS #paragraph { color: #00FF00; } |
Learn Full Stack Development With PW Skills
Become a web developer and gain full stack development skills i,e. Front end and backend development with PW Skills Full Stack Web Development Course. Enroll in this course and get interactive coursework with industry led live sessions and recorded format lectures.
Strengthen your concepts using practice exercises, real world projects, module assignments, and more. Get industry recognised certification after completing the course modules only at pwskills.com
Color Text HTML Code FAQs
Q1. Can I change the color text of a HTML element?
Ans: You can easily change the color of a font element using the CSS styling property.
Q2. Which CSS Style is used to change the font color?
Ans: You can use the CSS styling i,e. color to change the font color of a HTML element.
Q3. How many color formats are available for text color change?
Ans: You can either use the name value, hex code, rgb color and HSL format to change the color of your desired text.
Q4. Which is better inline or external CSS Styling?
Ans: External CSS styling is better as it does not make the code complex and need not to be applied on all HTML tags which become a time taking process.
