EN

CSS・First steps

How do you write a selector?

A selector is the marker that points at "which part" to change. Let's grasp CSS's basic shape starting from the very gentlest spot.

CSS is written as a set of “which part” and “what to do.” The part that points at “which part” is the selector. First, let’s learn this basic shape as one whole piece, until it’s in your bones.

Let’s look at a real one

p {
  color: blue;
}
PartRole
pThe selector (points at the paragraphs)
colorThe property (what to change? = the text color)
blueThe value (how? = to blue)

So it reads as “make the paragraph text blue.” If you re-read it as “which part { what: how; }” in plain words, it suddenly makes sense.

The result, right here

Here’s what actually running that earlier p { color: blue; } looks like. With that single setting written on p, all the paragraphs turn blue at once.

Just by making p the selector, both paragraphs turn blue. Not having to paint them one by one is the joy of selectors.

A selector is an HTML tag name

For the “which part” setting, you can use the tag names you learned in HTML as they are. Write p and it’s all paragraphs; write h1 and it’s all the big headings. You can change every tag with the same name, all together in one go.

h1 {
  color: red;
}

This turns every <h1> on the page red. No need to paint them by hand one by one—this is the joy of CSS.

You can set several things

Inside the { }, you can line up as many lines of settings as you like. One per line, each closed with a ;.

p {
  color: blue;
  font-size: 18px;
}

“Make the paragraph text blue, and a little bigger.” Picture stacking up the things you want to change, top to bottom.

Separate with commas to set them together

“I want both h1 and h2 the same color”—for that, line up the selectors separated with a comma.

h1, h2 {
  color: teal;
}

This turns both h1 and h2 teal. Since you don’t have to write the same setting twice, there are fewer mistakes too. Read it as “do this to A and B together.”

With the single h1, h2 setting, both the big and middle headings turn teal together. The paragraph, whose name isn’t listed, keeps its original color.

When settings collide, the later one wins

What happens if you write different values twice for the same selector?

p {
  color: blue;
}
p {
  color: red;
}

The answer is red. CSS is read top to bottom, and a later setting overwrites an earlier one. When you think “I changed the color but it isn’t working,” it’s a very common trip-up that there was actually another copy of the same selector lower down in the file.

Even if you write “blue” first, the later “red” wins and the text turns red. When there are settings for the same p, the lower one is what stays.

Summary of this lesson

  1. A selector = the marker for which part to change (you can use tag names)
  2. selector { property: value; } is the basic shape
  3. You can line up several settings inside { }
  4. Separating with commas, like h1, h2, lets you set them together

Try it: make the heading text blue

Keep the pink background from style.css so far as it is. Using h1 as the selector, let’s make the text of Shima’s name blue.

body {
  background-color: pink;
}
h1 {
  color: blue;
}

The body lines above stay as they are. What you’re adding here is the three lines of h1 { color: blue; }.

Browser view. Against the pink background, the heading with Shima’s name shows blue text
Specify “which part” to change with a selector, and only the spot you aimed at changes color.

The pink background is still just a placeholder for now.

FAQ

What if I wrote CSS but it doesn't work?
Check that the selector's spelling matches the HTML tag name, and that you haven't forgotten a colon, semicolon, or curly brace. A single punctuation slip can knock out all the settings after it at once.
Can I apply the same setting to several selectors at once?
Yes. By lining them up separated with commas, like h1, h2, you can apply one setting to several selectors at the same time.
Can I write selectors in uppercase?
For tag-name selectors, lowercase is the standard. Class names, which you'll learn later, distinguish uppercase from lowercase, so write them with exactly the same spelling as on the HTML side.