Aiutoo! Css come funzionano

[spaziolibero5]

ciao a tutti ho appena creato un sito in html e un foglio di stile css, solo che non so come andare a modificare i fogli di stile css dato che ho scaricato il file da un sito.
vorrei la possibilità di aggiungere un box che è largo quasi tutta la pagina e che lasci un piccolo spazio per una sidebar e questo deve essere fisso, e per aggiungere testo o immagini modificare l'html.

/* ..... global reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, article, aside, footer, hgroup, section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	text-decoration: none;
}

section, article, header, footer, nav, aside, hgroup { display:block; }

/* ...... web font embedding */

@font-face {
	font-family: 'SansationRegular';
	src: url('Sansation_Regular.eot?'),
		url('Sansation_Regular.woff') format('woff'), 
		url('Sansation_Regular.ttf') format('truetype'), 
		url('Sansation_Regular.svg#webfontLr2B6u5e') format('svg');
		
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SansationBold';
	src: url('Sansation_Bold.eot?'),
		url('Sansation_Bold.woff') format('woff'), 
		url('Sansation_Bold.ttf') format('truetype'), 
		url('Sansation_Bold.svg#webfont8dfDl0fr') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* BODY */



body {  
font-family: 'SansationRegular', Arial, Helvetica, sans-serif; font-size:14px; color:#fff; line-height:150%; text-align:left;
background-image: url(bg.jpg); 
 
width:960px; margin:0 auto;
}


/* TIPOGRAPHY */

h1, h2, h3, h4, h5, h6 { font-family:'SansationBold', Arial, Helvetica, sans-serif; line-height:120%; }



time { color: #0099FF; font-size:12px; }


a { text-decoration:none; }
a:link, a:visited { color:#ffcc00;}
a:hover, a:focus, a:active { color:#ffffff; }

dl { display:inline; float:left; } 
dt { float:left; display:inline; margin-right:10px; } 
dd {float:left; display:inline; margin-right:20px; }

mark { background:none; }

/* ..... header */

header { width:100%; float:left; display:inline; margin-bottom:20px; }


hgroup { margin:20px 0; }
hgroup h1 { font-size: 50px; color:#003399; line-height:100%;
}

hgroup h2 { font-size:24px; font-family:'SansationRegular', Arial, Helvetica, sans-serif;	color:#000000;}


header > nav { float:left; display:inline; width:960px; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background: rgba(50,0,0,0.6);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 0 5px #0099FF;
-moz-box-shadow: 0 0 5px #0099FF;
box-shadow: 0 0 5px #0099FF;

}


header > nav h1 { float:left; font-size:16px; color:#CCCCCC  }

header > nav ul { float:right; }
header > nav li { display:inline; margin-right:20px; }
header > nav li:last-child { margin-right:0; }

header > nav li a { 
padding:10px 20px; 
font-size:16px; 
font-family:'SansationBold', Arial, Helvetica, sans-serif; 
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius: 5px;
}


header > nav a:link, header nav a:visited  { 
color:#FFFFFF;  
background:rgba(0,0,51,0.4);


}
header > nav a:hover, header nav a:focus, header nav a:active, header nav a.selected { 
color:#ffcc00; 
background:#000033;

}



/* CONTENUTI */
article header { width:100%; float:left; display:inline;
background:none;

}


section { width:350px; float:left; display:inline; margin:0 20px 20px 0; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

background: rgba(50,0,0,0.6);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 5px #0099FF;
-moz-box-shadow: 0 0 5px #0099FF;
box-shadow: 0 0 5px #0099FF;
}




/*
body > section:nth-of-type(1) { width: 420px;}
body > section:nth-of-type(2) { width: 280px;}*/
body > section:first-of-type { width: 420px;}
body > section:last-of-type { width: 280px;}





aside { width:220px; float:left; display:inline;
padding:20px; 

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

background: rgba(50,0,0,0.6);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 0 5px #0099FF;
-moz-box-shadow: 0 0 5px #0099FF;
box-shadow: 0 0 5px #0099FF;

}

aside ul { list-style-position:inside; margin-top:10px; font-size:16px; }


section section, aside section, article section {width:auto; float:left; padding:0; margin:20px 0 0 0; background:none; -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }


article > section { margin-top:20px; }
aside section { margin:20px 0 30px 0; }



h1, aside section > h1 { font-size:18px; margin-bottom:5px; }
section > h1, aside > h1 { font-size:24px; color:#cccccc; margin-bottom:10px; }


article footer { width:100%; height:auto; float:left; display:inline;
background:none; margin:0 0 10px; padding:0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}







footer { 
width:100%; clear:both; margin:0 0 20px 0; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
height:70px;
background: rgba(50,0,0,0.6);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 5px #0099FF;
-moz-box-shadow: 0 0 5px #0099FF;
box-shadow: 0 0 5px #0099FF;
}



footer small { float:right; }






/* form */
legend { font-size:18px; color:#FFFF00; padding-bottom:5px; }
label { float:left; clear:right; width:100%; }
input, textarea { border:none; margin:0 0 10px 0; 
padding:5px 0;
float:left; display:inline;  
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius: 5px; 
width:100%; /* calc(100% - 30px) */  
background:rgba(255,255,255,0.9);
color:#000000;
font-family:'SansationRegular', Arial, Helvetica, sans-serif;
font-size:14px;
}

input[type="search"] { -webkit-appearance: textfield; }

textarea { overflow:hidden; height:70px; }

input:focus, textarea:focus { background:(url)bg.jpg; }

input[type="submit"], input[type="reset"] {
color:(url)bg.jpg; 
margin:0 10px 0 0;
background:rgba(0,0,51,0.4);
padding:5px 10px;
width:auto;

}

input[type="submit"]:hover, input[type="reset"]:hover {
color:#FFFFFF; 
background:#008800;
}

questo e il codice css, cosa devo modificare per modificare il box di testo, che ora ce ne sono 3, ma appena tocco qualcosa si sposta su tutto. Grazie mille in anticipo. Igor

[zerobruno]

Guarda qui:
http://www.amazon.com/CSS-Pocket-Ref...dp/1449399037/