Diviser un contenu en différent blocs

Qu'est-ce que tu veux dire ?

a.
{
font-size: 16;
}

b.
{
color: red;
}

??

je veux diviser le contenu en blocs,des blocs en haut du contenu,des blocs au milieu du contenu et des bolcs en bas du contenu de mon template aide moi svp?

Tu veux faire par exemple une entête, un corps et un footer ?

Dans ton CSS tu les décris.

.tete
{
position: absolute;
top: 100px;
height: 300px;
width: 90%;
}

.corps
{
position: absolute;
top: 400px;
height 600px;
width: 90%
}

.pied
{
position: absolute;
top: 100%;
margin-top: -300px;
height: 300px;
width: 90%
}

Ca va décrire les blocs.

Dans ton html tu mets des balises div.

<div class="tete">
//par exemple..
<h1>Ici la tête de page</h1>
</div>

<div class="corps">
Images, textes.... etc
</div>

<div class="pied">
Pied de page.
</div>

oui c'est comme ça,mais dans le corps je veux insérer des articles ou bien des blocs pour les articles,des vidéos et des actualités ok.

Alors tu peux créer d'autres blocs dans ton CSS et les insérer dans le div corps du html

CSS >
.voletgauche
{
etc..
}
.voletdroit
{
etc..
}

HTML >

<div class="corps">

<div class="voletgauche">
</div>

<div class="voletdroit">
</div>

</div> //fermeture du corps.

Voici le code css,mais je veux des blocs au milieu et en bas dans le corp et une photo sur l'en-tête aide svp>?
body{
font-family:Arial,sans-serif;
font-size:12px;
background:#FFFFFF;
text-align:center;
margin:100px;

padding:2px 50px;
}
#en-tête{
width:718px;
height:281px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-top:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#000099;
}

#corps{
margin-left:119px;
width:599px;
height:574px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#000099;
}
#colonnegauche {
float:left;
}
#colonnegauche .haut {
width:119px;
height:260px;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006633;
}
#colonnegauche .bas{
width:119px;
height:415px;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006666;
}
#agenda{
float:right;
width:95px;
height:127px;
margin-top:2px;
background-color:#FFFFFF;
}
#img4{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img3{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img2{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img1{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#multimédia{
margin-top:50px;
margin-right:o auto;
float:right;
width:150px;
height:100px;
background-color:#FFFFFF;
}
#footer{
width:599px;
height:100px;
margin-left:119px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006633;
}