One thing that really frustrated me about web design is that every time i wanted to make a web page, I’d first have to set the margin/padding of all of the elements to zero (since different browsers assign different margins/paddings to elements), then re-adjust them to whatever i want. It was convenient, but it got tiresome quickly.

To overcome this frustrating routine, i had to make a reusable style sheet with default properties defined by myself. This way, I’d only need to do quick adjustments whenever i code a new page, since i know how i usually want my elements to look like.

The first line of code in the style sheet sets all of the elements padding and margin to zero; line height to 18 pixels and font family to Arial. I use ‘Arial’ (or sans-serif) most (if not all) of the time, so why don’t i just assign it beforehand to every element?

The second line defines paragraphs’ properties. The third is just a little trick to force FireFox to show it’s scroll bar (since IE constantly show the scroll-bar and i need a way to compare my layouts in both browsers perfectly). The rest of the lines define properties for lists (ordered and unordered), headers, emphasis elements and image links. These properties could be overridden later when they aren’t suitable for part(s) of my document.

Defining default properties beforehand saved me 50%+ of the time i used to spend on writing style sheets. It’s something you should consider if you’re not doing it already.