Stop inheriting from user agent

Question

I am trying to create a styled h4.

But my h4 keeps inheriting from some user agent?

What is this user agent.

How can I stop it from doing so. Its adding effects that I dont want.

enter image description here

see what is that you do not like using the browser tools and changed them using css. - what browser do you use ? — Aristos, Aug 20 '12 at 06:57
@Aristos Chrome. This is for my website so I want it reflected among all visiters. — Mcloving, Aug 20 '12 at 07:00

score 1 · Answer 1 · answered Aug 20 '12 at 06:56

1

To stop the inheriting from the user agent (styles your web browser chooses by default for various HTML elements) madness you need to use a good CSS "reset".

Read http://meyerweb.com/eric/tools/css/reset/ for an intro into a "reset".

A list of different "resets" http://www.cssreset.com/

Also if you are using some framework like Twitter Bootstrap for example it will already have a reasonable reset included.

answered Aug 20 '12 at 06:56

Strelok

50,229
9
102
115

So basically override the useragent by defaulting them all back to something sensible? the user agent is the browser? So each browser would be different? – Mcloving Aug 20 '12 at 06:59
@Mcloving that's correct. All browsers (user-agents) assign some default styles (usually padding and margin) to all HTML elements. A CSS reset forces all of this to get reset to some value that will be same in all browsers (usully 0) so you are in full control of the styles. – Strelok Aug 20 '12 at 07:21
Thanks for info :) Went with other answer, but +1 for info. – Mcloving Aug 20 '12 at 11:06

score 1 · Accepted Answer · answered Aug 20 '12 at 08:36

No, the h4 element (or the h2 element, as in your screen shot) does not inherit from some user agent. Instead, it gets property values directly from a user agent stylesheet. “User agent” means a browser in practice (in principle, it could be an indexing robot, too, for example).

You can stop that simply by assigning properties in your style sheet. In fact, you have done that in your example: font-size and font-weight have been overridden. The setting display: block could be overridden e.g. by adding display: inline into your style sheet.

The margin issue is trickier, as WebKit browsers have their oddities there, and the -webkit-margin properties are shown as if they had not been overridden. But in fact they are ignored when the standard margin properties are set, as they are in your case; check out the “Metrics” pane to see this.

So you are already overriding the user agent style sheet settings. In general, a user agent style sheet could contain anything, but using a reset.css style sheet is still a wrong approach mostly. The default style sheet for HTML 4 in the CSS 2.1 spec is fairly realistic and tells you what to prepare for, e.g. display, margin, font-weight, and font-size for headings.

Thanks for info. The h4 was the main problem (looked completely different) but I changed it to span, so couldnt screenshot it. It all makes sense now. :) — Mcloving, Aug 20 '12 at 11:07

Stop inheriting from user agent

2 Answers2