CSS Layout: A Good Base
Update:
Eric Meyers now has a complete CSS toolbox where you can always find the newest version of his CSS Reset
When designing websites for the 21st century you will want to consider using Cascading Style Sheets (CSS). CSS is helping front end developers present users with more visually stunning sites than use to be possible when tables (*gasp*) were used for web layouts. The true beauty of CSS however lies in the capability of having clear, modular, and concise code. The purpose of this post is to dive into CSS by first resetting and then setting new base styles in which to develop with.
When building a good base CSS layout the most integral part in developing a new website with CSS is to first reset all browser default styles. The reasons are two fold: First, you effectively begin with a clean styling template (everything is set to nil: margins, padding, line-heights, fonts, etc.); Second, you will have a far greater ability to create an almost pixel perfect representation of the new site cross-browser. This can be accomplished many different ways. The easiest of which would be to apply a global reset to all elements within your HTML by specifying a CSS declaration of * { margin:0; padding:0; }. This however has it’s downfalls and misses some important styles (of which I won’t get into here). For an all purpose solution to this problem I recommend using Eric Meyer’s solution. This solution is a tried and true method for resetting all browser default styles.
The next piece of our CSS layout will be to set new base styles by adding more CSS declarations. I recommend setting many different elements to many different values, the end result of which is too great to get into here, so I will simply go over the most basic.
Set the font size on the body tag to 62.5%, set your background to white, and set a base text color. This gives you the ability to use ems (now 1em is equal to 10px) to specify font sizes and gives you a complete font-sizing solution that works with all browser’s native text resizing functions. (When using pixels to represent font sizes Internet Explorer will not re-size text.)
Set the font-size of the p tag to 1.2em and set a line-height between 1.5em and 1.8em. This creates greater legibility and ultimately leads to greater comprehension.
Set the a, a:link, a:visited, a:hover, a:active, and a:focus tags to something new. I recommend something you will probably use universally such as a text-decoration property and color. It is important to set them in this order and by setting a:focus you enable disabled (keyboard) users to navigate your site.
Set the h1 through h6 tags to new sizes, colors, and line-heights. I recommend starting at 3.6em for your h1 tag and working down.
Set new spacing values to keep a good baseline between elements for your p, ul, ol, dl, h1 – h6, and table tags. I recommend using a margin-bottom of at least the line-height value of the p tag. Make sure however that this value is set in pixels not ems, thus preventing larger bottom margins on elements that have a font-size larger than 1.2em.
Finally set up your re-usable classes. Typically I use a class to clear a float, set a font to a normal weight, justify text-alignment, and align block elements to the left, right, and center.
Hopefully this will help you develop a good base CSS layout that you can reuse from project to project. The truly wonderful thing about web development is that you can continue to build on this base as well as learn from others. Happy coding!
If you would like to download a completed copy of a sample base CSS layout see below:
Loading ...
Whoa… this site is pretty awesome
your layout is really well designed, and your blogs are (judging from what i’ve read) very interesting. heehee… consider yourself favorited. 