nav, em… .) suivi du nom de la classe.
Exemples :
.info-complementaire, .photo… #) suivi du nom de l'identifiant.
Exemples :
#pied-de-page, #item-actif… h1,p,.toto sélectionne les éléments de type
h1, les éléments de type p,
et les éléments de classe toto.
.toto p sélectionne les paragraphes dont au moins un parent est de
classe toto.
Une façon de combiner les sélecteurs que l'on n'a pas encore vue est la conjonction (qui correspond à l'opérateur logique « et »)
Permet de sélectionner des éléments qui doivent satisfaire plusieurs sélecteurs à la fois
Pour obtenir cette combinaison, il suffit de regrouper les sélecteurs ensemble, sans espaces
Ex:
img#toto.intro sélectionne les éléments de type img ayant l'identifiant toto et la classe intro.
span.operation {
font-weight: bold;
}
aside.operation {
border: 2px solid black;
float: right;
}
aside par un autre élément,
on casse tout alors que les classes ne servent que pour le CSS, pas de raison de les changer<div class="foo bar">je suis de classe foo et de classe bar!</div>⇒ on sépare les classes par des espaces dans l'attribut
class
.foo { color: yellow; }
.bar { border: solid 4px red; }
l'élément sera en jaune avec une bordure rouge. .foo.bar { border-style: dashed; }
Peut être utile, mais pas évident à maintenir :
en général
on essaie plutôt d'éviter que les classes dépendent les unes des autres.Comme toujours en informatique, on cherche à factoriser au maximum son code CSS, c'est-à-dire à éviter les répétitions (principe DRY).
Objectif visé : principalement la facilité de maintenance
Voir le tutoriel sur la factorisation CSS de Jean-Marc Lecarpentier
id et classid pour les propriétés uniques d'un élémentclass pour des propriétés partagées (ou s'il y a une sémantique derrière la présentation)#menu1 et #menu2),
de style identique, sauf que l'un est en bleu et l'autre en rouge.menu, pour ce qui est commun, et
on utilise les identifiants pour changer simplement les couleurs.menu a pour styler les liens des menus lienMenu#leftMenu a et #rightMenu aà caser : * Identifiants : ils ne sont pas interdits, mais leur utilisation doit être justifiée. Normalement ils doivent servir pour modifier le style d'un élément précis, sans qu'il y ait de catégorie/sémantique associée. Typiquement, pour styler le menu principal, une classe est a priori plus appropriée (même s'il n'y a bien sûr qu'un seul menu principal sur la page). Mais ici encore c'est très subjectif (encore davantage que l'équilibre structure/classes). Les correcteurs/trices sont libres d'interdire les identifiants ou au contraire de les autoriser un peu plus largement.
[id="toto"] plutôt que #toto, on vise le même élément mais
avec une spécificité moindre!important. Ne pas le faire dans du vrai code :
ça complique (encore plus) le débogage et la maintenance. Ça peut être utile pour tester ou déboguer
(ou dans les cas où on doit ajouter des styles par-dessus du CSS qu'on ne contrôle pas).* :where et :is * CSS layers ! super explications sur la cascade dans cet article
Dans l'exemple suivant, les deux propriétés CSS se comportent de manière différente
<article>
<h2>Titre de l'article</h2>
<p>Un paragraphe: mon article est <em>vraiment</em> super.</p>
Ce texte n'est pas dans un paragraphe.
</article>article {
font-style: italic;
border: 3px dotted red;
}h2 est en italique ?
Contrairement à border, font-style est une propriété héritable
Chaque élément hérite de toutes les propriétés héritables de ses ancêtres
Le font-style du h2 est donc hérité de celui de l'article (c'est-à-dire qu'il prend la valeur italic)
En revanche le border du h2 est celui par défaut (c'est-à-dire pas de cadre)
Héritage jusqu'aux feuilles de l'arbre généré par le DOM
Si on veut que les em ne soient pas en italique, on est obligé
de le dire explicitement
(j'enlève car les propriétés plus récentes initial, unset et surtout
revert sont plus adaptées de toute façon) -- Inversement, on peut forcer une propriété à être héritée avec la valeur spéciale inherit (très utile comme « valeur par défaut » pour les propriétés héritables)
En général on devine intuitivement quelles propriétés sont héritables ou non (regarder une réf en cas de doute)
Parfois on a spécifié une propriété CSS pour un cas général, et on a besoin de l'« annuler » pour un cas particulier
Cela arrive notamment avec les media queries
On peut utiliser les valeurs spéciales initial, inherit, unset, et surtout revert
initial revient à la valeur « par défaut » de la propriété : par exemple pour color, c'est black
inherit force à hériter de la valeur du parent : typiquement plus approprié justement pour color, mais pas pour d'autres
unset est plus pratique : revient à faire inherit pour les propriétés héritables (comme color), et initial pour les autres (comme background).
revert fonctionne comme unset, sauf qu'il ne remet pas les propriétés complètement à zéro, mais revient à la valeur qu'elles ont dans la feuille de style du navigateur. ⇒ on annule vraiment la modification, sans effet de bord. exemple: display:unset vaudra toujours `inline`, car c'est la valeur initiale de display. C'est indépendant de l'élément.
De façon générale, il vaut mieux toujours utiliser revert, sauf si vous savez vraiment ce que vous faites ou si le résultat ne vous convient pas…
le shorthand all est aussi utilisable partout (pas vraiment utile d'en parler en L1)
spec
De façon générale, on essaie d'éviter que le CSS dépende trop de la structure du HTML
Notamment, il faut faire attention aux sélecteurs trop génériques
Vous utilisez souvent directement les éléments suivants comme sélecteurs, parce qu'il n'y a pas d'ambiguïté dans vos pages :
header { /* ... */ }
footer { /* ... */ }
nav { /* ... */ }
article { /* ... */ }
section { /* ... */ }
aside { /* ... */ }
header, footer, nav, etc. dans une page HTML. Même si ce n'est pas le cas de votre page pour l'instant, il faut prévoir qu'elle puisse évoluer.
aside en article voire en div)
#entete .menu ul li a.menu a (on sélectionne les liens du menu).
S'il y a plusieurs sortes de liens dans le menu, alors il vaut mieux leur donner des classes distinctes.Une stratégie pour éviter ces problèmes peut être de n'utiliser que des classes, c'est-à-dire de créer une classe à chaque fois qu'on a besoin de styler un élément, et de n'avoir que des sélecteurs avec une seule classe.
On évite effectivement la dépendance à la structure du HTML, mais cela devient vite très lourd à maintenir, et le CSS est moins facile à lire puisqu'il donne peu d'indications sur la structuration de la page et les éléments à styler. Exemple :
.lien-bibliographie {
color: pink;
text-decoration: none;
}
pourquoi préciser ici text-decoration: none ? Il serait probablement plus approprié de mettre une classe au bloc englobant et d'utiliser celle-ci dans le CSS :
.bibliographie a {
color: pink;
text-decoration: none;
}
Ici il est plus clair que l'on enlève le soulignement par défaut de l'élément a.
Il n'est pas toujours évident de trouver un bon équilibre, et les critères peuvent être assez subjectifs ! Mais dans tous les cas il faut éviter les deux extrêmes (aucune classe / que des classes).
/**** BANNIÈRE ****/
.banniere {
background-color: black;
}
.logo {
color: white;
background-color: blue;
}
/**** MENU ****/
.menu {
border-radius: 1em;
display: grid;
grid-template-columns: 15em 15em 15em;
}
.menu a {
border: 1px solid red;
}
/**** PRODUITS ****/
.produit {
font-style: italic;
}
.produit h2 {
font-family: YoupiSans;
}
.price-tag {
color: red;
}
<link rel="stylesheet"> dans le head@import…
@import url("mystyle.css"); pour importer une CSS@import : empêche le téléchargement des CSS en parallèle, ce qui bloque le rendu<link rel="stylesheet"> dans le HTML :
les fichiers peuvent être chargés en parallèle.