All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Change Text Color In CSS

Last Updated : Mar 11, 2024

How To Change Text Color In CSS

In this tutorial we will show you the solution of how to change text color in css, as we know css used to style html elements, here we used css as inline method for make colorful text on webpage.

When we make colorful text we can see clearly from normal text.

For make text to be colorful we need to use style property of ‘color’ value to any color like ‘red,yellow,green…etc’ using css.

This style is mostly used to highlight the main text from a paragraph from a blog or website anything.

Step By Step Guide On How To Change Text Color In CSS :-

We can implement styles using three types (i.e inline, external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.

Here we used inline style method and in our program we defined two <p> para tag to display some text on webpage with different colors.

In first <p> tag we defined inline style with property ‘color’ to value ‘green’ so first line of text will display in green color and next line will display in red color.

<!DOCTYPE html>
<html>
    <head>
        <title>TEXT COLOR CHANGE</title>
    </head>
    <body>
        <p style="color: green;">Hi! everyone welcome to our website</p>
        <p style="color: red;">Here we using "color" property to change this line color</p>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. We defined first <p> tag with inline style with property ‘color’ value ‘green’ to make that sentence in green color.
  7. Then next <p> tag defined with inline style property of ‘color’ value ‘red’ to make that sentence in red color to display on webpage.
  8. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to make a text to colorful using css.

As we know when we writing, reading or seeing anything like blog, news or website we need to highlight something main from that so we have to use this style.

It is really important and widely using concept to attract user’s quickly or can understand easily using this method. We can sets to any color on text or sentence like anything.

I hope this article on how to change text color in css helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪