Le langage CSS⚓︎
Qu’est-ce que le CSS ?⚓︎
Les CSS ou "Cascading Style Sheets" (feuilles de styles en cascade), servent à mettre en forme des documents web. Par l'intermédiaire de propriétés d'apparence (couleurs, polices, etc…), de placement (largeur, hauteur, etc...), etc.
Nous avons déjà vu dans ce qui précède du texte écrit en rouge grâce à l'attribut style="color:red". Que se passerait-il si nous voulions remplacer le rouge par du vert ? Il faudrait rechercher dans le code HTML toutes les balises concernées et remplacer "red" par "green"...
Les feuilles de styles CSS permettent d'éviter ce genre de manipulations et de modifier très rapidement l'apparence complète d'un site. Leur objectif principal est de dissocier le contenu de la page de son apparence visuelle.
Exercice 1
Testez un des sites bien connus concernant CSS : le jardin zen (archives des autres designs) ; vous pouvez y choisir une feuille CSS pour modifier l'apparence de la page HTML. Notez bien que le code HTML reste toujours le même !
Trois façons d'utiliser le CSS⚓︎
Du moins bien au meilleur :
- directement au niveau du texte, comme par exemple dans
<span style="color: blue;">ceci est un texte en bleu</span>
ceci est déconseillé car peu pratique (si je veux changer le bleu par du vert, je devrais aller dans chaque fichier et faire le remplacement), nous n'en parlerons plus ; - au début d'un fichier HTML, entre des balises
<style></style>mais cela ne concernera que cette page HTML ; - dans un fichier externe portant l'extension
.css(souvent nommé style.css), ce qui permet de relooker un site Internet entier.
Inclusion de code CSS directement dans un fichier HTML⚓︎
Supposant que je souhaite modifier l'aspect des titres de niveau 1 et 2 (les "h1" et "h2") : dans l'en-tête de mon fichier HTML (le "head"), je peux placer :
<style>
h1, h2 {
text-align: center;
color: #272625;
text-transform: uppercase;
}
</style>
Exercice 2
Insérez ce code dans l'en-tête d'une des pages du projet que vous avez écrit précédemment (si vous ne le trouvez plus, travaillez sur cette archive que vous décompresserez).
Affichez cette page dans un navigateur pour voir l'effet produit.
Remarquez que ceci n'affecte pas les autres pages HTML de votre projet.
Code CSS dans un fichier externe⚓︎
L'alternative la meilleure est de créer un fichier "style.css" qui contient toutes les informations de style puis d'y faire appel dans vos fichiers HTML en ajoutant un lien dans le "head" :
<link rel="stylesheet" href="style.css"/>
Dans cette balise, la valeur associée à l’attribut href permet d’indiquer le chemin vers le fichier externe codé en CSS. Le chemin peut être relatif depuis le fichier HTML (comme ci-dessus) ou absolu.
Exercice 3
Insérez le code précédent (celui s'appliquant à h1 et h2)
dans un fichier style.css puis ajoutez la ligne <link rel="stylesheet" href="style.css"/>
dans l'entête de chacune des pages de votre projet.
Affichez quelques-unes de ces pages dans un navigateur pour voir l'effet produit.
Comment appliquer un style à un élément présent dans le code HTML ?⚓︎
Un style peut s'appliquer :
- à toutes les balises d'un certain type (exemple : h2) ;
- à un élément unique repéré par son identifiant (avec
id="..."); - à tous les éléments d'une "classe" (avec
class="...").
Sélection des éléments par leur type⚓︎
Exemple :
p {
color:red;
}
p : tous les paragraphes seront mis en rouge.
Il faut ouvrir une accolade { , donner la propriété CSS (ici color la couleur du texte) et lui affecter une valeur (ici red).
On peut définir plusieurs couples propriétés / valeurs entre les accolades (voir ce qui précède avec h1 et h2). Il faut toujours terminer une ligne par un point-virgule ; et refermer l’accolade } à la fin du bloc de propriétés pour un sélecteur donné.
Sélection d'un élément par son identificant (id)⚓︎
Nous pouvons spécifier un élément html unique en lui ajoutant un attribut id.
Exemple :
<div id = "important">Ceci un texte. C'est le seul ayant l'identifiant "important".</div>
<div>Ceci un second texte.</div>
#important {
font-size : 300%;
color : darkseagreen;
}
Retenir
En CSS, pour sélectionner un élément j'utilise le caractère # suivi de la valeur de l’attribut id.
Ceci est à utiliser lorsque l'on veut intervenir sur un seul élément.
Exercice 4
Testez le code de cet exemple précédent, d'abord juste le HTML sans le CSS, puis avec, dans jsfiddle.
Sélection d'éléments via une classe⚓︎
Nous pouvons spécifier plusieurs éléments html en leur ajoutant un attribut class.
Exemple :
<p class = "essentiel">Ce texte est essentiel.</p>
<p>Ce paragraphe est moins important !</p>
<p class = "essentiel">Mais celui-là est aussi remarquable !</p>
.essentiel {
font-weight : bold;
color : red;
}
Retenir
En CSS, pour sélectionner tous les éléments de la "classe" "essentiel" j'utilise le caractère . suivi de la valeur de l’attribut class.
Ceci est à utiliser lorsque nous voulons intervenir sur plusieurs éléments.
Dans l'exemple ci-dessus, nous ne souhaitons pas modifier tous les élements <p></p> mais seulement certains.
Enfin, il est possible de définir une classe seulement pour un certain type d'éléments, par exemple avec :
<div class = "remarque">Juste pour info...</div>
<div>Un autre bloc</div>
<p class = "remarque">pas très pertinent mais c'est pour l'exemple...</p>
div.remarque {
font-weight : bold;
color : blue;
}
ici seuls les éléments <div></div> de classe "remarque" seront affectés.
Exercice 5
Testez les codes précédents, d'abord sans le CSS, puis avec, dans jsfiddle.
Quelques propriétés courantes en CSS⚓︎
| Propriétés | Valeurs |
|---|---|
| width : Largeur d’un élément | en px (pixel) ou vw(pourcentage de la largeur de la fenêtre) |
| height: Hauteur d’un élément(Valeur défini que pour certaines balises) | px (pixel) ou vh(pourcentage de la hauteur de la fenêtre) |
| margin: marge extérieure de l’élément | px (pixel) vh ou vw |
| padding : marge intérieure | px (pixel) vh ou vw |
| background-color : couleur de fond | nom de la couleur (exemple : red) ou code rgb (rgb(255,0,0) pour du rouge) ou code hexadécimal (#FF0000 pour du rouge) |
| color: couleur de la police | comme pour color |
| opacity: opacité d’un élément | Valeur comprise entre 0 et 1 |
| font-size : Taille de la police | en em ou en px (vh et vw sont possibles) |
Les couleurs en HTML⚓︎
- Couleur exprimée en décimale avec transparence : par exemple rgba(202, 125, 38, 0.5), les trois premiers nombres indiquent les quantités (de 0 à 255) de rouge, de vert et de bleu, le dernier paramètre donne la transparence.
- Couleur exprimée en hexadécimale : commence par un # puis chaque quantité est indiquée par deux chiffres hexadécimaux. Par exemple, dans #d5ede2;, le "mot" d5 = 13 × 16 + 5 = 213 est la quantité de rouge.
Projet (partie 2)
Modifiez la feuille de style style.css de votre projet en y intégrant quelques-uns des éléments indiqués ci-dessus.
En particulier, faîtes en sorte qu'il n'y ait plus de style="..." dans le code HTML, en conservant néamoins le même aspect.
Interactions avec l'utilisateur grâce à CSS⚓︎
CSS permet quelques petites interactions avec l'utilisateur, par exemple avec la "pseudo-classe" :hover qui permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur de la souris.
Exemple où j'applique un effet à toutes les images d'une classe que j'appelle "active" :
<img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Sciences_de_la_terre.svg/1024px-Sciences_de_la_terre.svg.png" height="100px" alt="une image">
<img class="active" src="https://upload.wikimedia.org/wikipedia/commons/3/34/Cinque_Terre_and_the_Mediterranean.jpg" height="100px" alt="une autre image">
img.active { transition: all 0.3s ease-in-out 0s; }
img.active:hover
{
cursor: default;
transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;
}
Projet (partie 3)
Consultez cette page pour découvrir d'autres animations et appliquez-en quelques-unes aux éléments de votre article (toujours via votre fichier style.css) (il vous suffira de remplacer transform: rotate(360deg); dans le code ci-dessus).