CSS Selectors
Choose elements and apply styles.
On this page
The concept
Selectors target elements. A class selector begins with a period. Keep text contrast and responsive widths in mind.
Code example
CSS
.card {
max-width: 40rem;
padding: 1.5rem;
border: 1px solid #ddd;
}Follow the code
Open the walkthrough to inspect the example one step at a time.
Show guided walkthrough
Guided walkthroughReady
1
.card {2
max-width: 40rem;3
padding: 1.5rem;4
border: 1px solid #ddd;5
}Follow the example
Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.
View the complete dry-run table
| Step / line | What happens | State after step | Output so far |
|---|---|---|---|
| Select elements whose class is card. | — | — | |
| Limit their width to 40rem. | — | — | |
| Add inner spacing of 1.5rem. | — | — | |
| Draw a one-pixel light border. | — | — |
Behind the scenes
How CSS processes this code
The browser matches selectors, computes styles, and paints the result. CSS does not produce console output.