The simplest way to change text color

To change text color in CSS, use the color property and set it to a color value. The most straightforward approach is to write a rule that targets the element you want to change, then add color: followed by your chosen color.

Here is the most basic example. If you have a paragraph in your HTML and want it to be blue, you would write:

p { color: blue; }

That single line tells the browser to make all paragraph text blue. The word inside the curly braces is the property name (color), and the word after the colon is the value (blue). The semicolon ends the rule.

Key Takeaways

  • The color property changes text color; use it inside a CSS rule with a color name, hex code, or RGB value.
  • Named colors like blue, red, and green work in CSS, but hex codes like #FF5733 and RGB values like rgb(255, 87, 51) give you more precise control.
  • Target specific elements by using class names (with a period: .classname) or ID names (with a hash: #idname) instead of changing all paragraphs at once.
  • Inline styles written directly in the HTML tag override external CSS files, which can make debugging harder as your project grows.

Using color names, hex codes, and RGB values

CSS accepts three main ways to specify a color. The first is a named color — words the browser recognizes, like red, green, navy, coral, or gold. These are the easiest to read and remember, but there are only about 140 of them, so you cannot always get the exact shade you want.

The second way is a hex code, which looks like #FF5733. The hash symbol comes first, then six characters that represent red, green, and blue values in hexadecimal (base 16). Hex codes let you pick from millions of colors. If you use a design tool like Figma or Photoshop, you can copy the hex code directly from the color picker.

The third way is RGB, written as rgb(255, 87, 51). The three numbers represent red, green, and blue on a scale from 0 to 255. Each number controls how much of that color is mixed in. RGB and hex codes produce the same colors — they are just different ways of writing the same information.

Here are three ways to make the same red color:

p { color: red; } p { color: #FF0000; } p { color: rgb(255, 0, 0); }

Targeting specific elements with classes and IDs

If you have ten paragraphs but only want three of them to be blue, you cannot use p { color: blue; } because that changes all paragraphs. Instead, you add a class or id attribute to the HTML elements you want to change, then target those in your CSS.

A class is used when multiple elements share the same style. In your HTML, you write <p class="highlight">This text is blue</p>. In your CSS, you target it with a period before the name: .highlight { color: blue; }. You can add the same class to as many elements as you want.

An id is used when only one element needs that style. In your HTML, you write <p id="intro">This is the introduction</p>. In your CSS, you target it with a hash: #intro { color: blue; }. Each id should appear only once on a page.

Using classes and IDs keeps your CSS organized and makes it easier to change colors later without affecting elements you did not intend to change.

Inline styles versus external CSS files

You can write color rules in two places: directly in the HTML tag (called an inline style) or in a separate CSS file. Inline styles work when ready but become hard to manage as your project grows.

An inline style looks like this: <p style="color: blue;">Blue text</p>. The style attribute sits inside the opening tag, and the CSS rule goes inside the quotes. This method works, but if you have fifty paragraphs and want to change them all from blue to green, you have to edit fifty different tags.

An external CSS file is better for larger projects. You create a separate .css file, write all your color rules there, and link it to your HTML with a single line in the head section: <link rel="stylesheet" href="styles.css">. Now if you want to change all blue text to green, you edit one line in one file, and the change applies everywhere.

Understanding color inheritance and specificity

When you set a color on a parent element, child elements inside it inherit that color unless you override it. If you write div { color: blue; }, all text inside that div becomes blue, including paragraphs, links, and headings nested inside it.

Sometimes you want a child element to have a different color than its parent. You can override inherited color by writing a more specific rule. A rule targeting a class is more specific than a rule targeting an element name, and a rule targeting an ID is more specific than both. The browser applies the most specific rule it finds.

For example, if you have p { color: blue; } and .warning { color: red; }, a paragraph with class="warning" will be red, not blue, because the class rule is more specific.

Common color mistakes and how to fix them

The most common mistake is forgetting the semicolon at the end of the rule. p { color: blue } without a semicolon may still work in some browsers, but it is not correct CSS and can cause problems if you add another rule after it. Always end each property with a semicolon.

Another mistake is misspelling the color name or hex code. color: blu; will not work because the browser does not recognize "blu". If a color does not appear, check that you spelled it correctly. Hex codes must have exactly six characters after the hash (or three, for shorthand), and RGB values must be numbers between 0 and 255.

A third mistake is writing the rule in the wrong place. If you write CSS inside your HTML file but forget to put it in a <style> tag in the head section, the browser treats it as text, not as a rule. Always wrap CSS in <style></style> tags or put it in a separate .css file.

Testing your color changes in the browser

After you write a color rule, open your HTML file in a web browser to see if it worked. If the color did not change, open the browser's developer tools by pressing F12 (or right-clicking the element and selecting "Inspect"). The Elements or Inspector tab shows you the HTML and the CSS rules applied to each element.

In the developer tools, you can see which CSS rules are active and which are crossed out (meaning they were overridden by a more specific rule). You can also click on a color value and a color picker appears, letting you try different colors without editing your file. This is a fast way to experiment and find the color you want before you save it.

If you change a color in the developer tools, remember that the change only exists in your browser — it does not save to your file. Once you find the color you like, go back to your CSS file and type the change there.

Frequently Asked Questions

Can I use color names like "lightblue" or do I have to use hex codes?

You can use color names like lightblue, darkred, and lightgray. CSS recognizes about 140 named colors. However, if you need a color that is not in that list, you will need a hex code or RGB value. Named colors are easier to read in your code, but hex codes give you exact control.

What is the difference between color and background-color?

The color property changes the text itself. The background-color property changes the color behind the text. If you want blue text on a yellow background, you would use color: blue; and background-color: yellow; in the same rule.

Why is my color rule not working even though I wrote it correctly?

A more specific rule elsewhere in your CSS is probably overriding it. Open the developer tools and inspect the element to see all the rules applied to it. Look for rules that are crossed out — those are being overridden. If an inline style exists on the element, it will override any external CSS file, so check the HTML tag itself.

Can I make text partially transparent with a color rule?

Yes, by using RGBA instead of RGB. RGBA is the same as RGB but with a fourth number (alpha) that controls transparency on a scale from 0 to 1. For example, color: rgba(255, 0, 0, 0.5); makes red text that is 50 percent transparent. A value of 0 is completely invisible, and 1 is completely opaque.

Do I need to restart my browser after changing a CSS file?

No, but you do need to refresh the page. Press F5 or Ctrl+R (Cmd+R on Mac) to reload the page and see your changes. If you still do not see the change, try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to clear the browser cache.