• Le CSS (Cascading Style Sheets, aussi appelées feuille de style) permet de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).
• Il existe deux méthodes pour ajouter du style dans une page HTML :
<style>
à l’intérieur de l'en-tête <head>
.A faire vous-même 1 | Nom du fichier : index3-1.html |
---|---|
Ouvrir Notepad++ et ajouter le code suivant : <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Une page Web avec du CSS</title> <style> h1 { color: red ; } </style> </head> <body> <h1>Ma première page web avec du CSS</h1> <p>Sans CSS cette page n'est pas très jolie. Bientôt elle le sera !</p> </body> </html>
|
A faire vous-même 2 | index3-2.html | style3-2.css |
---|---|---|
1) Dans Notepad++, ajouter le code suivant : <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Une page Web avec du CSS</title> <link rel="stylesheet" href = "style3-2.css"/> <!-- ici on fait référence au fichier CSS --> </head> <body> <h1>Ma première page web avec du CSS</h1> <p>Sans CSS cette page n'est pas très jolie. Bientôt elle le sera !</p> </body> </html>
h1{ color: red ; }
|
Dans un code CSS, on trouve trois éléments différents :
<h1>
, je dois écrire h1.color
qui permet d’indiquer la couleur du texte. Chaque propriété est suivi du symbole « deux-points » ( : ).color
, il faut indiquer le nom de la couleur. Chaque ligne se termine par un point-virgule ( ;).
Schématiquement, une feuille de style CSS ressemble donc à cela :
Pour appliquer un style à une seule balise :
Balise1 { Propriété1 : valeur1 ; Propriété2 : valeur2 ; }
Pour appliquer un style à plusieurs balises :
Balise1, Balise2, Balise3 { Propriété1 : valeur1 ; Propriété2 : valeur2 ; }
Exemple :
p, h1 { color: blue; }
Il est possible d’ajouter des commentaires dans un fichier CSS. Les commentaires ne seront pas affichés.
Syntaxe :
/* mettre un commentaire ici */
Si sur une page, j'ai deux paragraphes dont je souhaite modifier la couleur, je pourrai utiliser les codes HTML et CSS suivants :
Le code CSS :
p { color:red; }
Le problème est qu'avec le code précédent, il est impossible de mettre un paragraphe en rouge, l'autre en vert !
Pour donner un style différent aux paragraphes, on peut utiliser des attributs spéciaux permettant de nommer les paragraphes :
La seule différence entre ces deux attributs est que id ne peut être utilisé qu’une seule fois dans le code.
Ces attributs spéciaux fonctionnent sur toutes les balises.
Pour éviter toute confusion, nous n'utiliserons principalement que l'attribut class cette année.
A faire vous-même 3 | index3-3.html | style3-3.css |
---|---|---|
1) Enregistrer le code HTML suivant dans un fichier nommé index3-3.html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Une page Web avec du CSS</title> <link rel="stylesheet" href = "style3-3.css"/> <!-- ici on fait référence au fichier CSS --> </head> <body> <p class="en-rouge">Ce paragraphe est en rouge.</p> <p id="en-vert">Ce paragraphe est en vert.</p> </body> </html>
.en-rouge { color: red ; } #en-vert { color: green ; }
|
Dans le fichier CSS, pour mettre en rouge uniquement le paragraphe « en-rouge », il faut indiquer le nom de la class en commençant par un point (.) .
Lors de l’utilisation des id, il faut faire précéder le nom de l’id par un dièse (#).
Les valeurs indiquées pour les attributs id et class ne doivent contenir ni caractères spéciaux ni espaces et commencer par une lettre.
Il existe d’autres façons de cibler des balises CSS :
* { color: blue; }
.maclasse * { color: blue; }
Il existe encore d’autres sélecteurs que je vous laisse découvrir en tapant « sélecteurs css » dans un moteur de recherche.
Quelques liens :