Your first styles
Select an element. Change how it looks.
Selectors find elements
A CSS rule pairs a selector with declarations inside braces. h1 selects every h1 element. A declaration such as color: #526d14 sets a property to a value.
Classes are reusable
A class selector starts with a dot. The selector .note matches elements whose class attribute contains note. Several elements can share a class.
The cascade resolves conflicts
When declarations compete, the browser considers factors including origin, importance, cascade layers, specificity, and order. For otherwise equal rules, the later rule wins. Start with simple selectors.
Try the example
<style>
body { font-family: sans-serif; padding: 32px; background: #f7f8f2; }
h1 { color: #526d14; }
.note { padding: 20px; background: #d4ef78; border-radius: 8px; }
</style>
<h1>A little more character.</h1>
<p>CSS gives structure a visual voice.</p>
<p class="note">This paragraph has its own class.</p>Enable JavaScript to edit and run the example in the playground.
Your turn
Change the heading color. Add a border to .note.
Check your understanding
Which selector matches class="note"?
- #note
- .note
- note
Show answer and explanation
.note. A dot introduces a class selector. A hash introduces an ID selector.