CSS: règles, sélecteurs, propriétés

CSS – Feuilles de style en cascade (Cascading Style Sheets) est un langage de style utilisé pour concevoir des pages Web. Il vous permet de séparer le contenu de la page de sa présentation, ce qui facilite le travail avec les mises en page et la conception.

CSS se compose d’un ensemble de règles, dont chacune détermine comment un certain élément sur une page Web doit être stylisé. Les règles incluent la sélection d’éléments à l’aide de sélecteurs et la définition de propriétés sur ces éléments. Regardons les principaux composants de CSS – règles, sélecteurs et propriétés.

Règles

Une règle CSS se compose d’un sélecteur et d’un bloc de propriétés. La règle indique au navigateur quels éléments de la page Web doivent être stylisés et comment ils doivent être stylisés. Chaque règle commence par un sélecteur qui sélectionne des éléments et se termine par un bloc de propriétés qui s’appliquent aux éléments sélectionnés.

Voici un exemple de règle simple :

Ici `p` est un sélecteur qui sélectionne tous les paragraphes de la page. À l’intérieur du bloc de propriétés, les styles des paragraphes sont définis : couleur de texte bleue et taille de police 16 pixels.

Sélecteur

Les sélecteurs vous permettent de sélectionner un ou plusieurs éléments d’une page Web auxquels appliquer certains styles. Les sélecteurs peuvent être très simples ou plus complexes et vous permettent de sélectionner des éléments en fonction de leur type, de leurs classes, de leurs identifiants, de leurs attributs et même de leur emplacement sur la page.

Exemples de sélecteurs simples :

• `p` – sélectionne tous les paragraphes.
• `.header` – sélectionne tous les éléments avec la classe « header ».
• `#logo` – sélectionne l’élément avec l’id « logo ».

Exemples de sélecteurs plus complexes :

• `ul li` – sélectionne tous les éléments de la liste `li` qui sont des enfants de l’élément `ul`.
• `input` – sélectionne tous les champs de texte de la page.

Propriétés

Les propriétés déterminent l’apparence des éléments sélectionnés à l’aide des sélecteurs. Chaque propriété a une valeur qui spécifie à quoi l’élément doit ressembler.

Exemples de propriétés :

• `color` – définit la couleur du texte de l’élément.
• `font-size` – définit la taille de la police.
• `background-color` – définit la couleur d’arrière-plan de l’élément.
• `border` – définit le style, l’épaisseur et la couleur de la bordure de l’élément.

Voici un exemple d’utilisation des propriétés :

Cette règle sélectionne tous les en-têtes h1 et définit leur couleur de texte sur rouge, taille de police 24px, arrière-plan jaune et bordure noire de 1px d’épaisseur.

Combinateurs

Les combinateurs en CSS vous permettent de combiner des sélecteurs et de créer des règles plus spécifiques. Voici quelques exemples de combinateurs :

• `div p` – sélectionne tous les éléments `p` qui sont des enfants des éléments `div`.
• `.menu-item > a` – sélectionne tous les éléments `a` qui sont des descendants directs des éléments de classe `.menu-item`.
• `h2 + p` – sélectionne tous les éléments `p` qui viennent directement après les éléments `h2`.

L’utilisation de combinateurs vous permet d’affiner la manière dont les styles sont appliqués aux éléments d’une page.

Pseudo-classes et pseudo-éléments

Les pseudo-classes et les pseudo-éléments vous permettent de sélectionner des éléments qui sont dans certains états ou qui ont des parties spécifiques. Ils sont spécifiés après le sélecteur principal et sont indiqués par deux-points.

Exemples de pseudo-classe :

• `:hover` – Applique des styles lorsque le curseur survole un élément.
• `:active` – applique des styles lorsque l’élément est actif (en cliquant sur un bouton, par exemple).
• `:focus` – applique des styles lorsque l’élément a le focus (par exemple, un champ de saisie lorsqu’il est cliqué).

Exemples de pseudo-éléments :

• `::before` – ajoute du contenu avant le contenu de l’élément sélectionné.
• `::after` – ajoute du contenu après le contenu de l’élément sélectionné.
• `::first-line` – applique des styles à la première ligne de texte de l’élément.
• `::first-letter` – applique des styles à la première lettre du texte dans l’élément.

Importer des fichiers CSS

Pour rendre votre code plus structuré et plus facile à maintenir, CSS vous permet d’importer des styles à partir d’autres fichiers. Ceci est réalisé avec la commande `@import`, qui peut être placée en haut du fichier CSS.

De cette façon, vous pouvez diviser les styles en différents fichiers, ce qui facilitera leur modification et réduira la taille de chacun.

Cascade et priorités

CSS est basé sur le principe de la cascade, ce qui signifie que les styles peuvent être définis dans différents endroits et sources, et le navigateur décidera quel style appliquer en fonction des priorités. La cascade comprend :

• Priorité des sélecteurs : le navigateur respecte la spécificité des sélecteurs. Plus le sélecteur est spécifique, plus sa priorité est élevée.
• Ordre du style : si deux règles ont la même spécificité, la dernière règle sera appliquée à l’élément.
• Importance du style : vous pouvez définir l’importance d’un style en utilisant ` !important`. Ainsi, le style prime.

Il est important d’utiliser `!important` avec précaution pour éviter de futurs problèmes de maintenance du code.

Requêtes médias

CSS permet aux styles de s’adapter en fonction des paramètres de l’appareil tels que la largeur et la résolution de l’écran. Les requêtes multimédias vous permettent de créer des conceptions réactives qui s’affichent bien sur une variété d’appareils, des téléphones mobiles aux ordinateurs de bureau.

Exemple de requête multimédia :

Dans cet exemple, les styles seront appliqués aux éléments de la page lorsque la largeur de l’écran ne dépasse pas 768 pixels.

CSS est un puissant outil de style Web et ces bases vous aideront à commencer à l’utiliser pour créer de beaux designs fonctionnels. La pratique et l’expérience vous aideront à améliorer vos compétences et à devenir un développeur front-end expérimenté.