CSS Star hack * {your css here}

Sunday, September 27th, 2009

The CSS star hack is one of my favorite hacks when developing any good website design in CSS. This CSS   star hack effectively allows you to reset any attribute to all HTML elements of your web page, saving you time and code if used correctly. It’s a great way to remove padding or margin on all HTML elements on your website giving you a blank canvas to start developing on especially when you have ie6, ie7 and ie8 to deal with! 

How to apply the CSS Star Hack

Firstly I will begin by explaining how and where I generally use the star hack within your css document.

Begin by opening your stylesheet, and paste the CSS below into the very top of your stylesheet :

Code:

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

What does it do?

By doing this we are effectively setting every element of the HTML document to have no margins, no padding and no borders.

This can be of major benefit to you when building a website from scratch, mainly due to the fact that almost all browsers apply different padding, margin and border defaults. By applying the css shown above we are making things easy for ourselves by setting a blank canvas and stripping any elements from its previous default style. 

Pros:

• Can increase productivity and reduce development time.
• Could reduce your code dramatically.
• Resets all HTML elements so they have no predefined styles allowing you to eliminate browser compatibility issues.

Cons:

• Could put more load on you browser.
• Technically it might increase code if not used appropriately.

Things to consider:

The CSS star hack is great for removing the margin and padding etc but don’t get too carried away. For example if you set the colour to be black, this will apply this to every element of your web page and can be very annoying. This will mean you have to set the colour on everything that is different thereafter and will increase your code dramatically.

Give it a go and see how much time and coding it can save you. I’ve never looked back since implementing it into every website I create.

Tags: CSS, web design, website design
Posted in CSS Tips & Tricks | 1 Comment »