CSS Magic
Loading simulation…
flagWhat you'll discover
- arrow_forwardWrite CSS rules with selectors, properties and values
- arrow_forwardColour text and backgrounds on real elements
- arrow_forwardRound corners with border-radius and centre text
- arrow_forwardTarget elements by tag name and by class
Selectors are name tags
A CSS rule has two parts: a selector that picks WHICH elements to style, and declarations that say HOW. Writing h1 { color: hotpink; } means "find every h1 and paint its text hot pink". The selector is like calling a name in a classroom — everyone with that name stands up. Tag selectors like h1 or p choose every element of that kind, while a class selector like .card chooses only elements you have labelled with class="card". One rule can restyle a hundred elements at once.
Properties and values
Inside the curly braces go declarations: property, colon, value, semicolon. color changes text colour, background-color fills behind an element, border-radius rounds the corners, and text-align: center centres the content. Colours can be names like tomato, or hex codes like #EC4899 — six digits describing red, green and blue light. Miss a semicolon and the browser may quietly ignore the next line, so when a style mysteriously fails, check your punctuation first!
The cascade
The C in CSS stands for cascading: rules flow together, and when two rules disagree, the more specific one — or the one written later — wins. Style every paragraph grey, then give one special paragraph a class with red text, and that paragraph follows the red rule because a class beats a plain tag selector. Designers use the cascade deliberately: broad rules set the general look of a site, then a handful of specific rules handle the exceptions.