HTML/CSS - TD2 : Monsieur, c'est quoi une feuille de style ?

Ce TD est le premier d'une série de TDs dont l'objectif est de découvrir les feuilles de style, comment les définir et l'usage qu'on peut espérer en faire.

Vous trouverez toute la documentation concernant HTML 4.01 (sur laquelle est basée la norme XHTML) à l'adresse suivante: http://www.w3.org/TR/html4/

La documentation concernant la norme CSS2.1 peut être trouvée à l'emplacement suivant: http://www.w3.org/TR/CSS21/

Si vous utilisez mozilla, cette sidebar pourrait s'avérer pratique: http://devedge.netscape.com/toolbox/sidebars/

Il est très vivement conseillé de se reporter à cette documentation avant de poser des questions pour lesquelles la réponse pourrait se résumer à un simple RTFM.

Et avant que vous le fassiez remarquer, oui, la documentation est en anglais...

1. Background, mon beau background.

Une feuille de style comme son nom le dit clairement sert à définir un style. Mais qu'est ce qu'un style en HTML ? Un style est un ensemble de règles permettant de définir comment un objet doit être rendu (i.e. dessiné, affiché).

Grâce aux feuilles de style, il est virtuellement possible de changer le style de tout objet dans une page. L'exemple suivant montre comment changer la couleur de fond d'une page en modifiant l'élément de style background-color (couleur de l'arrière-plan) du body de cette page: 

<!-- Une belle page rouge -->
<html>
<head>
<title>Titre d'une belle page rouge !</title>
</head>
<body style="background-color: red;">
Une belle page en rouge !
</body>
</html>

Vous pouvez visualiser cette page en cliquant ici.

On peut rassembler tous ces éléments de style dans l'en-tête du document grâce à une balise <style> ainsi que le montre l'exemple ci-dessous: 

<!-- Une belle page rouge (bis) -->
<html>
<head>
<title>Titre d'une belle page rouge ! (bis)</title>
<style>
<!--
body
{
	background-color: red;
}
-->
</style>
</head>
<body>
Une belle page rouge ! (bis)
</body>
</html>

Notez les balises de commentaires (<!-- et -->) autour de la définition des éléments de style. Ces balises sont nécessaires pour tromper les navigateurs obsolètes qui pourraient mal interpréter ces indications de style.

Le résultat de cet exemple (identique à celui de l'exemple précédent) est visible ici.

Si on veut pouvoir appliquer le même style à un ensemble de pages, il est plus simple de rassembler toutes les informations de style dans un seul et même fichier. L'extension de ce fichier sera généralement .css et il aura le format décrit par l'exemple suivant: 

/* Ma jolie feuille de style. */
body
{
background-color: red;
}

On indiquera dans le code HTML où trouver cette feuille de style en utilisant le tag link de la façon suivante: 

<!-- Une belle page rouge ! (ter) -->
<html>
<head>
<title>Titre d'une belle page rouge ! (ter)</title>
<link	rel="stylesheet" 
	title="ma-jolie-feuillede-style"
	type="text/css"
	href="exemple3.css"
	media="screen" />

</head>
<body>
Une belle page rouge ! (ter)
</body>
</html>

La valeur stylesheet du paramètre rel indique que l'on déclare une feuille de style. La valeur screen du paramètre media indique que cette feuille de style doit être utilisée lors du rendu de la page à l'écran. La valeur exemple3.css du paramètre href indique que la feuille de style est contenue dans le fichier exemple3.css et que ce fichier est trouvable au même emplacement que la page elle-même.

On obtient à nouveau une belle page toute rouge.

Questions:

  1. En vous reportant à la documentation, trouvez les différentes valeurs possibles pour le paramètre media décrit ci-dessus.
  2. Dans le répertoire WWW de votre compte (créez le si il n'existe pas et octroyez les droits de parcours pour tous sur ce répertoire), créez un sous-répertoire tds_html. Dans ce sous-répertoire créez un fichier index.html et un fichier style.css. Faites du fichier index.html une page au format html reliée à la feuille de style style.css que vous laisserez vide pour l'instant.
  3. En vous aidant du chapitre 14 des spécifications de la norme CSS2.1, modifiez votre feuille de style pour mettre une image quelconque ( superman !!!, peut être ?) en arrière-plan de votre page index.html. Expérimentez avec les paramètres background-repeat, background-attachment, et background-position.

2. La class internationale ?

Il arrive assez souvent qu'on ait besoin de plusieurs styles pour un même élément. On peut, par exemple, vouloir définir plusieurs type de paragraphes dont les alignements varieraient. On aurait donc les paragraphes alignés à droite, les paragraphes alignés à gauche, les paragraphes centrés et les paragraphes justifiés.

On pourrait certes s'amuser à écrire le code suivant: 

<p style="text-align: left;"> Ce paragraphe est aligné à gauche. </p>
<p style="text-align: left;"> Ce paragraphe aussi est aligné à gauche. </p>
<p style="text-align: right;"> Ce paragraphe est aligné à droite. </p>
<p style="text-align: center;"> Ce paragraphe est centré. </p>
<p style="text-align: justify;"> Ce paragraphe est justifié. </p>

On obtiendrait alors le résultat suivant:

Ce paragraphe est aligné à gauche.

Ce paragraphe aussi est aligné à gauche.

Ce paragraphe est aligné à droite.

Ce paragraphe est centré.

Ce paragraphe est justifié.

Mais cette méthode risque d'être un brin fastidieuse. Surtout si on a des paragraphes alignés à gauche avec du texte bleu sur fond blanc, des paragraphes alignés à droite avec une police de taille 17, etc...

Heureusement il existe une méthode pour définir des groupes de propriétés et leur attribuer un nom. Ce sont les classes. L'exemple suivant est un fragment de feuille de style montrant comment définir une classe red-right-aligned qui lorsqu'elle est attribuée à un élément aligne le contenu de cet élément à droite et lui donne la couleur rouge. 

.red-right-aligned
{
color: red;
text-align: right;
}

Et ce fragment de code html montre comment attribuer cette classe à paragraphe: 

<p class="red-right-aligned">
Oh le joli paragraphe en rouge aligné à droite !
</p>

Cet exemple ressemble au fragment suivant:

Oh le joli paragraphe en rouge aligné à droite !

Les curieux se demanderont probablement déjà pourquoi le nom de la classe est précédé d'un point lors de sa définition dans la partie feuille de style. Ils pourraient penser, non sans raison, que c'est pour différencier les classes des styles des éléments de base. Ils n'auraient pas complètement tort. Mais cela va encore un peu plus loin. On peut en effet écrire des classes de style destinées à des éléments de type spécifique. On peut par exemple modifier notre style red-light-aligned (que l'on renommera paragraphe-red-right-aligned pour l'occasion) pour qu'il ne s'applique qu'à des paragraphes. Pour ce faire on modifiera le style de façon à ce qu'il ressemble à ça: 

p.paragraph-red-right-aligned
{
color: red;
text-align: right;
}

Et voilà ! Maintenant si on définit par exemple le titre: 

<h1 class="paragraph-red-right-aligned">
Mon joli titre en rouge aligné à droite
</h1>

il aura l'aspect suivant:

Mon joli titre en rouge aligné à droite

Questions:

  1. Ajoutez un style à votre feuille de style les classes de style red-text, green-text et blue-text, qui comme leurs noms l'indiquent donneront respectivement la couleur rouge, verte ou bleue aux éléments auxquelles elles seront appliquées.
  2. Créez une page dont le code sera le suivant: 
    <html>
<head>
<style>
<!-- 
body { color: red; text-align: right; }
p.uneclasse { text-align: left; }
-->
</style>
</head>
<body>
<p> paragraph 1 </p>
<p class="uneclasse"> paragraph 2 </p>
<p> paragraph 3 </p>
<p> paragraph 4 </p>
</body>
</html>
    Visualisez cette page. Que constatez vous ?

3. Héritage, cascade.

Le CSS permet également de faire des choses encore un peu plus complexes. On peut par exemple écrire ceci: 

div p
{
	text-indent: 10px;
}

Cet exemple dit que tout paragraphe se trouvant à l'intérieur d'un div doit voir sa première ligne indentée de 10 pixels. On dit que cette règle n'affecte que les éléments de type p descendants d'un élément de type div.

On peut également utiliser des classes pour affiner encore un peu plus la sélection comme dans les exemples suivants: 

/* n'affecte que les paragraphes descendants 
 * d'un élément de type div de classe 'mondiv'
 */
div.mondiv p
{
	text-indent: 20px;
}

/* n'affecte que les paragraphes de classe 
 * 'monparagraphe' et descendants 
 * d'un élément de type div.
 */
div p.monparagraphe
{
	text-indent: -10px;
}

/* n'affecte que les paragraphes de classe
 * 'monparagraphe' descendants d'un élément
 * de type div de classe 'mondiv'.
 */
div.mondiv p.monparagraphe
{
	text-indent: 40px;
}

Encore plus fort, il est possible de spécifier ces éléments de style sur plus de deux niveaux: 

/* N'affecte que les spans de classe 'rouge' descendants des
 * paragraphes eux mêmes descendants des div de classe 'boite'
 */
div.boite p spam.rouge
{
	color: red;
}
Questions:

4. A rendre par e-mail avant lundi prochain.

Créez une ou plusieurs petites pages et leur feuille de style mettant en application ce qui a été vu dans ce TD (pas plus, pas moins) et envoyez la par e-mail en attachement à votre chargé de TD avec pour sujet "HTML/CSS - TD2". Le sujet de cette page sera "Clark Kent/Superman, l'homme sous le costume moulant". Vous serez jugés à la fois sur le fond et la forme. Lâchez vous.