What you will learn
- Link a stylesheet to an HTML page and write basic rules
- Predict which rule applies using specificity and source order
- Control element size and spacing with padding, border and margin
A CSS rule has a selector and a set of declarations. In nav a { color: navy; }, the selector nav a targets every link inside a nav element, and the declaration sets the text colour. You can select by element name, by class with a dot such as .button, or by ID with a hash. Classes are the most common choice because they are reusable.
When several rules target the same element, the cascade decides which wins. A more specific selector beats a less specific one, so a class beats an element name, and an ID beats a class. If two rules are equally specific, the one written later wins. Some properties, like font and colour, are also inherited by child elements from their parents.
Every element is a rectangular box made of content, padding, border and margin, from the inside out. By default, width applies only to the content, so padding and border make the box bigger than you expect. Adding box-sizing: border-box to all elements makes width include padding and border, which makes layouts far easier to reason about. Developer tools show each box visually.