Browser Defaults | Learning Web Design
The following document is only HTML, no CSS at all. But even without a single line of custom CSS, there are clearly style choices made; what gives?
All web browsers apply a certain amount of default styling to HTML documents and, as a result, h1 elements are larger than h3s, links are usually blue and underlined (until a user clicks on them, in which case they turn purple). Some elements, such as button are heavily styled with colors, borders and shadows to varying degrees depending on which browser you’re using.
These photos were all taken in macOS and will look different based on your OS, too. Hover over each image to see which browser each screenshot was taken in.
These browser defaults do not go away when you add your custom stylesheet to a web page. Any styles you write will only add on to what is already done by the default browser styles. This makes it extra useful to know what the browser defaults are.
This doesn’t mean you need to memorize the exact styles; a rough idea is helpful enough. You don’t need to know the size of margins added to headings by browser defaults – but should instead simply know that each heading (h1-h6) has a default top and bottom margin added to it by default.
