Les feuilles de style en cascade (CSS) vous permettent de transformer l'apparence de vos pages Web. Des polices et des couleurs à l'espacement et à la mise en page générale, toutes sortes d'outils de conception sont à portée de main. Bien que CSS soit un langage compliqué dans son intégralité, il n'y a que deux concepts de base que vous devez comprendre pour commencer.

Tout commence par l'identification exacte de la partie d'une page que vous souhaitez styliser.

CSS =Sélecteurs + Déclarations

Un fichier CSS contient une série de règles décrivant comment un fichier HTML doit être formaté. Chaque règle se compose de deux parties :quoi styliser et comment le styliser. La première partie est contrôlée à l'aide d'une série de termes appelés "sélecteurs".

Les exemples de cet article incluent des déclarations de style, mais ils ne sont pas au centre de l'attention :les sélecteurs eux-mêmes le sont.

Historiquement, il y avait trois niveaux de sélecteur CSS (ou versions) avec différents degrés de prise en charge du navigateur. En 2020, selon Can I Use, ils sont tous disponibles pour plus de 99 % des utilisateurs dans le monde.

Sélecteurs de niveau 1

Le niveau 1 a introduit les quatre types fondamentaux de sélecteurs qui couvrent un grand nombre de cas, même aujourd'hui.

Modèle Matchs E tous les éléments E .c tous les éléments avec class="c"#myid l'élément avec id="myid"E F un élément F à l'intérieur d'un élément EPseudo-classes E:lien un lien hypertexte vers une page qui n'a pas encore été visitéeE:visited un lien hypertexte vers une page déjà visitéeE:active un lien hypertexte actuellement sélectionnéPseudo-éléments E::first-line la première ligne formatée d'un élément EE::first-letter la première lettre formatée d'un élément E

Sélecteur de type

Le sélecteur le plus simple est le "sélecteur de type". Il cible toutes les instances d'un élément, comme un paragraphe ou du texte en gras :

p { margin-bottom :0 ; } 
 b { font-family:sans-serif; } 

Sélecteur de classe

L'attribut class permet d'ajouter une sémantique supplémentaire à un élément HTML, tel qu'un type de paragraphe spécifique. Ces éléments peuvent être sélectionnés dans CSS comme suit :

.intro { font-weight :gras ; } 

Ce sélecteur correspondrait :

…
 

Mais notez que cela correspondrait également :

…
 

Si vous souhaitez qu'il ne s'applique qu'aux paragraphes d'introduction, vous pouvez combiner le sélecteur de type et le sélecteur de classe :

p.intro { font-weight :gras ; } 

Sélecteur d'ID

L'attribut HTML id doit être unique dans un document, par ex. si vous avez :

…
 

Cela devrait être le seul élément avec un identifiant "contenu". Un sélecteur d'ID vous permet de cibler cet élément spécifique dans un document :

#contents { color :#333 ; } 

Sélecteur descendant

Strictement, un "combinateur", car ce sélecteur concerne l'espace entre deux autres. HTML est hiérarchique, comme expliqué dans notre aperçu du DOM. Un sélecteur descendant permet d'identifier un élément par son contexte à l'intérieur d'un autre élément :

table b { font-weight :normal ; } 

Pseudo-classes et éléments

Les pseudo sélecteurs ciblent des classes ou des éléments qui n'existent pas explicitement mais qui sont quand même disponibles. Considérez-les comme des bonus de contenu spéciaux :

p::first-line { text-transform :majuscule ; } 

Listes de sélecteurs

Utilisez une virgule pour combiner les sélecteurs dans une liste si vous souhaitez appliquer le même ensemble de règles à chacun. Au lieu de :

th { padding :1em ; } 
 td { rembourrage :1em ; } 

Vous pouvez écrire :

th, td { padding :1em ; } 

Spécificité

Une feuille de style est une série de règles qui utilisent un sélecteur pour faire correspondre un élément, mais que se passe-t-il lorsque plusieurs règles correspondent à un élément donné ? Le comportement résultant est régi par la "spécificité" qui définit quelle règle est utilisée dans un cas tel que :

p.intro { couleur :noir ; } 
 p { couleur :gris; } 

Dans ce cas, la règle prioritaire est définie par sa spécificité, comme suit :

1. Les sélecteurs d'ID (`#contents`) sont les plus spécifiques.
2. Les sélecteurs de classe (`.author`) sont moins spécifiques.
3. Les sélecteurs de type (`p`) sont les moins spécifiques.

Lors du calcul de la spécificité, chaque niveau n'est pris en compte que si deux sélecteurs ont le même score au niveau supérieur, donc "#contents" est plus spécifique que "article.news p.author.special" car le premier "gagne" sur les sélecteurs d'ID.

Sélecteurs de niveau 2

La prochaine révision des sélecteurs CSS a introduit des sélecteurs d'attributs, développé des pseudo-classes et des pseudo-éléments, et ajouté deux nouveaux combinateurs.

Modèle Matchs * n'importe quel élémentE> F un élément F enfant d'un élément EE + F un élément F immédiatement précédé d'un élément ESélecteur d'attributs E[foo] un élément E avec un attribut "foo"E[foo="bar"] un élément E dont l'attribut "foo" est exactement "bar"E[foo~="bar"] un élément E dont l'attribut "foo" est une liste de valeurs séparées par des espaces, dont l'une est "bar"E[foo|="en"] un élément E dont l'attribut "foo" a une liste de valeurs séparées par des tirets commençant par "en"Pseudo-classes E:premier-enfant un élément E, premier enfant de son parentE:lang(fr) un élément de type E en langage "fr"Pseudo-éléments E::before contenu généré avant le contenu d'un élément EE::after contenu généré après le contenu d'un élément E

Sélecteur universel

Le "*" correspond à n'importe quel élément. Ce n'est pas souvent très utile, mais si vous souhaitez réinitialiser des marges par défaut, par exemple, vous pouvez le faire :

* { marge :0 ; } 

Sélecteur d'attributs

Les sélecteurs d'attributs permettent de cibler très précisément les styles, filtrés par l'attribut d'un élément :

a[title] { text-decoration :underline pointed ; } 

Child Combinator :un élément immédiatement à l'intérieur d'un autre

Semblable au combinateur descendant, mais celui-ci ne correspond qu'aux enfants immédiats, pas aux descendants plus bas dans l'arbre. Par exemple, "ul> li" correspondra uniquement au texte "Section 1" ici, et non à "Section 1.1":

 
 
 
 Section 1 
 
 
 
Section 1.1
 
 
Section 1.2
 
 
 
 
 
 
 
  

Combinateur de frères et sœurs adjacents :le frère suivant

h1 + p { font-weight :gras ; } 

Souvent utile pour contrôler les marges, ou un paragraphe d'introduction sans classe spécifique, ce sélecteur correspond à un élément uniquement s'il en suit immédiatement un autre. Dans l'exemple, seul le premier paragraphe ici sera mis en correspondance, pas le second :

Contenu
 
 un peu de texte supplémentaire 
 

Paragraphe d'introduction
 
 

Paragraphe suivant
 
  

Notez que ce sélecteur ne prend en compte que les éléments, et non le texte, pour décider quel est le frère suivant.

Héritage

Certaines propriétés CSS héritent leur valeur d'un élément ancêtre. En pratique, cela signifie, par exemple, que la définition de la police de l'élément "body" signifie que chaque paragraphe, tableau, etc. utilise également cette même police.

Bien sûr, c'est exactement ce à quoi vous vous attendez, mais considérez une propriété qui n'hérite pas :"marge", par exemple. Vous ne voudriez pas que chaque paragraphe individuel ou morceau de texte en gras ait la même marge que l'ensemble du document.

Une bonne règle empirique consiste à cibler les éléments de manière aussi générale que possible. Ne ciblez pas chaque élément individuellement lorsqu'un simple sélecteur de "corps" suffit.

Sélecteurs de niveau 3

De nombreuses autres pseudo-classes ont été ajoutées à ce niveau, ainsi que des sélecteurs d'attributs et un nouveau combinateur.

Modèle Matchs E ~ F un élément F précédé d'un élément ESélecteur d'attributs E[foo^="bar"] un élément E dont l'attribut "foo" commence par la chaîne "bar"E[foo$="bar"] un élément E dont l'attribut "foo" se termine par la chaîne "bar"E[foo*="bar"] un élément E dont l'attribut "foo" contient la sous-chaîne "bar"Pseudo-classes E:root un élément E, racine du documentE:nth-child(n) un élément E, le n-ième enfant de son parentE:nth-last-child(n) un élément E, le n-ième enfant de son parent, à partir du dernierE:nth-of-type(n) un élément E, le n-ième frère de son typeE:nth-last-of-type(n) un élément E, le n-ième frère de son type, à partir du dernierE:last-child un élément E, dernier enfant de son parentE:first-of-type un élément E, premier frère de son typeE:last-of-type un élément E, dernier frère de son typeE:only-child un élément E, seul enfant de son parentE:only-of-type un élément E, seul frère de son typeE:empty un élément E qui n'a pas d'enfants (y compris les nœuds de texte)E:target un élément E étant la cible de l'URI référentE:enabled un élément d'interface utilisateur E qui est activéE:disabled un élément d'interface utilisateur E qui est désactivéE:checked un élément d'interface utilisateur E qui est cochéE:not(s) un élément E qui ne correspond pas au sélecteur simple s

Sélecteur d'attributs

Vous pouvez sélectionner des éléments avec un attribut commençant par une valeur donnée :a[href^="https:"] , se termine par une valeur donnée :img[src$=".gif"] , ou contient une valeur :a[*="value"] .

Pseudo-classes

Les pseudo-classes supplémentaires incluent ":last-child", ":empty" (pour faire correspondre un élément sans contenu) et ":checked" qui correspond à un élément comme une entrée de case à cocher, mais uniquement lorsqu'il est coché.

Combinateur général de frères et sœurs :un frère suivant

Semblable au combinateur de frères et sœurs adjacents du niveau 2, cela correspond à n'importe quel frère qui vient après l'autre, pas seulement au suivant :

h1 ~ p { taille de police :110 % ; } 

Sélecteurs CSS et comment les utiliser

Vous savez maintenant à peu près tout ce qu'il y a à savoir sur la façon de sélectionner une partie d'une page Web à l'aide de CSS. Vous êtes maintenant prêt à styliser vos pages avec la grande variété de propriétés CSS qui couvrent tout, des couleurs à la mise en page.

Crédit image :Pankaj Patel/Unsplash

[]