User-agent style

As explained in Tiny CSS Projects

Default styles are the initial presentation rules applied by a browser or operating system when author styles do not override them.

User-agent styles are the browser’s built-in CSS rules for HTML elements. They provide a readable starting appearance before author CSS is added, but different browsers can render the same element somewhat differently. section 1.4.1

User-agent styles commonly provide:

• Larger, bolder headings that distinguish headings from ordinary text. section 1.4.1
• Font sizes, border styles, and basic layouts for controls such as text inputs and progress bars. section 1.4.1
• The lowest-priority stylesheet origin, so author styles and user styles can override it through the cascade. section 1.4 section 1.5

Progress bars and platform defaults

A bare <progress value="32" max="100">32%</progress> element displays using browser and operating-system defaults. Its appearance can vary across environments, and the colored progress indicator may offer few styling hooks. Customization therefore requires workarounds whose results and pitfalls depend on the platform. section 3.6

Resetting a fieldset

A fieldset can remain meaningful to assistive technology while visually blending into a design. Reset its browser defaults with border: 0, padding: 0, and margin: 0. section 10.2

Figure 3.14 Progress bar starting point in Chrome

Compare the unstyled progress bar with later author styling to see which appearance comes from user-agent rules. section 3.6

How Tiny CSS Projects covers it

How deep it goes

Defines the stylesheet origin, priority, common properties, and platform variation, but stops short of detailing browser implementations.

Examples

Uses headings, form controls, progress bars, and fieldsets to show defaults, variation, and practical resets.

What it assumes

Assumes basic HTML and CSS declarations while introducing stylesheet origins, cascade priority, and browser defaults.

What you can do after

Apply CSS resets and overrides while anticipating browser differences in native controls.

How it connects

Connects user-agent styles with the CSS cascade, specificity, author stylesheets, user stylesheets, and accessibility.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  WordPress Power Toolkit: Harness AI to build next-level websitesBrowser default styles are built-in CSS styling values that a browser applies to HTML elements when no author styles override them.
• 

  liveBookmanning.com
  CSS in Depth, Second EditionThe rendering defaults supplied by a web browser through its user-agent stylesheet.

Compare how 3 books explain user-agent style →

Related concepts

• margin propertyconfigures · The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
• browserproduced by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.
• display propertyconfigures · The CSS display property specifies how an element participates in layout and the type of box it generates.
• stylesheetkind of · A stylesheet is a text document containing CSS rules that specify the visual presentation of structured documents and their elements.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.