body{
    text-align: center;   /*centra in IE 5.x */
    }

div#container{
    width: 760px;
    margin: 0px auto;   /*centra negli altri browsers*/
    text-align: left;   /*ripristina l' allineamento*/
    } 



.box1 {  
background: #999999;  
width:200px;  
padding: 10px;  
-moz-box-shadow:0px 0px 25px #777777;  
-webkit-box-shadow:0px 0px 25px #777777;  
box-shadow:0px 0px 25px #777777;  
 } 


#box2 {  
background: #FF9933);  
width:300px;  
padding: 10px;  
-moz-box-shadow:-5px -5px 2px #999;  
-webkit-box-shadow:-5px -5px 2px #999;  
box-shadow:-5px -5px 2px #999;  
} 

.box5 {  
background: rgb(238, 238, 238);  
width:200px;  
padding: 10px;  
-moz-box-shadow: 2px 2px 2px #333333, 5px 6px 3px #30F744;  
-webkit-box-shadow:2px 2px 2px #333333, 5px 6px 3px #30F744;  
box-shadow: 2px 2px 2px #333333, 5px 6px 3px #30F744;  
} 



.button{	
float:left;	
font-size:110%;	
font-weight:bold;					
border-top:1px solid #999;	
border-left:1px solid #999;	
border-right:1px solid #333;	
border-bottom:1px solid #333;	
color:#333;			
width:auto;	
}

	
.button:hover{		
border-top:1px solid #333;	
border-left:1px solid #333;	
border-right:1px solid #999;	
border-bottom:1px solid #999;		
color:#333;						
}
	
.button span{	
background:#d4d0c8 url('images/bg_btn.gif') repeat-x;				
float:left;	
line-height:24px;	
height:24px;		
border-right:1px solid #777;	
border-bottom:1px solid #777; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0			
}	
	
.button:hover span{	
border-right:medium none; border-bottom:medium none; border-top:1px solid #777; border-left:1px solid #777; background:#d4d0c8 url('images/bg_btnOver.gif') repeat-x; cursor:pointer		
}	



.menuLink { font-size:12px; font-family:verdana; text-decoration:none; color: #000000 }
.menuLink A:link { font-size: 12px; text-decoration:none; color: #000000 }
.menuLink A:active { font-size: 12px; text-decoration:none; color: #000000 }
.menuLink A:visited { font-size: 12px; text-decoration:none; color: #000000 }
.menuLink A:hover { font-size: 12px; text-decoration:none; color: #CC0000 }


.menuFooter { font-size:10px; font-family:verdana; text-decoration:none; color:#CCCCCC }
.menuFooter A:link { font-size: 10px; text-decoration:none; color: #CCCCCC}
.menuFooter A:active { font-size: 10px; text-decoration:none; color: #CCCCCC }
.menuFooter A:visited { font-size: 10px; text-decoration:none; color: #CCCCCC }
.menuFooter A:hover { font-size: 10px; text-decoration:none; color: #FF9933 }

.menuTable { font-size:11px; line-height: 18px; text-align: justify; font-family:verdana, aria,sans serif; text-decoration:none; letter-spacing: 1px; color:#000000 }
.menuTable A:link { font-size: 11px; text-decoration:none; color: #FF9933 }
.menuTable A:active { font-size: 11px; text-decoration:none; color: #FF9933 }
.menuTable A:visited { font-size: 11px; text-decoration:none; color: #FF9933 }
.menuTable A:hover { font-size: 11px; text-decoration:underline; letter-spacing: 1px; color: #FF9933 }

.Title1 { font-size:16px; font-weight: bold;  font-family: arial,arial narrow, verdana, san serif; text-decoration:none; letter-spacing: 1px; color:#000000 }

.Title2 { font-size:14px; font-weight: bold;  font-family:verdana; text-decoration:none ; letter-spacing: 3px; color:#CC0000 }

.Title3 { font-size:12px; font-weight: bold;  font-family: arial, san serif; text-decoration:none ; letter-spacing: 1px; color:#CC0000 }



.menuPercorsi { font-size:14px;font-weight: bold;  font-family:arial, san serif; text-decoration:none; letter-spacing: 0px; color:#777777 }
.menuPercorsi A:link { font-size: 14px; text-decoration:none; color: #777777 }
.menuPercorsi A:active { font-size: 14px; text-decoration:none; color: #777777 }
.menuPercorsi A:visited { font-size: 14px; text-decoration:none; color: #777777 }
.menuPercorsi A:hover { font-size: 14px; text-decoration:none;  color: #000000 }

}




/*------------------------ box x testo e immagini ------------------------*/

Ecco il codice HTML minimale:

<div class="textimage">
<img src="layout.jpg" alt="">
<h2>Layout</h2>
<p>Qui il testo...</p>
<div class="clearer">&nbsp;</div>
</div>


Ed ecco il foglio di stile:

div.textimage{
width: 400px;margin-bottom: 10px;     
border: 1px solid #000;background-color: #eee
}

div.textimage img{
float:left;
margin: 10px
}

div.textimage h2, div.textimage p{
margin:0 10px;
padding: 0
}

div.textimage h2{
margin-top: 10px
}

div.clearer{clear: left}



/*------------------------ pulsanti menu grigi in 3D ------------------------*/


.button_menu{
font-weight:bold;
border-left:3px solid #c0c0c0; 
border-top:3px solid #c0c0c0; 
border-bottom:4px solid #777777; 
border-right:4px solid #777777; 
background-color:#999999; 
font-family:arial;  color:#333333;
font-size:12px; align: center; 
padding: 10px;

}


.button_menu a:active, .button_menu a:visited, .button_menu a:link {
font-weight:bold;
font-size: 14px;
color: #333333;
text-decoration:none;

} 

.button_menu a:hover {
font-weight:bold;
font-size: 14px;
color: #000000;
text-decoration:none;

} 

/*--------------------- box cornice immagini ----------------------*/

.box_image{

border-left:3px solid #c0c0c0; 
border-top:3px solid #c0c0c0; 
border-bottom:4px solid #777777; 
border-right:4px solid #777777; 
background-color:#999999; 
padding: 2px;

} 

/*--------------------- riga orizzontale grigia ----------------------*/
.riga_orizz {  
border-bottom : 1px solid #777777; 
}