Avec uniquement du code HTML, la page Web est assez "fade" ; heureusement le code CSS permet d'y apporter de la couleur et pas que !

Le code CSS peut être écrit dans le fichier contenant le code HTML mais cela n'est pas conseillé ; il est préférable de créer un fichier CSS avec l'extension ".css" contenant uniquement le code CSS et en parallèle le fichier HTML avec l'extension ".html" contenant uniquement le code HTML !

À faire vous-même 1 :

• A partir de « Notepad++ » ouvrez un nouveau fichier puis enregistrez-le sous le nom "style.css" dans le même dossier que votre précédent travail (fichier « index.html »)
• Écrivez le code CSS ci-dessous qui donnera au fond de page de votre site sur l’histoire du Web la couleur verte :

Pour l'instant votre CSS ne sera pas appliqué à votre page ! Pour ce faire, il faut modifier votre code HTML en ajoutant une ligne qui va permettre d'associer votre code CSS à votre page.

À faire vous-même 2 :

• Ouvrez votre code HMTL de l'activité précédente autour de votre « fake news » pour le modifiez en y ajoutant la ligne suivante dans la partie « head » :

<link rel="stylesheet" href="style.css">

• Testez le résultat et ajuster votre code CSS à votre convenance pour rendre le plus intéressant votre page Web en n’oubliant pas d’enregistrer les deux fichiers (CSS et HTML) et en réactualisant votre page Web

Voici l'exemple de code CSS qui donnera des idées pour égayer encore davantage vote page :

Résultat de la page Web sur navigateur :

À faire vous-même 3 :

• Prenez le temps d'étudier le code CSS précédent en lisant les commentaires et en observant le résultat obtenu.
• Complétez progressivement votre code CSS afin de rendre le plus joli possible votre site Web... en s’inspirant de l’exemple ci-dessus (NE PAS RECOPIER A L’IDENTIQUE !) et éventuellement en faisant des recherches sur Internet (ne pas oublier à chaque fois d’enregistrer et de mettre à jour la page Web)

À faire vous-même 4 pour aller plus loin :