CSS Resets

This is the first of many articles related to my adventures with CSS. I haven't actually really had the need to use CSS for about 6 years. I always had avoided it. When Twitter Bootstrap was released I was pumped because there was a way for developers to just focus on code and ignore the style. Recently, I decide that I'm going to write a cross-platform app using Adobe Phonegap. So, I'll need to get really familiar with CSS3 hardware transitions and styles.

Let's start with the basics. CSS resets.

Huh? What's the point?

Each browser renders elements in its own default way. Consider the following HTML:

<!doctype html>
<body>
  <p>Some paragraph</p>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</body>

output:

It looks liked you'd expect.

Now, let's modify it a bit, and add the following style:

* {
  padding: 0px;
}

output:

Notice the item list bullets are gone?

Let's modify it a bit more:

* {
  padding: 0px;
  margin: 0px;
}

output:

Now you'll notice that the margins are removed.

There is a case to be made against using the universal selector *, and that is that it ruins the margins and padding of form elements. But it's definitely a good start to understanding on you can make cross browser HTML look consistent.

CSS Reset Frameworks

Resources

If you made it this far, you should follow me on Twitter.

-JP

Want to test-drive Bitcoin without any risk? Check out my bitcoin wallet Coinbolt. It includes test coins for free.