Je reprends mon CV dans l'état où je l'ai laissé, c'est à dire qu'avec de l'XHTML dedans!
La première chose que je vais faire est de me crééer un fichier style.css (comme vous avez créé index.html) et indiquer au navigateur qui interprète la page web de mon CV, que ce sont les déclarations de styles contenus dans ce fichier qu'il faut utiliser. Cette ligne peut être ajoutée n'importe où dans la partie <head> de la page.

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="description" content="CV de Vincent Mazenod: programmeur web et bases de données" />
      <meta name="author" content="Vincent Mazenod" />
      <meta name="keywords" content="CV, www, web, bases de données, PHP, JavaScript, PROGRESS" />
      <title>CV de Vincent Mazenod :: programmeur web et bases de données</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
   </head>

Testons si ca marche. dans style.css copier/coller

body{
    font-family: verdana;
    color: #666666;
}
h2{
    text-align: right;
    border-bottom: 1px solid #666666;
}

Actualiser votre page, et vous devez voir la différence ... je vous laisse le soin de jouer avec, text-align, color, margin, padding, border, ...
Maintenant j'aimerai bien arranger la partie état civil et notamment en compacter un peu l'affichage qui est un peu étalé verticalement pour le moment. Je vais utiliser le positionnement flottant qui est bien adapté à de l'affichage 100%, alors que le positionnement absolu, sera plus adapté à un affichage de largeur fixe.
J'identifie les éléments que je veux déporter (empiler s'il y en à plusieurs) sur la droite: ma photo à fond à droite et le bloc ul avec le tel, le fax, le mob, et le mail. Les blocs adress et age & nationalité eu x s'affiche normalement aligné à gauche. La règle CSS que je  veux utiliser est simple : float: right; je sais également que je vais devoir l'appliquer à deux élèments, donc j'opte pour une classe "flottant" qui ne contiendra que cette règle. J'ajoute donc dans mon fichier style.css

.flottant{
   float: right;
}

et j'attribue la classe "flottant" aux éléments qui vont flotter dans ma page html

     <img  class="flottant" src="http://vmazenod.free.fr/Img/vmazenod.jpg" alt="Vincent Mazenod" title="" />
     
      <ul class="flottant">
         <li>Tel: (+33) (0)4 73 17 74 32</li>
         <li>Fax: (+33) (0)4 73 17 74 28</li>
         <li>Mob: 06 87 49 85 19</li>
         <li>vmazenod_at_free_dot_fr</li>
      </ul> 
     
      <address>
      65, Boulevard François Mitterand<br />
      63000 Clermont Ferrand
      </address>
      
      <ul>
         <li>27 ans</li>
         <li>Français</li>
      </ul>

Notez que j'ai tenu compte du fait que le navigateur interprète une page de haut en bas, en réordonnant mes blocs HTML ...
Reste à toiletter un peu mon formulaire en bas de page.
Primo je veux qu'il soit centré, je vais fonc définir la balise form a text-align: center; ensuite je m'aperçois que le text affiché dans la zone de saisie ne suit pasles règles général défini dans le sélecteur body, je vais donc redéfinir la police et la couleur des balises textarea (la zone de saisi) et input (le bouton). Et pour finir comme j'ai envie d'un peu de fun, je vais me servir des pseudo-formats pour que la couleur de la zone de saisie et celle du bouton change lorsqu'on les survole ou lorsqu'ils sont sélectionnés ce qui donne

form{
   text-align: center;
}
textarea{
   height: 100px;
}
textarea, input{
   width: 600px;
   margin: 20px;
   border: 1px solid #666666;
   font-family: verdana;
   color: #666666;
}
textarea:focus,
textarea:hover,
input:focus,
input:hover{
   border: 1px solid #0000EE;
   font-family: verdana;
   color: #0000EE;
}

A ajouter dans le fichier style.css. Notez que comme je me suis servi des sélecteurs avec les balises, je n'ai pas à modifier le code XHTML de mon CV. Je vous laisse jouer avec les pseudo formats de la balise a ...

profils sociaux