CSS Colors

In the last lesson you learned about CSS Comments. Now let’s look at something that makes your pages come alive. Colors.

🎨 What are CSS Colors?

A color in CSS is just an instruction. You tell the browser “paint this text blue” or “make this box light yellow”. The browser does it for you.

Think of a wall in your room. The wall is the HTML. The paint you put on it is the CSS color. Same wall, different feeling, just by changing the paint.

In CSS you mostly set color in two places. Let me name them first.

• The text color. This is the color property. It changes the color of the words.
• The background color. This is the background-color property. It fills the area behind the words.

Don’t worry about every way to write a color yet. Let’s just understand the idea first.

🤔 Why do we need colors?

A page with only black text on a white background looks flat. It is hard to know what is important. Colors fix this.

Here is why color matters so much.

• It guides the eye. A red button says “stop” or “delete”. A green button says “go” or “save”.
• It shows meaning. Think of the red notification dot on WhatsApp. You know what red means without reading anything.
• It builds a brand. YouTube feels red. Facebook feels blue. The color alone tells you which app you are in.

So color is not just decoration. It helps people use your page.

🧩 The simplest way: color names

The easiest way to use a color is to type its name in plain English. CSS understands many common words like red, blue, green, white, black, and orange. These are called named colors, which just means colors you write as a word.

Here is a small HTML page with one heading and one paragraph.

<h1>Welcome to my page</h1>
<p>This is my first colored text.</p>

Now let’s color them. This CSS makes the heading blue. It also gives the paragraph green text on a light yellow background.

h1 {
  color: blue;
}

p {
  color: green;
  background-color: lightyellow;
}

Let me walk through it.

• color: blue; sets the text of the h1 to blue.
• color: green; sets the paragraph words to green.
• background-color: lightyellow; paints the area behind the paragraph a soft yellow.

🖌️ A more real example

Let’s make something you see every day. A simple “Save” button. We want it to feel safe and clear. So we use a green background-color with white text.

First the HTML for the button.

<button class="save-btn">Save</button>

Now the CSS. This gives the button a green background and white text. It also adds a little space inside so the button does not look cramped.

.save-btn {
  color: white;
  background-color: green;
  padding: 10px 20px;
}

The padding part just adds space inside the button. We will study padding properly later. For now notice how white text on a green background reads clearly. That is the whole point of choosing colors with care.

📋 Some handy named colors

You do not need to memorise these. Just know they exist so you can try them. Here are some common named colors and where they work well.

⚠️ Common Mistakes

A few small things trip up beginners. Watch out for these.

• Spelling the color wrong. If you type colour or bluu, nothing happens. CSS only knows the American spelling color and the correct color words.
• Mixing up text and background. The color property is the text. The background-color property is the area behind it. Many beginners swap these by mistake.
• Same color for text and background. If both are white, the text disappears. Always keep enough difference so the words can be read.

This difference between the text and the area behind it has a name. We call it contrast. More contrast means the text is easier to read.

✅ Best Practices

Keep these simple habits and your pages will look clean.

• Use color to mean something. Green for go, red for danger. Do not paint things random colors.
• Keep good contrast. Dark text on a light background, or light text on a dark background.
• Do not use too many colors on one page. A couple of main colors look calmer than many.

🧩 What You’ve Learned

You just learned how to bring color to a page. Here is the quick recap.

• ✅ The color property changes the text color.
• ✅ The background-color property changes the area behind the text.
• ✅ Named colors like red, blue, and green are the easiest way to start.
• ✅ Good colors carry meaning, like green for save and red for delete.
• ✅ Always keep enough contrast so your text is easy to read.

🚀 What’s Next?

Named colors are great for starting out. But there are only a limited set of them. Next you will learn a way to make almost any color you can imagine using short codes.

HEX Colors