La feuille de style pour l'écran

Remarque

Les couleurs sont volontairement choisies plutôt repoussantes, pour vous encourager à les changer.

Corps du texte

Couleur de fond d'écran rose et couleur de texte blanche définies pour tout le site ; comme il n'y a pas grand'chose sur le site, on va essayer de faire illusion en augmentant la taille des lettres ; la police à l'écran doit être sans-sérif :

          BODY { 
            background:#FFDDDD;
            color:blue;
            font-size:130%;
            font-family: sans-serif;
          }
      

Parenthèses sur les couleurs

Titres

Les titres (H1) seront centrés, avec fond bleu et texte blanc, avec un bord blanc :

          H1 { 
            text-align:center;
            background:blue;
            color:white;
            border-style:solid;
            border-width:thin;
            border-color:white;
          }
      

Noms de familles

Les noms de famille seront écrits en small caps et italique :

          SPAN.nom { 
            font-variant: small-caps;
            font-style: italic;
          }
      

Ceci nous amènera à écrire dans le code HTML par exemple :

          <SPAN CLASS="nom">Truc Bidule</SPAN>
      

Listes

Les listes seront préfixées par des carrés :

          LI { 
            list-style-type:square;
          }
      

Liens

Les liens non visités seront verts, mais passent rouges quand la souris les survole ; les liens visités sont orange :

          A:link { 
            color:green;
          }
          A:visited { 
            color:#FF9900;
          }
          A:hover, A:visited:hover { 
            color:red;
          }
      

Signature

Une signature identique sur toutes les pages, en bas à droite, en italique, en caractères plus petits, de couleur grise :

          DIV.signature { 
            position: fixed;
            bottom: 10pt;
            right: 5pt;
            font-size:90%;
            color:gray;
            font-style:italic;
          }
          DIV.signature:before { 
            content:"C'est moi qui l'ai fait!";
            }
      

Il suffira d'ajouter ceci dans le code source des pages :

          <DIV CLASS="signature"></DIV>