How to Locate the Default Style Sheet for a Browser

Browsers' default CSS for HTML elements

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

Default Styles for Gecko / Firefox
--
Default Styles for Internet Explorer
--
Default Styles for Webkit / Safari
--
Default Styles for Blink / Chrome
--
Default Styles for Opera
--
Default Styles for HTML4 (W3C spec)
--
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 }
}

How can I check the default css settings of a browser?

You can't really do that. You may be able to find reference guides if you Google it, but they would probably be guess-work. Your best option is probably to use a CSS Reset to make sure every browser is reset to the same CSS, then you have a good base to build on.

Eric Meyer's reset is my favourite: http://meyerweb.com/eric/tools/css/reset/

browser default style

For Firefox on Windows, you can look for the "gre/html.css" file in the installation directory.

Also view the W3C-recommended default stylesheet.

Chrome get user agent stylesheet

Take a look here:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

For some other browsers: Browsers' default CSS for HTML elements

Override browser form-filling and input highlighting with HTML/CSS

for the autocompletion, you can use:

<form autocomplete="off">

regarding the coloring-problem:

from your screenshot i can see that webkit generates the following style:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) as #id-styles are even more important than .class styles, the following may work:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) if that won't work, you can try to set the style via javascript programmatically

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) if that won't work, ~~you're doomed :-)~~ consider this:
this wont hide the yellow color, but will make the text readable again.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) a css/javascript solution:

css:

input:focus {
    background-position: 0 0;
}

and the following javascript has to be run onload:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

eg:

<body onload="loadPage();">

good luck :-)

5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) From here:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

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.

What is the difference between default, user and author style sheets?

Default style sheets are supplied by the browser vendor.

User style sheets are supplied by the user of the browser.

Author style sheets are supplied by the author of a webpage.

How to get the applied style from an element, excluding the default user agent styles

There is a read only property of document called 'styleSheets'.

var styleSheetList = document.styleSheets;

https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets

By using this, you can reach all the styles which are applied by the author.

There is a similar question about this but not a duplicate, in here:

Is it possible to check if certain CSS properties are defined inside the style tag with Javascript?

You can get the applied style from an element, excluding the default user agent styles using the accepted answer of that question i just mentioned.

That answer didn't supply the element's own style attribute content, so i have improved the code a bit:

var proto = Element.prototype;var slice = Function.call.bind(Array.prototype.slice);var matches = Function.call.bind(proto.matchesSelector ||                 proto.mozMatchesSelector || proto.webkitMatchesSelector ||                proto.msMatchesSelector || proto.oMatchesSelector);
// Returns true if a DOM Element matches a cssRulevar elementMatchCSSRule = function(element, cssRule) {  return matches(element, cssRule.selectorText);};
// Returns true if a property is defined in a cssRulevar propertyInCSSRule = function(prop, cssRule) {  return prop in cssRule.style && cssRule.style[prop] !== "";};
// Here we get the cssRules across all the stylesheets in one arrayvar cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {  return rules.concat(slice(styleSheet.cssRules));}, []);



var getAppliedCss = function(elm) { // get only the css rules that matches that element var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm)); var rules =[]; if(elementRules.length) {  for(i = 0; i < elementRules.length; i++) {   var e = elementRules[i];   rules.push({    order:i,    text:e.cssText   })  }   }  if(elm.getAttribute('style')) {  rules.push({    order:elementRules.length,    text:elm.getAttribute('style')   }) } return rules;}






function showStyle(){var styleSheetList = document.styleSheets;// get a reference to an element, then...var div1 = document.getElementById("div1");
var rules = getAppliedCss(div1);
var str = '';for(i = 0; i < rules.length; i++) {   var r = rules[i];   str += '<br/>Style Order: ' + r.order + ' | Style Text: ' + r.text;   }     document.getElementById("p1").innerHTML = str; 
}

#div1 {float:left;width:100px;}
div {text-align:center;}

<div id="div1" style="font-size:14px;"> Lorem ipsum  </div><br/><br/><a href="javascript:;" onclick="showStyle()"> Show me the style. </a> <p id="p1"><p>