Mammouthland - Normandie

Ce site sera plus agréable avec un navigateur supportant les standards du web, mais il est quand même accessible par tous les navigateurs.

Dimanche 4 Mars 2001

Demain, rentrée... Je suis pire que les élèves : ça ne me dit rien du tout !
Bon, enfin, quand il faut y aller, faut y aller.

La première conséquence c'est que, de nouveau, les mises à jour du site vont être au mieux ralenties, au pire inexistantes. On verra bien.

Je vais donc faire ma dernière chronique sur les feuilles de style. Car c'est bien par là qu'il faut commencer avant même de créer sa première page web. Si on m'avait expliqué tout cela en avril 1998 (date de naissance de Mammouthland), je n'en serais pas aujourd'hui à reprendre page par page la mise en forme de mon site.

Voici donc, en allant au plus simple, une mini feuille de style que vous pouvez repiquer que vous modifierez et compléterez au fur et à mesure que vous en verrez la puissance et l'intérêt.

Cette feuille de style (encore une fois, de base) donnera une page à fond blanc, avec une police de caractère par défaut Verdana noire, un titre de premier niveau bleu marine centré, un titre de deuxième niveau bleu décalé de 15 pixels, des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris.

A noter que les couleur sont ici sous la forme "white, black, blue" etc... pour plus de lisibilité mais qu'il convient plutôt d'utiliser les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc)

html,body,p,ul,li,ol,td,dd,dl {
font-size : 10pt;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : black;
background : white;
}

h1 {
font-size : 20pt;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: center;
}

h2 {
font-size : 14pt;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : blue;
padding-left:15px;
}

a:link {color: green; text-decoration:underline;}
a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}

Voilà, enregistrer cette page "style.css", et mettre dans l'en-tête de la page html (entre les balises <head></head> ) :

Le tour est joué !

| Index | Avant | Archives |

<hier>Weblog</hier>

- Côté Cours -

- Côté Jardin -

- Signets -

Dimanche 4 Mars 2001