Browsers' Default CSS For HTML Elements

Browsers' default CSS for HTML elements

A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found here

1. Default Styles for Gecko / Firefox
   --
2. Default Styles for Internet Explorer
   --
3. Default Styles for Webkit / Safari
   --
4. Default Styles for Blink / Chrome
   --
5. Default Styles for Opera
   --
6. Default Styles for HTML4 (W3C spec)
   --
7. Default Styles for HTML5 (W3C spec)
   --

Sample, per the default W3C HTML4 spec:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

possible to mark an html element to only use browser's default css?

There is no way in CSS to make an element isolated from the effects of style sheets on the page, and there is no way to tell that only browser default style sheet be applied. You can just set properties to desired values, or modify the style sheets being used so that selectors don’t match your element.

You might consider putting the search box in a separate file and embedding it via iframe (or object) inserted into a page and perhaps positioned absolutely. Within the framed document, the style sheets of the framing document have no effect.

Browsers' default CSS stylesheets

Not tabular, but the source CSS may be helpful if you're looking for something specific:

• Firefox default HTML stylesheet
• WebKit default HTML stylesheet

You're on your own with IE and Opera though.

Default css for custom html tags?

All unknown elements have a computed display value of “inline” source

You can use

* { ... }

for all elements, however this means that you overwrite anything non-specific set for default elements too.

It's better to keep to using HTML5 defined tags unless you're doing something along the lines of webcomponents.

How can we disable default browser style properties for elements?

You cannot disable browser default style sheets, just override them by setting properties to specific values. It is common to confuse the two.

This is a decision by browser vendors. They could give a page (scripts on a page) access to the browser’s stylesheet allowing it or parts thereof to be disabled. But they haven’t done that.

---

Related Topics