User-agent styles are the browser’s built-in rendering defaults. They give headings and paragraphs margins, lists indentation and bullets, and links familiar colors, sizes, and underlines. Author styles override them because they have higher cascade priority. section 1.1.1
Common defaults become visible when a page does not replace them:
- Headings receive larger font sizes and top and bottom margins. section 1.1.1
- Unordered lists receive left padding and disc markers. section 1.1.1
- Links appear blue and underlined unless author styles change them. section 1.1.1
Replacing navigation defaults
A navigation list can become horizontal by removing its padding and markers, displaying items inline-block, and assigning custom link colors, backgrounds, padding, rounded corners, and decoration. section 1.1.1
Listing 1.3 Overriding user-agent styles
h1 {
color: #2f4f4f;
margin-bottom: 10px; #1
}
#main-nav {
margin-top: 10px; #1
list-style: none; #2
padding-left: 0; #2
}
#main-nav li {
display: inline-block; #3
}
#main-nav a {
color: white; #4
background-color: #13a4a4; #4
padding: 5px; #4
border-radius: 2px; #4
text-decoration: none; #4
}
Inspect the CSS that overrides default heading margins and transforms a bulleted navigation list into styled horizontal links. section 1.1.1
Use revert when author styles should be undone while preserving the browser default, such as restoring a blue, underlined link. More specific declarations can still override revert. section 1.3.4
