To start off, you need to make sure there is no annoying default browser styling interfering with your own styling settings.
Yes, there is indeed already a (basic) stylesheet invisibly present when viewing your site inside a browser. E.g. header elements have a bigger font, all elements have some margin, links are blue and have an underline.
Your own stylesheet is an appendix to the browserspecific default stylesheet.
You want to construct site templates that are identical to your predefined design, having absolutely positioned elements, that are perhaps already relatively positioned.
But we do not know for certain which value is set by default on any of these elements (in every browser). We need to set our own values, on which we can base other stuff.
Therefore, remove the default margin and padding that is perhaps present on an element.
* addresses all HTML elements
Disadvantage is ofcourse that you now need to redefine all margins and paddings. Big fuzz about nothing:
And we're set again, but this time, we know what is set.
To enhance readability, set a big fontsize, show some letter spacing and use a higher lineheight, and last but not least: use a font that is not fatiguing to read on screens, a sans-serif font, like Verdana, Arial, Trebuchet,...
All these settings can be defined for the BODY tag because of inheritance: also true for the child elements.
Line-height is best set on the Paragraph tag only, and that probably is the only place showing line-height too, because of the multitude of lines of text. (Titles on the contrary often are one-liners.)