Classes and ids in CSS

Classes are for styling, ids for anchors and labels — their weights differ.

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background: #14161c;
}

.card.featured {
  outline: 2px solid #7c5cff;
}

#page-title {
  font-size: 2rem;
  letter-spacing: -0.02em;
}

How it works

1. A class selector starts with ., an id with #.
2. An id outweighs any number of classes, which makes it hard to override.
3. Two classes on one selector require both to be present.

Keywords and builtins used here

• background
• card
• em
• featured
• outline
• padding
• px
• rem

The run, in numbers

Lines

14

Characters to type

175

Tokens

45

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 39 seconds.

Type this snippet

Step 2 of 6 in Selectors, step 2 of 26 in Selectors & the box model.

← Previous Next →