Lesson 02 · Styling basics

Selectors

A selector is the pattern at the start of a CSS rule that picks which elements the rule styles. Watch the browser test three rules against four elements: the type selector p reaches every paragraph, the class selector .new reaches every element with class="new", and the ID selector #top reaches the one element with id="top". Each rule then restyles only the elements it matched.

9 min9 steps5 questionsBeginner

Fig 2 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01The page has <h1>Menu</h1> and three <p> elements. Which elements does p { font-size: 20px; } style?

p is a type selector: a tag name. It matches every element whose tag is p, so all three paragraphs. The h1 is not a p.

02Which selector matches every element with class="new"?

A class selector is a dot followed by the class name: .new. A bare name like new would be a type selector looking for a <new> tag.

03Which selector matches the element <h1 id="top">Menu</h1> by its id?

An ID selector is a hash followed by the id: #top.

04Why does an ID selector reach at most one element on a valid page?

HTML says an id must be unique in the page. A class can be put on as many elements as you like, which is why classes are for reusable styles.

05<p>Coffee</p> and <p class="new">Tea</p> are on the page. Which does .new { color: tomato; } turn tomato?

A class selector looks only at the class attribute, not the tag. Tea has class="new"; Coffee has no class.

Key terms

Glossary

Selector: The pattern at the start of a CSS rule that picks which elements the rule styles.
Type selector: A selector that is just a tag name, such as p. It matches every element with that tag.
Class selector: A dot and a class name, such as .new. It matches every element whose class attribute contains that word.
ID selector: A hash and an id, such as #top. It matches the element whose id attribute is top.
class attribute: An HTML label you can put on any number of elements: class="new". One element can have several classes, separated by spaces.
id attribute: An HTML name for one element: id="top". It must be unique in the page.
Match: An element matches a selector when it fits the pattern; only matching elements get the rule's declarations.

Fine print

Notes and sources

No two rules here set the same property on the same element, so they never compete. When two matching rules do set the same property, the cascade and specificity decide which one wins.
A real browser works out every element's style in one pass. The figure tests one rule at a time so you can see what each selector reaches.
There are more selectors: * (the universal selector) matches every element, a comma joins selectors into a list (h1, .new { … } styles both), and an element can wear several classes, separated by spaces: class="new big".
The HTML card shows the body of the page. The full index.html also has <!DOCTYPE html>, <head> with a <title>, and <link rel="stylesheet" href="style.css"> inside <head>.
Save the full page as index.html and the three rules as style.css in the same folder, open index.html in a browser, and you get a teal heading, three 20px paragraphs, and Tea and Cake in tomato.

Quiz Unlocks after the last step.