Providing layout style for your Magento theme

The first thing you can provide for your Magento theme is some basic CSS to define the column's width and layout. Before you do this, you can use a simple CSS reset to remove unnecessary margins and padding from the elements:

* {
margin:0;
padding:0;
}
img {
border:0;
vertical-align:top;
}
a {
color:#1e7ec8;
text-decoration:underline;
}
a:hover       {
text-decoration:none;
}
:focus {
outline:0;
}

Tip

An alternative to CSS resets is normalize.css, which you can download from http://necolas.github.io/normalize.css/.

To do this, you can make use of what is provided in Magento's Default theme. Open the styles.css file in the /skin/frontend/default/default/css/ directory and you will see a block of CSS that begins:

/* Layout ================================================================================ */
.wrapper {
min-width:954px;
}
.page-print {
background:#fff;
padding:25px 30px;
text-align:left;
}
.page-empty {
background:#fff;
padding...