Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Opposite to CSS Reset. I Need Browser defaults for a div element

Tags:

css

Just like css reset would remove all browser styling defaults, is there any css script that would bring back all browser defaults overriding parent css styles and classes just like an iframe?

Just like an iframe uses browser defaults if no source is used and if we inject simple html into it, I would like to impose browser defaults on to a div.

<div class="container">
<div class="row">
    <div class="10u two-col">
        <div class="col1">
          <div class= ??????>   ------> This div should have browser defaults just like an iframe.
            <h1> Hello World </h1>
            <ul>
              <li>point one</li>
              <li>point two</li>
              <li>point three</li>
            </ul>               
          </div>
        </div>
    </div>
</div>

like image 923
user3438120 Avatar asked Jan 23 '26 11:01

user3438120


2 Answers

I dont believe there is an opposite for CSS reset type stylesheets (Update: because of this I created one here), but you can include the default styles used by the spec or a particular browser.

See here for the default HTML4 stylesheet (see this for HTML5)

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 }
}

Or:

  1. Firefox

  2. Internet Explorer

  3. Chrome / Webkit

nb: unable to paste in code, exceeds character limit

like image 200
SW4 Avatar answered Jan 25 '26 06:01

SW4


You can use all: initial

Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/all

Support: http://caniuse.com/#feat=css-all

like image 42
Yukulélé Avatar answered Jan 25 '26 04:01

Yukulélé



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!