CSS Star hack * {your css here}
Monday, March 31st, 2008The CSS star hack is one of my most favorite ways for developing any good site in CSS, allowing you to effectively reset any style on any element of your web page, saving you time and code if used correctly. But is it really the best way?
Firstly i will begin by explaining how and where i generally use the star hack within my css document.
Begin by opening your style sheet, and paste the css below to the very top of your style sheet :
Code:
* {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
What does it do?
By doing this we are effectively setting every element of the HTML document to have no margins, no padding and to set the font to verdana.
This can be of major benefit to you when building a website from scratch, mainly due to the fact that all most all browsers apply different padding, margin and font styles to every element. By applying the css shown above we are making things easy for ourselves by setting a blank canvas and stripping any elements of its previous styles.
Pros:
- Can increase productivity/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.
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.
