Dao's StyleSheet CheatSheet

Pour en savoir plus sur les styleSheet visitez ces sites :


Insérer un styleSheet dans votre page HTML

Pour insérer un stylesheet dans votre page HTML (dans le head de votre document)

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://tecfa.unige.ch/styles/dao_style">

On peut aussi définir des styles directement dans la page avec le tag STYLE

<STYLE TYPE="text/css">
   P {
      font-family:sans-serif;
      background-color:red;
   }
</STYLE>


Création de classes différentes

Il possible de créer plusieurs classes avec des attributs différents du même tag. Par exemple, pour attribuer au tag <strong> une couleur de fond jaune (comme si vous stabilobossez un fragment de texte), il suffit de d'ajouter le nom de la classe séparé par un . au tag originel :

strong.stabilo {
   background-color:yellow;
}

Dans le document il suffit de préciser la classe du tag utilisé de la manière suivante :

<p>Ceci est <strong class=stabilo>important!</strong></p>

Ce qui vous donne le résultat suivant :

Ceci est important!


Quelques exemples

Pour changer de font et mettre une marge (à gauche)

p.exemple1 {
   font-family:serif;
   margin-left:30pt;
}

Ce qui vous donne le résultat suivant :

L'unité des technologies éducatives de la Faculté de Psychologie et des Sciences de l'Education de l'Université de Genève, TECFA, a été créée il y a dix ans.

...et augmenter l'interligne

p.exemple2 {
   font-family:serif;
   margin-left:30pt;
   line-height:1.5;
}

Ce qui vous donne le résultat suivant :

Elle a pour mandat l'enseignement et la recherche dans le domaine des technologies éducatives et, à ce titre, a très tôt été impliquée dans le développement de la formation à distance en Suisse (depuis 1989). Pionnière dans l'utilisation du Web, l'unité TECFA a d'ailleurs mis en place le premier serveur Web de Suisse au service de l'enseignement, après celui du CERN.

...et mettre un cadre

p.exemple3 {
   font-family:serif;
   margin-left:30pt;
   line-height:1.5;
   border:2pt;
}

Ce qui vous donne le résultat suivant :

TECFA aborde ce double mandat de recherche et d'enseignement dans une perspective pluridisciplinaire, intégrant technologie et sciences humaines.


David J. P. Ott
Last modified: Tue Feb 8 16:36:00 MET 2000