Use the color property to change the font color. You can use Hex, RGB, RGBA, CMYK, and the name of any color.

To change an element’s font color to blue, write color: blue for the element. You can target the element by CSS class name, ID, and even by tag name. If it’s a paragraph or <p> tag, then your CSS should be p{color: blue}

If it’s a certain element that has a CSS class of “apple” then your CSS will be .apple {color: blue}

And if it has a CSS ID of “burger“, the CSS code will be #burger {color: blue}

You can also use the HEX color code for the blue color. The hex code for the blue color is #0000FF

That means you can write the CSS like this {color: #0000FF} and this is the same as {color: blue}

The term “Attribute” has a different meaning in the web design context than in plain English. Anyways, there is no CSS or HTML attribute that can change an element’s font color to blue or green or something else. However, it’s the CSS property (color) that is responsible to make or change color. Use the following CSS to change the font color to blue:

selector{color: blue;}

Related: See how to create multicolor text →

If you like watching instead of reading, then see the video below:

Download the source code from the bottom of this page.

redesign old website

Change paragraph color to blue:

p{color: blue;}


p{color: #0000FF;}

Make a link blue:

a{color: blue;}

Change a specific attribute’s color to blue:

<p>This is an example of a target blank attribute <a href="#" target="_blank"> It is a link which has a target attribute</a>, and this is <a href="#">another link</a> without any target attribute</p>

    a{color: green;}

    a[target=_blank] {
        color: blue;

This code will make all the link colors green except those who have a _blank target attribute. The link that contains the target="_blank" will be blue.

Make any element blue:

.exmclass p{color: blue;}

#idexm .exmclass span{color: blue;}

.exmclass h2{color: blue;}

Whatever element you want to change the color of, the CSS “color” property will do the trick. See other CSS properties on MDN.

Do you want to remove the underline from a link? See the post on how to remove the underline.

Download source code ↓

Hex color code picking tools:

  1. Browser based color picking
  2. Installable light weight software (Pixie)
Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Projects in HTML CSS

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview


Which CSS property is used to change the text color of an element?

The “color” property is used to change the text color of an HTML element. For example, {color: red}

How do you change the font color with CSS?

Target the element by class name or ID or tag and apply the CSS “color” property. For example, #unicorn p {color: green}

How do you change font color in HTML?

You can change font color in HTML in two different ways: inline CSS & embedded CSS within <style> tag. An example of inline CSS, <p style="color: red">Example of inline CSS</p>
Example of embedded CSS, <style type="text/css">h2{color: yellow}</style>