Interaction Humain – Machine sur le Web

Partie II : Modalités de l’interaction, le CSS.

I. Définition :
Le CSS (Cascading Style Sheets, « feuilles de style en cascade ») est utilisé pour mettre en forme des
documents HTML. Le contenu du document est écrit en HTML et il est séparé par des éléments de mise en
forme qui sont écrits en CSS.
 C’est grâce à lui que vous choisissez la couleur de votre texte, la police utilisée sur votre site, la taille
du texte, les bordures, le fond, …..
 C’est aussi lui qui permet de faire la mise en page de votre site. Vous pouvez dire : je veux que mon
menu soit à gauche et occupe telle largeur, que l’en-tête soit en haut et toujours visible …. Les
différents blocs. Ce point est plus délicat et difficile. Il faut donc penser le CSS dès l’écriture des
pages .html ... On établit un brouillon du plan du visuel final souhaité :

Pour faire le lien avec ce qui a été vu précédemment :

Un site web est un ensemble de dossiers et de fichiers, reliés entre eux grâce à des liens hypertextes. De
manière simplifiée, on aura un dossier principal qui contient la page d'accueil du site, au format HTML
(HyperText Markup Language) et plusieurs sous-dossiers :

IHM partie II : Modalités de l’interaction CSS Page 1 sur 6

 On organise les dossiers pour qu'ils contiennent le même type de fichiers. Par exemple,
 un dossier contient les autres pages du site, au format HTML ;
 un dossier contient la mise en forme de toutes les pages du site, au
moyen d'un (ou plusieurs) fichiers au format CSS (Cascading Style Sheets) ;
 un dossier contient les images affichées par le site, reliées aux
fichier .html et .css grâce aux liens hypertextes ;
 d'autres dossiers peuvent contenir des vidéos, des documents à télécharger ou des
fichiers JAVASCRIPT permettant de rendre l'affichage plus dynamique. Ce format de fichier sera abordé
plus tard.

Lorsqu'on a terminé de rédiger un fichier, on peut valider en ligne le code .html et .css grâce au W3C
Markup Validation Service permet d'arborer fièrement le logo sur son site.

II. Où écrit-on du CSS ?

La syntaxe du code CSS se compose de 3 parties (un sélecteur et d'un bloc de déclaration):

selector { property : value ;}

selector/selecteur : A quelle(s) balise(s) la propriété s’applique (exemples, « body » … «h1»)

property/propriété : La propriété, par exemple, la couleur d’arrière-plan (``background-color ``)
value/valeur : La valeur de la propriété de couleur d’arrière-plan, par exemple le rouge (``#FF0000``)

1. Attribut
La méthode la plus simple mais pas forcément la plus recommandée consiste à ajouter un attribut dans une
balise HTML et à préciser une valeur pour une propriété de l’attribut.
Par exemple, pour souligner un titre entre des balises <h2> … </h2>, on ajoute l’attribut style dans la
balise. On insère ensuite la propriété text-decoration et enfin on donne une valeur à cette propriété,
par exemple la valeur underline pour souligner le texte. C’est la méthode qu’on peut qualifier de « gros
bourrin » à rapidement éviter.

< !DOCTYPE html> Affichage :

IHM partie II : Modalités de l’interaction CSS Page 2 sur 6

 Affichage :

Pour changer la couleur d’un texte, on utilise la propriété color :

Affichage :
Un attribut peut avoir deux propriétés séparées par un point-virgule.

La balise <span> avec l’attribut style s’applique à une partie du texte sans influence sur le reste.
Exercice :
Quelles sont les propriétés du script suivant ?
< !DOCTYPE html>

2. Dans l’en-tête
Pour pouvoir appliquer les mêmes propriétés, par exemple à tous les liens d’une page, il vaut mieux écrire
une « règle » CSS, c'est-à-dire des propriétés avec leurs valeurs qui s’appliquent aux éléments de la page.
Pour cela, nous ajoutons un bloc style dans l’en-tête de la page. C’est ce qu’on peut qualifier de méthode
« moyennement bourrin »…

< !DOCTYPE html>

ATTENTION :
Aux accolades et aux points-virgules

Affichage :

IHM partie II : Modalités de l’interaction CSS Page 3 sur 6

Exercice :
Que fait ce script ?
< !DOCTYPE html>

3. Fichier .css
On écrit le plus souvent le code CSS dans un fichier spécial ayant l’extension .css. C’est la méthode la plus
pratique et la plus souple. Cela évite de tout mélanger. En général ce fichier est enregistré dans un dossier
nommé « styles » au même niveau que la page HTML. Ah ! Voilà la méthode à utiliser au maximum…
On commence par ajouter la ligne (dans le fichier HTML) :
<link rel="stylesheet" href="styles/style.css"/>

Puis dans le fichier style.css :

Contenu du fichier Affichage :

style.css

< !DOCTYPE html>

IHM partie II : Modalités de l’interaction CSS Page 4 sur 6

 Contenu du fichier
exemple.html

Cette méthode est intéressante pour appliquer le même style aux différentes pages d’un site. De plus pour
faire une modification, il suffit de modifier une fois le fichier « style.css », ce qui est plus simple que corriger
toutes les pages une par une.

Quelques commandes CSS :

 Taille du texte et police :
font-size : 22px ;
font-size : large ;
font-size : 1.5em ;
font-family : arial ;
font-style : italic ;
font-weight : bold ;
 Alignement :
Text-align : left ou Text-align : right ou Text-align : center ou Text-
align : justify

 Si deux balises sont de même style, par exemple si les titres <h1> et <h2> sont en bleus, on peut écrire
dans le fichier CSS :

 Un commentaire s’écrit entre symboles /* et */

 Pour ne pas appliquer le même style à tous les paragraphes par exemple, nous pouvons utiliser l’attribut
class qui permet de donner un nom à une balise particulière :
<p class="paragraphe1">mon paragraphe 1</p>
Dans le fichier CSS, on écrit alors, en n’oubliant pas le point au début de la ligne :

IHM partie II : Modalités de l’interaction CSS Page 5 sur 6

 Ainsi seules les balises nommées « paragraphe1 » sont affichées en vert sur un fond gris bleu.
 Les flottants : le CSS permet de faire flotter un élément autour du texte. On dit aussi qu’on fait un
« habillage ».
La propriété à appliquer est float. Elle peut prendre deux valeurs simples : left, right
Il faut commencer par taper :

Affichage :

resized_BB.jpg : image réduite

ATTENTION :
Les propriétés CSS sont héritées en cascade, c'est-à-dire que si on donne un style à un élément, tous les sous
éléments auront le même style. C’est le phénomène de l’héritage. Donc les balises qui se trouvent à
l’intérieur d’une autre balise « héritent » de ses propriétés.

Ne pas hésiter à aller sur le site https://www.w3schools.com , vous y trouverez plein de renseignements
supplémentaires, des astuces, des exemples corrigés…..

IHM partie II : Modalités de l’interaction CSS Page 6 sur 6