A reset style sheet clears browser-supplied styling so you can start styling from a predictable baseline. Browsers quietly add defaults such as margins and padding; useful at first, perhaps, but less charming when you want full control of a page’s appearance. section 9.5 section 19.10
The basic idea is simple: remove defaults first, then add the spacing and visual design you actually want. Without replacing the removed spacing, content can sit tight against the browser window, so a reset is a fresh start rather than a finished design. section 9.5
A small reset can do three useful jobs:
- Remove default margins, preventing browser-added outer space from deciding the layout for you. section 19.10
- Remove default padding, leaving you to set interior space deliberately where it is needed. section 9.5
- Set box-sizing: border-box, as part of a consistent starting rule for element sizing. section 9.5 section 19.10
For a short page, the universal selector, *, is the quick all-elements option. It applies one rule to every element, which is unusual for ordinary styling but handy when every element needs the same clean slate. section 19.10
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Use this compact reset near the top of a style sheet. It removes margins and padding everywhere, then lets later rules restore just the space each part of the page needs. section 9.5
From edge-hugging to intentional space
Resetting a navigation bar’s margins can make it run close to the top and sides of the browser window. Add margins back to the navigation list and surrounding content to create the breathing room you want, instead of inheriting it by accident. section 9.5
For larger or more serious projects, a professional reset such as Normalize.css can provide a more consistent default across browsers. The goal is not to make everything plain forever; it is to spend less time wrestling with browser defaults and more time designing the page. section 9.5
A project baseline
A portfolio-page layout begins with a reset that sets margin and padding to 0 and font size to 100%, before Grid and Flexbox rules shape the page. The reset prepares the ground; the layout rules do the decorating. section 20.5 section 20.5
