Nous avons vu comment faire une page web très simple avec une mise en page minimaliste à l’aide du langage HTML. Nous allons voir que très rapidement, les concepteurs web ont cherché à séparer le contenu de la page de sa présentation.
Copiez le code HTML dans le Bloc-Notes (ou dans tout autre éditeur de textes) et enregistrez le sous le nom "test_CSS.html".
<html> <head> <title>Test HTML + CSS</title> </head> <body> <h1>Ceci est un titre de niveau h1</h1> <p><strong>Ceci est un premier paragraphe :</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p> <h2>Ceci est un titre de niveau h2</h2> <p><strong>Ceci est un deuxième paragraphe :</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p> <h2>Ceci est un autre titre de niveau h2</h2> <p><strong>Un troisième paragraphe pour finir :</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p> </body> </html>
Ouvrez ensuite ce fichier avec un navigateur Internet pour voir le rendu du fichier HTML. (Ceux qui sont quelque peu surpris de la teneur du texte présent dans le fichier HTML pourront consulter la page suivante : https://fr.wikipedia.org/wiki/Lorem_ipsum pour comprendre de quoi il s’agit exactement).
Pour l’instant le texte n’a pratiquement aucune mise en forme. Rajoutez la ligne suivante, entre les balises <head> et </head> (la position de la ligne dans la section n’a pas vraiment d’importance) :
<link rel = "stylesheet" href = "style.css">
Cette ligne va créer un lien entre la page HTML et une feuille de styles appelée "style.css", qui n’existe pas encore.
A l’aide de l'éditeur de texte, créez un nouveau fichier de nom "style.css" et enregistrez le au même endroit que le fichier HTML.
Dans le fichier "style.css", tapez :
body{
color: red;
} Rechargez la page HTML (touche F5 sur le navigateur). Que remarque-t-on ?
Modifiez le fichier "style.css" de la façon suivante :
body{
color: red;
}
p{
color: blue;
}
h1{
color: green;
text-align: center;
} Rechargez la page HTML (touche F5 sur le navigateur). Que remarque-t-on ?
Chaque section du fichier CSS contient des attributs qui seront appliqués au texte compris entre des balises particulières (ici : les balises <body>, <p> et <h1>).
Rajoutez les lignes suivantes à la fin du fichier "style.css" :
h2{
color:orange;
font-style: italic;
} Rechargez la page HTML (touche F5 sur le navigateur). Comme on pouvait s’y attendre, la mise en forme choisie (couleur orange et texte en italique) s’est appliquée aux deux titres situés entre les balises <h2>.
Comment faire pour que chacun des deux titres ait une mise en forme différente malgré le fait qu’ils utilisent tous les deux la même balise ? Grâce à l’attribut « class ».
Rajoutez les lignes suivantes à la fin du fichier "style.css" :
.paragraphe2{
color: purple;
text-decoration: underline;
} Attention à ne pas oublier le point au début de la première ligne !
Modifiez maintenant le fichier "test_CSS.html" en modifiant la deuxième balise <h2> de la façon suivante :
<h2 class="paragraphe2">Ceci est un autre titre de niveau h2</h2>
Une fois les deux fichiers (HTML et CSS) sauvegardés, rechargez la page HTML avec F5.
Remarquez que le deuxième titre de niveau h2 va hériter des propriétés de la balise <h2> (notamment le texte en italique), mais que les propriétés de la classe «paragraphe2» vont s’appliquer ensuite (la couleur violette et le soulignement). On peut ainsi, grâce à l'attribut « class » appliquer des styles différents à des balises identiques.
Ajoutez maintenant les lignes suivantes à la fin du fichier HTML :
<p><img src = "image.png" class = "imageflottante">XXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
Remarques :
- A la place de « XXXX…XXXX », vous pouvez taper n’importe quoi. Il faut et il suffit qu’il y ait quelques lignes d’écran complètes.
- Il faudra copier le fichier "image.png" au même endroit que vos fichiers HTML et CSS.
Rechargez la page HTML (touche F5 sur le navigateur). Que remarque-t-on ? Pour améliorer l’habillage de l’image, on rajoute les lignes suivantes au fichier CSS :
.imageflottante{
float: left;
} Rechargez la page HTML (touche F5 sur le navigateur). Que remarque-t-on ? Changez l’attribut « left » par « right » et rechargez la page pour voir la modification.
Si vous trouvez que l’image est trop grosse, modifier le fichier CSS de la manière suivante :
.imageflottante{
float: left;
width: 100px;
height: 100px; Vous pouvez continuer à explorer en allant sur la page suivante : https://developer.mozilla.org/fr/docs/Web/CSS/Reference qui est une page de référence sur la plupart des fonctions CSS.
