2.6.1. Insertion du style

Voici trois manières différentes de donner un style particulier à un élément (une balise) HTML:
(Sélectionner les fichiers , CTRL C, votre éditeur, CTRL V, enregistrez sur votre disque dur, regardez dans votre navigateur)

  1. Un attribut style dans la balise:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title> Attribut style dans la balise</title>
    </head>
    <body>
    <p>
    <span style="color:red;">Rouge </span>
    et <span style="color:red;font-weight:bold">caractères gras</span>
    </p>
    </body>

  2. Une feuille de style dans l'entête:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title> Feuille de style dans l'entête</title>
    <style type="text/css">
    <!--
    p {
    color:blue;
    }
    span {
    font-size:30px;
    }
    --!>
    </style>
    </head>
    <body>
    <p>Texte formaté par feuille de style:
    </p>
    Exemple:
    <p>
    <span>Partie de texte</span> en <span>caractères gras</span>
    </p>
    </body>

    Explication:

    La feuille de style exige que
    -Tout ce que contient la balise <p> sera écrit en bleu
    -Tout ce que contient la balise <span> sera écrit en caractères de 30 pixels
    Remarquons qu'il y aura du texte en bleu et en caractères de 30 pixels, parce que ce texte est inclus à la fois dans la balise <p> et la balise <span>

  3. Une feuille de style comme fichier CSS séparé:

    Fichier HTML de base:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title> Feuille de style dans un fichier séparé</title>
    <link rel="stylesheet" href="monstyle.css" type="text/css" /> </head>
    <body>
    <p>Texte formaté par feuille de style:
    </p>
    Exemple:
    <p>
    <span>Partie de texte</span> en <span>caractères gras</span>
    </p>
    </body>

    Fichier CSS séparé, URI: monstyle.css:

    p {
    color:blue;
    }
    span {
    font-size:30px;
    }
     Explication:

    La ligne en caractères gras <link rel.... incorpore le fichier monstyle.css dans le fichier HTML principal.

2.6.2. Les attributs id et class

Il est parfois indiqué d'utiliser pour un même type de balise des styles différents. Un auteur voudrait par exemple à côté de paragraphes normaux un paragraphe écrit en bleu italique pour la définition principale et encore des paragraphes écrits en retrait pour différentes citations. Il va alors se servir d'un attribut du type identificateur pour le paragraphe écrit en majuscules italiques et d'un attribut du type classe pour les paragraphes en retrait. Ces attributs lui permettront de distinguer les différents types de paragraphes dans les feuilles de style.

Nom Syntaxe Validité Effet Préfixe de la référence dans une feuille de style
Identificateur id="nom1" tous les éléments de formatage Donne à l'élément un nom individuel qui permet de l'identifier. Ne doit être employé qu'une seule fois dans un document. #
Classe class="nom2" tous les éléments de formatage Affecte l'élément à une classe d'éléments à laquelle on peut par exemple attribuer un style particulier. .

Exemple pour id et class:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Feuille de style dans un fichier séparé</title>
<style type="text/css">
<!--
p {
color:blue;
}
#rit {
color:red;
font-style:italic;
}
.ret {
text-indent: 60px;
}
--!>
</style>
</head>
<body>
<p>Ceci est un paragraphe normal écit en bleu </p>
<p id="rit">Ceci est un paragraphe unique (!) en rouge italique </p>
<p class="ret">Ceci est premier paragraphe en retrait </p>
<p>Ceci est de nouveau un paragraphe normal écit en bleu </p>
<p class="ret">Ceci est deuxième paragraphe en retrait </p>
</body>

2.6.3. Priorité: attribut id> attribut class>pas d'attribut

Exemple pour les priorités:

..
..
..
..
p { color: black; }
#a { color: green; }
.b { color: red; }
..
..
..
..
<p id="a" class="b">texte1 </p>
<p class="b">texte2 </p>
<p> texte3 </p>
..
..
..
..

Le texte1 sera représenté en vert parce que id possède priorité devant class, texte2 est représenté en rouge et texte 3 en noir .

2.6.4. Exercice

Construisez au moyen de feuilles de styles une page Internet pour présenter un cours (littéraire, sans signes particuliers, sans images, pas de chimie, physique ou mathématiques!) que vous fréquentez cette année. Vous prévoirez des styles particuliers pour le titre principal, les titres, les sous-titres, 3 sortes de paragraphes et trois sortes de parties de texte (span). Vous ferez deux versions, une avec feuille de style incorporée dans le code HTML, une avec feuille de style séparée et vous placerez le tout dans un répertoire nommé travail-1 sur le serveur sous le nom index.html.

Attention! Tout le monde aura accès à votre travail sous l'adresse: http://prénomnom.math.lu/travail-1/ . En effet dans un répertoire donné, c'est toujours le fichier index.html qui est appelé en priorité, c'est le seul fichier qui n'a pas besoin d'être spécifié.