What are user agent styles and what are the ways to…

User agent styles are a set of default CSS styles that browsers apply to HTML elements before loading any author stylesheets or user stylesheets. They provide the basic appearance of elements (for example, paragraph margins, bold text in <strong>).

You can work with them in the following ways:

Overriding styles: Author styles with higher specificity or later in the CSS code override user agent styles.
```
p {
  margin: 0; /* Overrides the default margin */
}
```

Using CSS Reset or Normalize.css: These libraries reset or unify the base styles of elements, neutralizing differences in user agent styles across browsers.

Reset CSS: Completely removes most user agent styles. Example:

/* Example from Eric Meyer’s Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* Rest of the reset styles */

Normalize.css: Adjusts user agent styles to make them more consistent across browsers while preserving useful default styles.

/* Example from Normalize.css */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
/* Rest of normalize styles */

Checking in DevTools: Browser developer tools allow you to see which user agent styles are applied to a specific element.

Understanding user agent styles is important for predictable element rendering and cross-browser compatibility.

What are user agent styles and what are the ways to work with them?