Exemple de mise en forme d'une page
avec une feuille de styles intégrée
Cliquez sur le bouton droit de la souris et sélectionnez "Afficher la source".
La feuille de style intégrée est décrite par la balise "style" dans l'en-tête de cette page.
Il est conseillé d'encadrer les définitions des styles avec la balise de commentaires
"<!-- ... -->", car de cette façon, il n'y aura pas d'erreur avec les navigateurs qui ne peuvent
pas interpréter les feuilles de styles.
- marge à gauche de la page: 100 pixels
- marge en haut de la page: 50 pixels
- couleur de fond: "#ccffcc" (vert pâle)
- couleur du texte: "#006600" (vert foncé)
- police du texte: "Arial" si elle est présente sur l'ordinateur du visiteur, "Helvetica" sinon,
et si cette dernière n'existe toujours pas c'est une police de la famille générique "sans-serif" qui
sera utilisée.
- marqueur de liste: "circle"
Titres "h2":
- style de police: "italic"
- espace entre les lettres: 8 pixels
Titres "h4":
- couleur de fond: "#ffffcc" (jaune pâle)
- couleur du texte: "#996633" (marron)
Titres "h5":
- type de bordure: "outset"
- marge entre la bordure du haut et le texte: 20 pixels
- marge entre la bordure du bas et le texte: 10 pixels
Le texte défini avec la balise "em" s'affiche en bleu.
Dans l'en-tête de cette page je définis une sous-classe du style "em" que je
nomme "mon_texte_rouge". Ainsi, tous les textes écrits avec la balise "em" et la sous-classe
"mon_texte_rouge" s'affichent avec les propriétés standard du style "em", sauf celles qui sont modifiées dans la
sous-classe.
Dans l'en-tête de cette page, je définis une classe que je nomme
"mon_violet_sur_gris_souligne" et je peux l'appliquer sur tous les styles de texte, comme ici sur un
texte "samp".
Ou ici sur un titre "h1"
Les liens non visités ne sont pas soulignés et s'affichent en gris
Les liens déjà visités s'affichent en fuchsia
Lorsque le pointeur de la souris passe au-dessus d'un lien, celui-ci vire au jaune
Les liens actifs s'affichent en rouge