Dans un document HTML, le texte sera donc regroupé dans des balises HTML, mais nous utiliserons du code CSS pour la mise en forme.
Donc, dans une même page HTML, nous aurons plusieurs « technologies » : du HTML et du CSS. Plus tard, nous verrons que nous en aurons une troisième : le javascript.

2. Environnement du script

2.1. Niveau requis

Il faut avoir accompli/compris le training HTML

2.2. Logiciels

Un navigateur internet (Firefox, Chrome, Edge …)
Un éditeur de texte (Blocnote, Scite, Notepad2, Sublime text …)

2.3. Préparation

Créer un répertoire dédié sur votre PC.
Avec l’éditeur de texte, créer un fichier nommé [VotreNom].html (sans accent, sans caractère spécial et sans espace). En double cliquant sur le fichier, votre navigateur internet devrait afficher la page web.

3. Première approche

CSS est l’acronyme de Cascading Style Sheets (feuille de style en cascade).

Le CSS est donc un langage intégré dans la page HTML pour gérer le « style » des différents éléments à afficher. Le style est donc utile à décrire les blocs de textes contenue dans des balises HTML.

Par exemple, nous voulons mettre un texte en gras.

Pour cela, nous avons un premier moyen qui consiste à utiliser une balise HTML, en l’occurrence, la balise « b » comme bold.

<!— RabetranoGhislain.html -->
<html>
    <head>
        <title>Training: CSS: Généralités</title>
    </head>
    <body>
        <b>mon texte en gras</b>
    </body>
</html>

Note1 : Le surlignage en jaune est présent uniquement pour montrer ce qui est important dans le code.
Note2 : Tout ce qui se trouve entre «  » est un commentaire HTML. On le voit dans le code, mais on ne le voit pas dans le navigateur.

Si ce code est valable, il est préférable de prendre l’habitude suivante :

· Mettre son texte dans une balise HTML conteneur (div, p, span, li …).

· Appliquer un style à ce conteneur.

Notre exemple deviendrait par exemple :

<html>

<head>

<title>Training: CSS: Généralités</title>

</head>

<body>

<p style="font-weight : bold;">mon texte en gras</p>

</body>

</html>

Comme vous le voyez, cela revient exactement au même (ouf ! c’était le but).

Profitons de notre premier code CSS pour apporter quelques commentaires :

· Pour décrire comment le contenu de la balise « p » doit s’afficher, nous lui avons ajouté un attribut « style ».

· La valeur de l’attribut est un langage complètement différent du HTML, c’est notre fameux CSS.

· Le code CSS s’applique à tout le contenu de la balise.

· À quoi ressemble le CSS ? Le CSS prendra toujours la forme suivante :
mot-clé : valeur ;
Dans notre exemple : font-weight : bold ;

· Comme le HTML, le CSS ne tient pas compte de la case (majuscule/minuscule) ni du nombre d’espaces entre les mots-clés.

Admettons que nous voulons que notre texte soit à la fois en gras et en italique.

Voici 3 solutions possibles :

· On utilise seulement du code HTML (les balises « p » & « i »).

· On utilise seulement du code CSS (les mots-clés « font-weight » et « font-style ».

· On utilise un mixte des deux langages.

<html>

<head>

<title>Training: CSS: Généralités</title>

</head>

<body>

<p><b><i>mon 1er texte en gras et en italique</i></b></p>

mon 2nd texte en gras et en italique

</p>

<i>mon 3eme texte en gras et en italique</i>

</p>

</body>

</html>

Comme nous le voyons, il y a 3 fois le même affichage.

4. La notion de « cascade »

Notre dernier code est propre, mais nous allons tout de suite voir que nous pouvons l’optimiser, c’est-à-dire, avoir le même comportement en écrivant beaucoup moins de lignes.

Au passage, c’est le défi de tout développeur : écrire le moins de lignes possible en mutualisant du code.

C’est exactement ce que CSS nous permet de faire : écrire du CSS à un seul endroit et l’applique en cascade à des balises HTML cibles.

Pour cela, nous allons regrouper notre code CSS dans une balise HTML nommée « style ».

<!— RabetranoGhislain.html -->

<html>

<head>

<title>Training: CSS: Généralités</title>

<style>

p {font-weight : bold; font-style : italic}

</style>

</head>

<body>

<p>mon 1er texte en gras et en italique</p>

<p>mon 2nd texte en gras et en italique</p>

<p>mon 3eme texte en gras et en italique</p>

</body>

</html>

Avec ce dernier code, nous commençons à percevoir tout l’intérêt du CSS : en une ligne de code, nous avons décrit le comportement de toutes les balises « p » de notre fichier HTML.

Analysons un peu cette balise « style » :

· Nous voyons qu’il s’agit d’une balise HTML standard (elle s’ouvre et elle se ferme). Par ailleurs, on peut préciser de quel style il s’agit en écrivant « <style type="text/css"> …. </style> » mais par défaut, les navigateurs appliquent le CSS.

· Nous aurions pu la mettre n’importe où, par exemple à la fin du fichier, mais il est bien de la mettre dans le « head ».
Ainsi, le style sera chargé avant les éléments de la page et le navigateur web affichera tout de suite le bon formatage.

· Que se passe-t-il à l’intérieur de la balise « style » ?

o L’intérieur d’une balise « style » présentera toujours la forme suivante :
sélecteur {mot-clé : valeur ; mot-clé : valeur ; mot-clé : valeur ; mot-clé : valeur; … }

o Dans notre cas, le sélecteur est le nom de la balise que nous voulons atteindre, en l’occurrence « p ».
Ainsi, grâce au code CSS que nous avons mis dans la balise « style », nous avons spécifié le comportement de toutes les balises « p ».

· Une conséquence directe : Si finalement nous préférons que les balises « p » ne soient plus en gras, nous n’avons qu’à changer une seule ligne de code !

5. Emplacement du code CSS

Où placer son code CSS ?

Nous avons déjà vu 2 possibilités :

· Au niveau de l’élément HTML, dans l’attribut « style ».

· Dans le fichier HTML, entre les balises « <style> » et « </style> »

Il y a une dernière possibilité, c’est mettre son code CSS dans un fichier externe à la page HTML, dont l’extension sera « .css ».

Dans ce cas, il faut que la page HTML sache qu’il doit appeler ce fichier. Pour cela, on mettra dans l’entête ceci :
<link rel="stylesheet" href="mon-fichier.css" type="text/css" />

Ce qui donnerait :

<html>

<head>

<title>Training: CSS: Généralités</title>

<link rel="stylesheet" href="mon-fichier.css" type="text/css" />

</head>

<body>

<p>mon 1er texte en gras et en italique</p>

<p>mon 2nd texte en gras et en italique</p>

<p>mon 3eme texte en gras et en italique</p>

</body>

</html>

/* mon-fichier.css */

p {font-weight : bold; font-style : italic}

Note : Dans le cadre de CSS, tout ce qui se trouve entre « /* » et « */ » est un commentaire. On le voit dans le code, ce n’est pas exécuté.

Nous voyons dans ce cas que le rendu est exactement le même.

Quel est l’intérêt ?

Normalement, un site web est composé de plusieurs pages. Pour être homogènes, ces pages devraient avoir les mêmes règles visuelles.
Donc, au lieu d’écrire du code CSS dans toutes ces pages, le plus simple est d’écrire à un seul endroit le code, indépendamment de chacune des pages.

Ainsi, si nous faisons une nouvelle page HTML, on peut se concentrer sur le contenu et pas la mise en forme !

6. Les sélecteurs

Il y a trois manières de sélectionner des éléments de notre page HTML.

6.1. Sélection par balise

Le sélecteur est donc le mot qui va définir quels sont les éléments qui vont être impactés par notre code CSS.

Dans notre premier exemple, nous avons défini comme sélecteur « p ». Voyons alors un autre exemple où il y a plusieurs sélecteurs par balise.

<!— RabetranoGhislain.html -->

<html>

<head>

<title>Training: CSS: Généralités</title>

<style>

body {color : #596b89; background: #efefef;}

h1 {color : #333;}

p {font-style : italic}

div p {font-weight : bold;}

h1, p {text-decoration : none}

</style>

</head>

<body>

<h1>Mon 1er titre</h1>

<p>mon 1er texte en gras et en italique</p>

<h1>Mon 2nd titre</h1>

<p>mon 2nd texte en gras et en italique</p>

<div>

<p>

mon 3eme texte en gras et en italique

</p>

</div>

</body>

</html>

Apportons quelques remarques :

· Nous voyons que même la balise « body » peut être sélectionnable. Cela signifie que dans toute la page, le comportement par défaut sera celui qui est défini par ce sélecteur.
Dans notre exemple, nous avons mis une couleur d’arrière-plan à « body », donc à toute la page.

· Nous voyons bien que selon le sélecteur, le comportement est différent (les éléments « h1 » n’ont pas la même couleur que les éléments « p »)

· Nous voyons aussi que nous pouvons affiner notre sélection.
En effet, le sélecteur « div p » signifie que le code CSS n’est défini que pour les éléments « div » qui contiennent directement un élément « p ».

· Pour finir, notons que si 2 balises présentes un même comportement, nous pouvons les regrouper à l’aide d’un virgule comme c’est le cas quand on a écrit « h1, p »

6.2. Sélection par classe

Il arrive que 2 mêmes balises doivent se comporter différemment.

Il est donc pertinent de répartir nos mêmes éléments dans de différents groupes. Pour cela, nous devons mettre un attribut « class » à chaque élément.

Prenons l’exemple d’un damier. Si nous utilisons un tableau HTML, nous aurons plusieurs mêmes cellules (balise td) qui auront 2 comportements différents. Les uns ont un fond noir tandis que les autres ont un fond blanc.

Ca donnerait ceci :

<!— RabetranoGhislain.html -->

<html>

<head>

<title>Training: CSS: Généralités</title>

<style>

td {width: 40px; height: 40px;}

table {border: 1px solid black;}

.noir {background: black;}

.blanc {background: white;}

p.noir {font-size: 15px; font-family: Verdana; background: yellow; color: black;}

</style>

</head>

<body>

<p class="noir">Mon damier</p>

<table>

<tr>

<td class="noir"></td>

<td class="blanc"></td>

<td class="noir"></td>

<td class="blanc"></td>

</tr>

<tr>

<td class="blanc"></td>

<td class="noir"></td>

<td class="blanc"></td>

<td class="noir"></td>

</tr>

<tr>

<td class="noir"></td>

<td class="blanc"></td>

<td class="noir"></td>

<td class="blanc"></td>

</tr>

<tr>

<td class="blanc"></td>

<td class="noir"></td>

<td class="blanc"></td>

<td class="noir"></td>

</tr>

</table>

</body>

</html>

Apportons quelques remarques :

· La première chose à faire est d’ajouter à chaque cellule la bonne classe. Nous avons donc ajouté la même valeur à l’attribut « class » à tous les éléments qui doivent se comporter de la même manière :

o class="noir" : Tout ce qui devait avait un arrière-plan noir

o class="blanc" : Tout ce qui devait avait un arrière-plan blanc

· Comment sélectionner les cellules selon sa classe ?
Dans notre code CSS, le sélecteur sera le nom de la classe, précédé d’un point. Dans notre exemple, nous avons utilisé « .noir » et « .blanc ».
Notez que c’est à vous d’inventer le nom de la classe…

· Lorsque nous mettons « .noir », cela signifie qu’il appliquera le style à tous les éléments qui ont l’attribut « class="noir" ».
Mais nous pouvons apporter une précision. Par exemple, si écrivons comme sélecteur « p.noir », cela signifie que le style sera appliqué uniquement aux éléments « p » qui ont l’attribut « class="noir" ».
Ainsi, nous pouvons définir 2 comportements totalement différents aux éléments qui ont l’attribut « class="noir" » et aux éléments « p » qui ont l’attribut « class="noir" ».

· Notez enfin qu’un élément peut bénéficier du style de plusieurs sélecteurs si son nom ou ses attributs correspondent.
Dans notre cas, l’élément « <td class="noir"> » bénéficie à la fois des comportement des sélecteurs « td » et « .noir ».
Ceci montre qu’il faut chercher à mutualiser au maximum ses sélecteurs.

6.3. Sélection par identifiant

CSS permet enfin d’avoir un sélecteur spécifique pour un élément précis. Pour désigner cet élément, nous devons spécifier l’attribut « id » à l’élément cible.

<!— RabetranoGhislain.html -->

<html>

<head>

<title>Training: CSS: Généralités</title>

<style>

td {width: 40px; height: 40px;}

table {border: 1px solid black;}

.noir {background: black;}

.blanc {background: white;}

p.noir {font-size: 15px; font-family: Verdana; background: yellow; color: black;}

#centre {border: double 3px white;}

</style>

</head>

<body>

<p class="noir">Mon damier</p>

<table>

<tr>

<td class="noir"></td>

<td class="blanc"></td>

<td class="noir"></td>

</tr>

<tr>

<td class="blanc"></td>

<td id="centre" class="noir"></td>

<td class="blanc"></td>

</tr>

<tr>

<td class="noir"></td>

<td class="blanc"></td>

<td class="noir"></td>

</tr>

</table>

</body>

</html>

Apportons quelques remarques sur la case au centre :

· D’un côté, nous voulons qu’elle se comporte comme une case noire quelconque, mais nous voulons aussi le faire ressortir par des bordures blanches.

· Le moyen le plus propre est de lui donner comme attribut « class="noir" » et en même temps, pour pouvoir la cibler, nous lui donnons un identifiant unique grâce à l’attribut « id ».

· Ainsi, pour cibler un attribut, le sélecteur sera la valeur de l’ID précédé d’un dièse. Dans notre cas, ça donne « #centre ».

· Au final, notre cellule centrale est défini de telle sorte qu’elle aura les comportement des sélecteur « td », « .noir » et « #centre ».

7. Quelques mot-clés CSS

Voici une première liste de mot-clé CSS. Nous avons vu pour la plupart des cas concrets d’utilisation plus haut.

Mot-clé	Définition	Utilisation
width	Largeur d’un élément	Exprimé en pixel ou en pourcentage
height	Hauteur d’un élément	Exprimé en pixel ou en pourcentage
border	Définition la bordure	Nous pouvons saisir 3 valeurs d’un coup : la couleur, le style (solid, double, …) et la taille
background	Définition de l’arrière-plan	Nous pouvons saisir plusieurs valeurs d’un coup : la couleur, l’image ( url(path) ), la répétition (repeat-x ou repeat-y) …
background-color	Définition de la couleur de l’arrière-plan
background-image	Définition de l’URL de l’image de l’arrière-plan
color	Définition de la couleur
font	Définition de la police	Nous pouvons saisir plusieurs valeurs d’un coup : la taille, la police …
font-size	Définition de la taille de la police
font-family	Définition du nom de la police	Verdana, Arial …
font-weight	Définition de l’épaisseur de la police	Lighter, normal, bold, bolder
font-style	Définition de l’inclinaison de la police	Normal, italic, oblique
text-decoration	Définition des barres du texte	None (rien), Soulignement (underline), ligne au-dessus (overline) ou barré (line-through)
text-align	Définition de l’alignement horizontal du texte	left, center, right ou justify
cursor	Définition du curseur de la souris	crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto...

8. Validation

8.1. Énoncé

Après analyse du code HTML (voir point 7.2), essayez de vous rapprocher le plus possible du modèle (image à droite) en usant seulement de code CSS.

· Couleurs utilisées : black, white, orange, red, green, purple, salmon, grey, blue

· Police utilisée pour les noms : Verdana

· Hauteur de la barre horizontale : 5px

· Taille de la police de la dernière ligne : 20px

Préparation du cadre de travail :

Copiez/collez ce bout de code du point 7.2 dans le fichier [VotreNom].html à l’aide votre éditeur de texte préféré.

Pour afficher la page, cliquez sur « votreNom.html » la page s’affichera dans un navigateur.

Quand le travail sera fait, télécharger le fichier validation.doc et remplacer la capture d’écran d’exemple par une capture d’écran de votre travail.

Pour valider le doc, il faut l’uploader sur la page de validation (voir les instructions générales pour les trainings).

8.2. Page HTML à reproduire

<!— RabetranoGhislain.html -->

<html>

<head>

<title>Training: CSS: Généralités</title>

<style>

</style>

</head>

<body>

<h1>1. Résultats</h1>

<h2>1.1 Résultats Q1</h2>

<p>Commentaires : exercitation <span>ullamco</span> laboris nisi ut <span>aliquip</span> ex ea commodo consequat.</p>

<table>

<thead>

<tr>

<th></th>

<th>Jan</td>

<th>Fev</th>

<th>Mar</th>

</tr>

</thead>

<tbody>

<tr>

<td class="name">Bob</td>

<td>12</td>

<td>14</td>

<td>10</td>

</tr>

<tr>

<td class="name">Jane</td>

<td>11</td>

<td id="best">16</td>

<td>13</td>

</tr>

<tr>

<td class="name">Leo</td>

<td>12</td>

<td>14</td>

<td>13</td>

</tr>

</tbody>

</table>

<h2>1.2 Résultats Q2</h2>

<p>Commentaires : aute irure <span>dolor</span> in reprehenderit in voluptate velit esse cillum dolore .</p>

<table>

<thead>

<tr>

<th></th>

<th>Mars</td>

<th>Avr</th>

<th>Juin</th>

</tr>

</thead>

<tbody>

<tr>

<td class="name">Bob</td>

<td>13</td>

<td id="least">9</td>

<td>12</td>

</tr>

<tr>

<td class="name">Jane</td>

<td>13</td>

<td>12</td>

</tr>

<tr>

<td class="name">Leo</td>

<td>13</td>

<td>14</td>

</tr>

</tbody>

</table>

<hr />

<h1>2. Conclusion</h1>

<p>Lorem ipsum dolor sit amet, <span>consectetur</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p class="important">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit <span>esse cillum</span> dolore eu fugiat nulla pariatur.</p>

<p id="end">Excepteur sint <span>occaecat cupidatat</span> non proident, sunt in culpa qui officia deserunt <span>mollit anim id</span> est laborum.</p>

</body>

</html>