A basic CSS3 reset

by Ochronus on April 18, 2011

As a sequel to my HTML5 page structure article I present a basic CSS1/2/3 reset:

?View Code CSS
* { outline: 0; }
html, body { min-height: 100%;  }
body, ul, ol, dl { margin: 0; }
img { border: 0; }
article, aside, audio, footer, header, nav, section, video { display: block }
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="submit"] { -webkit-appearance:none; }
img.right { float: right; margin-left: 2em; clear: right; }
img.left { float: left; margin-right: 2em; clear: left; }
table { border-collapse: collapse; }
th { background: #000; color: #fff; }
td { padding: 1em; border: 1px solid black; }

Tagged as: css, css3, howto, html, html5

  • Pingback: HTML5 page structure

  • Raito Yitsushi

    It’s trivial… for us but you don’t think about any comments? ^_^

    eg:
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }
    remove the browser default dotted style border on buttons… which is already annoying…

    • http://blog.mostof.it/ ochronus

      I just wanted a quick post, but you’re right, I’ll probably explain the items later :)

  • http://www.palleman.nu Palle Zingmark

    Hi,
    I see that you use * { outline: 0; } to remove the focus indicator, please don’t do that, unless you replace the outline with something else that makes it easy to see which element has keyboard focus.
    Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site.

  • qwerty

    Good and up to the point. Just a couple of thoughts:

    Well, comments would be helpful.

    Also if you want to have a fine and consistent cross-browser control use pixels instead of em. See a little bit more here: http://css-tricks.com/css-font-size/

    Then, for a basic CSS reset, why the table border collapse at all.

    And finally, for the TH you have set #FFF, but on the TD element you use “black”. Please, be consistent.

  • Pingback: ??????? » [Web] ????

Previous post:

Next post: