Dave Woods - Freelance Web Design Warwickshire

HTML5 – CSS Reset

Over the coming weeks, I’m going to be writing a lot more articles on HTML5 which will go into detail and show how you can start using HTML5 elements today with progressive enhancement. To start this off though, you’ll need to use a new version of the CSS reset in order to view these new HTML5 elements correctly, even in the more modern standards compliant browsers.

HTML5 Reset

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, hr
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

If you’ve used Eric Meyer’s reset file then you’ll be familiar with a lot of what is included above as I used that as a starting point when I first started out with CSS and have adapted this file over the years to match my style.

Remove Firefox Scrollbar Jump

html { overflow-y: scroll; }

This is optional and won’t validate with a CSS2.1 validator, however it’s perfectly valid in CSS3 and I use it to force the vertical scrollbar to appear all the time in Firefox. Without it you may notice that shorter pages appear to jump when you navigate from a page that requires a scrollbar and one that doesn’t so I tend to include this within all my site.

Remove Bullet Points

ol, ul { list-style: none; }

This simply removes the bullet points from ordered and unordered lists. Some people do this on an individual basis where they require it but personally I prefer to take them off and then just add them back in where I want them. You might be able to do this on a more global level by applying a styling for all lists within the article section of the page for example.

Line Through the Del Element

del { text-decoration: line-through; }

The del element is used to show when part of a document has been changed and whilst nearly all browsers display this as a line-through by default it’s good practice to include this just to be double sure.

Reset Tables

table { border-collapse: collapse; border-spacing: 0; }

This bit of CSS removes the border spacing and makes sure that the space between the table cells is completely removed by collapsing the borders.

ABBR and DFN Elements

abbr[title], dfn[title] { border-bottom: 1px dotted; }

For the abbr and dfn reset I used the method used by HTML5doctor.com

This way, the style will only appear if there is a title attribute on the element. This is primarily for accessibility. For example, we use abbr regularly on this site but don’t always include a title attribute. We think it’s safe to assume all of our readers (no matter what device they’re using) know what HTML stands for. We do still use the abbr element to make sure screen readers read the text as H-T-M-L rather than struggling to pronounce “HTML”.

HR element

hr { display: block; height: 1px; border-top: 1px solid #ccc; margin:1em 0; }

This simply creates a consistent style for the horizontal rule element.

Form Fields

input, select { vertical-align: middle; }

This sets the form inputs so that they display nicely when inline. I’m also in the process of writing a form master CSS file to lay out forms in numerous different ways so that will be coming soon too.

HTML5 Elements as Block Elements

article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { display: block; }

Although modern browsers recognise the new HTML5 elements, they don’t display them as block elements which can cause a lot of problems when trying to style them unless you specifically apply block individually to these elements. Including this section within your CSS file solves this problem although in the future I suspect that browsers will display these elements as blocks anyway but at least for the time being you’ll need this.

Resetting Fonts

body, select, input, textarea { font: 0.625em/1 "Helvetica Neue", Arial, Helvetica, sans-serif; }
body { color: #fff; background: #252525; }

This section is probably open for discussion as technically it probably shouldn’t be included within the reset.css file as you’d want to change it depending on the project whereas a reset.css file should probably be a standard file that you can just drop in and include within any project. However, I like to just reset the fonts to 10px here and set the body background colour, font colour and font so that it’s consistent across the sites.

Summary

This is just a starting point for your HTML5 CSS so once you’re happy that this all makes sense you might want to take a look at the Getting Started with HTML5 tutorial that I wrote some time ago. It doesn’t go into too much detail but explains how you can start using HTML5 today using progressive enhancement with JavaScript to style HTML5 elements in older browsers.

Next up, I’ll be going into much more depth regarding each HTML5 element and explain how and where to use there new elements.

6 comments on “HTML5 – CSS Reset

  1. Pingback: HTML5 header element

  2. Etienne

    Hi,

    Firstly, thanks for this awesome stylesheet. I’ve been using it more and more.

    Secondly, a question. Is this part correct:

    … samp, hr
    small, strong, sub …

    Shouldn’t there be a comma between “hr” and “small”?

    Thanks again for an awesome stylesheet.


    Etienne

  3. Michael Raffaele

    I was just wondering, for the first part of your reset, wouldn’t the following achieve the same result?

    * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

    It looks like you have covered most elements, were there some you would like excluded from this initial reset? If so why? Or was there another reason for it?

  4. Pingback: HTML5 – CSS Reset | Glenn Mellor