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)
Claudiu Geanta is a successful online business owner and founder of Design by Satori Inc. & ProIncome Marketing, LLC. He teaches businesses how to build an optimum online presence. He is also and accomplished web designer and photographer. You can follow him on twitter.
Read more from this author
