EN

CSS・More control over the look

Decorate "on target" with classes

With a tag name, "everything" changes. To target just this paragraph or just this button, use a marker called a class. The lesson where CSS gets a lot more free.

A selector by tag name, like p or h1, changes all of that same tag together. But sometimes you’ll want to “make just this paragraph red” or “make just this button stand out” — that kind of precise aim. That’s where classes come in.

With just a tag name, it becomes “everything”

For example, if you write p, all the paragraphs on the page get the same look.

p {
  color: tomato;
}

This won’t let you make a fine-grained request like “just this paragraph here.” All or nothing. You’d like to narrow the aim a bit more, right?

Attach a marker, then decorate on target

So you give the tag you want to decorate a marker (a name) with class.

<p class="note">Make just this stand out</p>
<p>A normal paragraph stays the same</p>

And in CSS, you target it by putting a . before that name.

.note {
  color: tomato;
}

Now only the paragraph with class="note" turns red. The other paragraphs stay the same. You’ve hit just the one you wanted.

Run it for real and here’s what happens. Even with the same <p>, only the paragraph with class="note" turns red.

Only the two with .note turn red. The same class can be used any number of times, all decorated the same way at once.

How to decide class names

Names are free — but there are a few tips so you won’t have trouble later.

  • Use plain letters, numbers, and hyphens (-) (like profile-card)
  • Don’t start with a number (1st-card is no good, card-1 is fine)
  • Name it by its role, not its look (warning over red-text; even if you change the color to blue later, the name won’t become a lie)
  • Uppercase and lowercase are distinguished (Note and note are different things; making everything lowercase is the standard)

The third one is an especially important idea. Name a class by “what it is,” not “how you want it to look,” and you’ll get a name that lasts. At first, aiming for “a name whose meaning you’ll understand when you read it later” is enough.

Line up two classes to target just a part inside

Classes aren’t only used one at a time. Line up two with a space, and you can aim in a way that means “that class, inside this one.”

h1 .name {
  color: tomato;
}

This means “only the part with class="name", inside the h1.” The space between h1 and .name is the signal for “inside of.” It’s handy when you want to color just the name text, not the whole heading.

Run it for real and here’s what happens. The heading text stays as it is, and only the name part wrapped in <span class="name"> gets colored.

We targeted only the .name inside the h1. The surrounding text stays as it is, and just the name part gets colored.

Summary of this lesson

  1. A selector by tag name changes “all of that same tag”
  2. Attach a marker with class="name", and you can target it in CSS with .name
  3. The . (dot) goes on the CSS selector side only
  4. Lining them up with a space, like h1 .name, targets “that thing inside this one”

Try it: add a class to your cards

On Shima’s page, add a shared class card to the three <section>s: “Self-Introduction,” “Favorites,” and “Contact.” Also add class="name" to the <span> for the name.

<section id="about" class="card">
  ...
</section>
.card {
  background-color: white;
}
h1 .name {
  color: #e8734e;
}

Since you put the same class="card" on all three <section>s, writing the CSS just once gives all three at once a white background. And just the name turns a warm orange.

Browser view. The three boxes — Self-Introduction, Favorites, and Contact — turn white, and only the name text in the heading turns orange.
The three with the same class all get the same look at once. And only the name changes color, on target.

This .card is the beginning of “Shima’s white card,” which you’ll build up with borders, rounded corners, and shadows in the chapters to come.

FAQ

What's the difference between class and id?
Both are markers you attach to a tag, but a class can be used any number of times with the same name, while an id is a nameplate used only once per page. For styling the look, class is the basic choice; id is used for things like the destination of an in-page link.
Can a class name use non-English characters?
It will technically work, but the standard is to use plain letters, numbers, and hyphens. Since code around the world follows this convention, it's a good idea to get used to English-word names like note or card.
What if I added a class but the CSS doesn't take effect?
Check that the name of the class on the HTML side and the name on the CSS side match exactly, character for character. Uppercase and lowercase are distinguished too. Forgetting the leading dot on the CSS side is also a common cause.