Westas, je te propose une chose pour te familiariser avec un site web simple : le mien.
l’url : http://ricardo.free.fr/
Dans n’importe quelle page où tu iras, en faisant un clic DR, tu auras la faculté de voir le code source de la page. La comparaison entre la page “vue” et le code, sera certainement plus parlant qu’ujn long discours.
Voici en dessous le fichier ‘css’, comme on te l’a déjà expliqué au dessus.
Là encore, la comparaison sera assez claire.
Exemple : la page d’accueil/clicDR/code source de la page
ligne 19,; tu as
RICARDO
tu comprends facilement qu'il s'agit du titre.
le <[color=#FF0000]h1[/color]> et sa "fermeture" indique que la vue correspondra à ce qui a été défini dans la feuille de style (ou 'css' pour les intimes).
Tu verras dans le fichier css plus bas vers la 4e ligne :
[quote] [color=#FF0000]h1[/color] {
font-size : 400%;
font-family : "times new roman",Verdana, Arial, Helvetica, Geneva, sans-serif;
color : #0193FF;
text-align: center;
}[/quote]
--que 'font size' (grosseur de la police) est de 400%
--que les familles de polices, par ordre de priorité sont : "times new roman" (les guillements si plusieurs mots), si absent chez le lecteur, ça sera verdana, etc.
-- que la couleur de la police sera #0193FF
-- que le texte sera aligné au centre.
Voici le 'css' entier pour mon site :
[code]html,body {
background-color:#990033;
}
h1 {
font-size : 400%;
font-family : "times new roman",Verdana, Arial, Helvetica, Geneva, sans-serif;
color : #0193FF;
text-align: center;
}
h2 {
font-size : 150%;
font-family : "times new roman",georgia,verdana, arial, helvetica, geneva, sans-serif;
color : #02B9FF;
text-align:center;
}
h3{
font-size:110%;
font-family : georgia, "times new roman",verdana, arial, helvetica, geneva, sans-serif;
color:#000000;
text-align:center;
}
h4 {
font-size : 70%;
font-family : georgia, "times new roman",verdana, arial, helvetica, geneva, sans-serif;
text-align:left;
}
h5{
text-align:center;
font-size : 55%;
font-family : verdana,"times new roman",georgia,serif;
color : #000000;
text-decoration:overline;
}
.cadretitre{
position:absolute;
top:1%;
left:32%;
height:98%;
width:67%;
border-style:solid;
border-width:1px;
border-color:#0000FF; /*BLEU */
background-color:#990033;
}
.cadremenu{
position:absolute;
top:1%;
left:0.5%;
height:98%;
width:31%;
border-style:solid;
border-width:1px;
border-color:#0000FF; /*BLEU */
background-color:#990033;
}
li { /*SOUS-MENUS*/
margin-top: 0.4em; /*ecartement entre les sous-menus*/
margin-left:0em;
list-style-type: none;
font-size: 12px; /*grosseur police sous-menus*/
}
a{
color:#FFFFFF;
font-weight: normal;
text-decoration: none;
padding: 0.1em; /*hauteur des boutons des sous-menus*/
}
a:hover { /*Change au passage de la souris*/
font-weight:bold; /*ATTENTION : hover tjrs en 1er*/
color : #02B9FF;
}
.menu {
position:relative;
width: 7.3em; /*taille des boutons menus*/
height: 1.5em; /* n'est pas accepte en %*/
top:0.2em; /* """" */
left:-0.4em;
margin-top:0em;
margin-left:0.5em;
margin-bottom:4.5em; /*pour l'ecart entre les menus*/
border: 2px groove #660000;
font-family: georgia,"times new roman",verdana, arial, sans-serif;
text-align: left;
font-size: 14px;
font-weight: bold;
color:#FFFFFF; /*BLANC*/
background: #C1580B;
}
.menu:hover { /*Change au passage de la souris*/
border: 2px groove #02B9FF; /*ATTENTION : hover tjrs en 1er*/
background: #5A2D2D;
color : #02B9FF;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5{
position:absolute; /*Totalite des sous-menus*/
top:-1em;
color:#FFFFFF;
left:6em;
display: none; /*par d�faut sous-menus pas affich�s */
width: 14em;
font-size:10px;
text-align:center;
}
.cadrevalid{
position:absolute;
top:93.5%; /*94.2*/
left:87.7%; /*82.5%*/
height:5%;
width:11%; /*17%*/
border-style:solid;
border-width:1px;
border-color:#0000FF; /*BLEU */
}
.mozilla{
position:absolute;
top:93.5%; /*94.2*/
left:32.3%; /*0.2%*/
height:5%;
width:3%; /*4.3%*/
border-style:solid;
border-width:1px;
border-color:#0000FF;
}
[/code]
). Si ça peut t’aider, la feuile de style est le contenant, la page web, le contenu… le jour où tu veux changer la présentation sans toucher au contenu, tu changes de feuille de style…
normal vu le nom du site… 
normal vu le nom du site… 
), est un peu trop “visuel”, à mon goût d’aujourd’hui.
) avec ces gabarits : 
(qui a dit encore?!?