Resetting everything in CSS

If you are an experienced CSS styler like me, you would have sometimes notice how different web browsers apply their own styles to elements which sometimes look unappealing.

For example, if you set the width of a element just inside the body to 100% and also apply a padding it would go beyond the horizontal width of the screen and you will be seeing a horizontal scrollbar. Another example is when you use fieldsets, Google Chrome shows a dark grey 2px solid border around the fieldset element.

Here’s a quick tip to normalize everything and start styling each element from scratch. Just write, at the start of the stylesheet:

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;

The above four properties will apply to all the elements and remove all thier styles (all of them). All the elements will look plain (you won’t even see a border around a textbox). Then you can start styling each and every element seperately so as to avoid any confusion. Doing this will ensure that your styles look the same even if the browser is changed. If you want to normalize everything without losing every single style of every element, you can use normalize.css.


Your Thoughts -

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s