Before you even start contemplating the code for your new design, it’s good practice to normalize all elements in your first lines within the CSS file. 

“Normalizing” – means you are overriding all browser styles; which will appear if you do not provide code for styling.

Due to the fact that your final design should show well with a variety of browsers, you should also know that different browsers have different style defaults. By normalizing your CSS code, you are actually setting all these styles under your control (to some degree).

Here’s a list of normalizing your elements:

/*Margin and Padding */
body, div, dl, dt, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blocquote
{margin: 0; padding: 0}

/* Font Size */
h1, h2, h3, h4, h5, h6, p
{font-size: 100%}

/* Normalize Lists */
ul, ol
{list-style: none}

/* Font Style and Font Weight */
p, h1, h2, h3, h4, h5, h6, strong, address, caption
{font-style: normal; font-weight: normal}

/* Remove borders or spacing from tables */
table
{ border-collapse: collapse; border-spacing: 0}

/* Remove borders from images */
img
{ border: 0}

Take in consideration all these style elements before you actually start your coding in CSS and you should have a clean slate when testing in different browsers. Good luck!

Related articles by Zemanta

• Turn Your Sketches into CSS Based Websites (labnol.org)

Wandering about in Barnes & Noble the other day, I discovered a little gem called “Before & After: How to Design Cool Stuff” written by John McWade. As an avid reader of design books and articles I was pleasantly surprised to find out the basic and not so basic elements not only of good but excellent design.

Although I design for over 10 years now, the information I found in this book was an eye opener; and I thought I knew how to design stuff. Needles to say – after reading and studying it, now I can design cool stuff. This book should be on the desk of every designer who respects his craft.  

The real life projects presented are easy to follow, the “before & after” offers a wonderful way of observing a project from start to finish and above all John McWade takes you to a grand journey into the world of design. He presents key elements of designing brochures, logos, ads, DVD covers, websites, newsletters and even presentations.

Compared to other books, the “Before & After: How to Design Cool Stuff”, has no design fluff or unnecessary explanations. It’s straight to the point, bare bones solid design information makes it a great read.  It’s very clear to me that the author wrote it with the designer in mind, offering detailed and technical advice on concrete examples.

What you’ll learn from the book:

• How to “manipulate” the viewer’s eye to concentrate on specific areas of the design
• Basic techniques of line, motion and color
• How to select the right typography for your design
• How to visually communicate with art

These are just a few but what makes this book fantastic is the simple explanation of why a design works in one way and not another, offering the blueprint for cool.

by Gareth Hardy, Published in Smashing Magazine

Created by Transformer Studio

With the power of the Web, and more eyes watching than ever, it’s important for a business to communicate its unique message clearly. The easiest way to recognize a company and distinguish it from others is by its logo. Below, we go through 10 common logo design mistakes that you should avoid if you want to create a successful and professional logo.

Read the entire article here…

You can also check out this great article about “What Should You Get from Your Logo Designer” : http://www.thedesigncubicle.com/2009/01/what-should-you-get-from-your-logo-designer/

Here it is, the brand new Smashing Book. Announced several months ago in a couple of posts, it has finally arrived. You can buy the Smashing Book right now. And in case you didn’t know, it’s available here exclusively. The book is available and can be shipped right away.

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.

Whether you are looking to design a brochure or a new website the importance of typography can’t be overestimated. Elegant fonts can help to convey the message in a more convenient way. There are many excellent profession fonts that you can find for free over the web.

Quality fonts usually have a price attached in order to download them. You can find them on a variety of sites starting at $50 out there but this article will give you a list of resources that are free to download.

Free Fonts Resources

Here are the sources I visit all the time for my projects:

1001 Fonts – http://www.1001freefonts.com/
Excellent Source of over 6500 fonts. If you chose to download another 10,000 fonts in one click that will cost you $19.99.

DaFont – http://www.dafont.com/
Over 9000 fonts free to download

Urban Fonts – http://www.urbanfonts.com/

Search Free Fonts – http://www.searchfreefonts.com/
New SearchFreeFonts.com collection contains over 13,000 free fonts and over 91,000 commercial fonts

Font Stock – http://www.fontstock.net/
They offer lots of free fonts as well as links to buy other commercial fonts.

Abstract Fonts – http://www.abstractfonts.com/
Over 12,000 fonts and a forum where you can ask questions about a particular font you want to use.

Fontex – http://www.fontex.org/
Hand-picked fonts and other resources for your designs.

High Fonts – http://www.highfonts.com/

Free Fonts – http://www.free-fonts.com/

I hope you enjoy this short but abundant list of free fonts for all your design needs.