Détails: Écrit par : Jeremie Bellanger; Catégorie : Tutos HTML; Mis à jour : 5 Mai 2025

Chapitre 5 : Ajoutons un peu de CSS à notre page

Vous aurez sûrement remarqué que malgré vos efforts, la mise en page de votre fichier HTML n'est pas très belle... 😅

Cela ne ressemble pas trop aux sites web que vous avez l'habitude de visiter... 😂

Et cela, c'est parce que nous n'utilisons que du HTML pur. Or depuis, les années 2000, le CSS a été rajouté pour aider justement à mettre en forme le code HTML. 🙃

Qu'est-ce que le CSS ?

Le CSS veut dire Cascading Style Sheets en anglais, soit "feuilles de style en cascade" en français. C'est un autre langage informatique qui permet de décrire la présentation des documents HTML (et aussi XML). Comme pour le HTML, ses standards sont publiés par le World Wide Web Consortium (W3C).

Cela signifie donc que pour une seule page web, nous allons désormais avoir 2 fichiers :

le fichier HTML qui décrit le contenu de la page web,
et le fichier CSS qui va indiquer sa mise en forme.

Vous l'aurez compris, il va donc falloir créer un nouveau fichier dans le même dossier que votre page Projet1.html, que vous allez appeler : style.css.

A la découverte du CSS

Pour que votre fichier HTML sache où aller chercher le code CSS que nous allons rentrer, il va falloir ajouter le code suivant entre les balises <head> et </head> :

Voilà, on peut maintenant passer à l'édition du fichier style.css :

h1 {
    color: black;
}

p {
    color: blue;
}

Le code minimaliste suivant va permettre de coloriser automatiquement TOUTES les balises h1 en noir (black) et p en bleu (blue). C'est ainsi un réel gain de temps car vous n'avez plus besoin d'ajouter des balises <FONT color=couleur>...</FONT> à chaque fois ! 🙃

Attention cependant, si vous avez utilisé ces balises dans votre code HTML, elles auront la priorité sur le CSS. Ainsi, même si vous décidez de mettre tous les titres (headers ou h1) en noir (black) mais que dans votre code HTML, vous avez utilisé, par exemple : <FONT color=blue>Titre</FONT>, votre titre apparaîtra quand même en bleu ! 😮

Pour remédier à ça, vous pouvez supprimer les couleurs de votre code HTML, et vous reporter au CSS. Mais vous pouvez aussi jouer avec les 2 en décidant que, par défaut, tous les titres sont en noirs, SAUF ceux que vous décidez de coloriser spécifiquement dans le fichier HTML. 😉

Voilà maintenant quelques propriétés en CSS :

.maClass {	Nom du code HTML à modifier, ici maClass
width : 300px ;	Indique la largeur du bloc en pixels ou en pourcentage : 80% ;
height : 80% ;	Indique la hauteur du bloc en pixels ou en pourcentage : 80% ; On n'es pas obligé de l'indiquer, on peu juste indiquer width.
text-align : center ;	Alignement du texte : left, center ou right
font-size : 20px ;	Taille en pixels de la police de caractères
font-weight : 700 ;	Graisse de la police de caractères (entre 100 et 900)
font-style : italic ;	Style de la police : italic, normal ou oblique
background : #FF0000 ;	Couleur d’arrière plan (ici rouge)
color : #0000FF ;	Couleur de la police de caractère (ici bleue)
border : solid 3px #0000FF ;	Type de bordure : solid, dotted ou dashed, bleue de 3px
margin : 10px ;	Indique les marges extérieures
Padding : 10px ;	Indique les marges intérieures
}

Si vous voulez tester le code ci-dessus, vous pouvez choisir n'importe quel élément de votre code HTML comme un p ou un h1 et lui rajouter le nom de class maClass, comme ça :

<p class="maClass">

Sinon, si vous ne lui donnez pas de nom et marquez juste p, il s'appliquera à tous les paragraphes p de votre code HTML.

Bien sûr, vous pouvez créer plusieurs "class", en leur donnant des noms différents, pour personnaliser au maximum ! Je vous laisse tester et vous amuser un peu. Notez que vous pouvez utiliser la balise <DIV> ... </DIV> dans le code html, pour diviser votre page et leur donner des noms différents. C'est très pratique ! 😋

<DIV class="theme"> ... </DIV>

Sinon, vous remarquerez que pour indiquer les couleurs, on peut rentrer leur nom en anglais comme red, blue, etc. mais pour avoir vraiment LA couleur que vous désirez, vous pouvez utiliser son code hexadécimal en utilisant un site comme celui-ci (ou un logiciel de dessin).

Notez que le résultat du code ci-dessus est très moche... 🤔 mais au moins, on voit le résultat ! Après, les goûts et les couleurs comme on dit... 😅

TP 4 (final)

Et voilà le final, comme on dit ! 😀
Maintenant, libre à vous de poursuivre l'édition de votre page html en rajoutant autant de code CSS que vous voudrez !

Toujours notre exemple :

Ma passion pour le cinéma

Le cinéma me passionne car il offre une évasion divertissante, des récits captivants et des émotions intenses. Il invite à la réflexion sur des thèmes variés, tout en étant une forme d'art et d'expression créative. Le cinéma favorise le partage et l'échange, tout en étant un reflet de la culture et de l'histoire.

Mon film préféré : Lyra, Chroniques de l'Éther

Genre : Fantasy épique

Synopsis : Dans un monde où la magie est à la fois source de vie et de destruction, une jeune orpheline nommée Lyra découvre qu'elle est la dernière descendante d'une lignée de gardiens, les seuls capables de maîtriser l'Éther, l'énergie magique primordiale.

Lyra est propulsée dans une aventure épique à travers des royaumes fantastiques, des forêts enchantées aux cités flottantes, pour apprendre à maîtriser ses pouvoirs et affronter une force obscure qui menace de plonger le monde dans le chaos.

Sur son chemin, elle rencontre des alliés improbables : un elfe taciturne mais loyal, un nain bourru mais sage, et un magicien excentrique mais puissant. Ensemble, ils devront déjouer les complots, affronter des créatures mythologiques, et découvrir les secrets d'une ancienne prophétie qui révèle le destin de Lyra et du monde.

Thèmes :

Le pouvoir de la magie et ses responsabilités
Le destin et le libre arbitre
L'amitié et la loyauté
La lutte entre le bien et le mal
La découverte de soi et l'acceptation de son héritage

Personnage	Histoire	Particularités
Lyra	Orpheline élevée dans un village isolé, elle découvre qu'elle est la dernière descendante d'une lignée de gardiens de l'Éther.	Courageuse, déterminée, mais parfois impulsive. Elle possède un lien unique avec l'Éther et apprend à maîtriser ses pouvoirs au fil de son voyage.
Elara	Elfe taciturne et solitaire, elle est une experte dans l'art du combat et possède une connaissance approfondie des anciennes traditions elfiques.	Loyale, protectrice, mais parfois froide et distante. Elle rejoint Lyra pour expier une faute passée et protéger le monde de la menace obscure.
Grum	Nain bourru et sage, il est un maître forgeron et un gardien des traditions naines. Il a une connaissance encyclopédique de l'histoire et des légendes du monde.	Sage, réfléchi, mais parfois têtu et grincheux. Il devient un mentor pour Lyra et l'aide à comprendre l'importance de son rôle.

Et voici le code pour vous aider :

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
	  <link rel="stylesheet" href="/style.css" />
      <title>Ma passion pour le cinéma</title>
   </head>

   <body>
      <h1 align=center><STRONG>Ma passion pour le cinéma</STRONG></h1>
	  <BR/>
	  <DIV class="maClass">
      <p align=justify>Le cinéma me passionne car il offre une évasion divertissante, des récits 
      captivants et des émotions intenses. Il invite à la réflexion sur des thèmes variés, tout en 
      étant une forme d'art et d'expression créative. Le cinéma favorise le partage et l'échange, 
      tout en étant un reflet de la culture et de l'histoire.</p>
	  </DIV>
	  <BR/>
	  <h1 align=center><STRONG>Mon film préféré : Lyra, Chroniques de 
          l'Éther</STRONG></h1>
	  <BR/>
	  <DIV align=center><IMG src="/IA01.jpeg"></DIV>
	  <BR/>
      <h3 align=center><STRONG>Genre : <A href="http://fr.wikipedia.org/wiki/Fantasy">Fantasy 
      épique</A></STRONG></h3>
	  <BR/>
	  <DIV class="maClass">
      <p align=justify><STRONG>Synopsis : </STRONG>Dans un monde où la magie est à la 
      fois source de vie et de destruction, une jeune orpheline nommée Lyra découvre qu'elle 
      est la dernière descendante d'une lignée de gardiens, les seuls capables de maîtriser 
      l'Éther, l'énergie magique primordiale.</p>
      <p align=justify>Lyra est propulsée dans une aventure épique à travers des royaumes
       fantastiques, des forêts enchantées aux cités flottantes, pour apprendre à maîtriser ses 
      pouvoirs et affronter une force obscure qui menace de plonger le monde dans le chaos.</p>
      <p align=justify>Sur son chemin, elle rencontre des alliés improbables : un elfe taciturne 
      mais loyal, un nain bourru mais sage, et un magicien excentrique mais puissant. Ensemble, 
      ils devront déjouer les complots, affronter des créatures mythologiques, et découvrir les 
      secrets d'une ancienne prophétie qui révèle le destin de Lyra et du monde.</p>
	  </DIV>
	  <BR/>
	  <DIV class="theme">
	  <h3 align=left><STRONG>Thèmes :</STRONG></h3>
      <ul>
         <li>Le pouvoir de la magie et ses responsabilités</li>
         <li>Le destin et le libre arbitre</li>
         <li>L'amitié et la loyauté</li>
         <li>La lutte entre le bien et le mal</li>
         <li>La découverte de soi et l'acceptation de son héritage</li>
	  </ul>
	  </DIV>
	  <BR/>
	  <table border="1">
         <tr>
            <th>Personnage</th>
            <th>Histoire</th>
            <th>Particularités</th>
         </tr>
         <tr>
            <td>Lyra</td>
            <td>Orpheline élevée dans un village isolé, elle découvre qu'elle est la dernière 
			descendante d'une lignée de gardiens de l'Éther.</td>
            <td>Courageuse, déterminée, mais parfois impulsive. Elle possède un lien unique 
			avec l'Éther et apprend à maîtriser ses pouvoirs au fil de son voyage.</td>
         </tr>
         <tr>
            <td>Elara</td>
            <td>Elfe taciturne et solitaire, elle est une experte dans l'art du combat et 
			possède une connaissance approfondie des anciennes traditions elfiques.</td>
            <td>Loyale, protectrice, mais parfois froide et distante. Elle rejoint Lyra 
			pour expier une faute passée et protéger le monde de la menace obscure.</td>
         </tr>
		 <tr>
            <td>Grum</td>
            <td>Nain bourru et sage, il est un maître forgeron et un gardien des traditions 
			naines. Il a une connaissance encyclopédique de l'histoire et des légendes du monde.</td>
            <td>Sage, réfléchi, mais parfois têtu et grincheux. Il devient un mentor pour 
			Lyra et l'aide à comprendre l'importance de son rôle.</td>
         </tr>
      </table>
	  <BR/>
	  <BR/>
   </body>
</html>

Ainsi que le fichier style.css :

h1 {
	color: blue;
	}

h3 {
	color: red;
	}

p {
	color: black;
	}

table {
	width : 90% ;
	background : #ffdbfa ;
	border : dotted 1px black ;
	margin : 20px ;
	}

.maClass {
	width : 90% ;
	background : #fffdbd ;
	border : solid 1px black ;
	margin : 20px ;
	Padding : 20px ;
	}

.theme {
	width : 30% ;
	background : #d4ffe6 ;
	border : solid 1px black ;
	margin : 20px ;
	Padding : 20px ;
	}