8.6. Introduction à CSS : sélecteurs, propriétés et valeurs

CSS, ou Cascading Style Sheets, est un langage de style utilisé pour décrire la présentation d'un document écrit en HTML. Il est utilisé pour contrôler la mise en page de plusieurs pages à la fois, vous permettant de changer la conception d'un site Web entier en modifiant simplement un fichier. Dans notre parcours pour devenir des développeurs front-end compétents, il est essentiel de comprendre comment utiliser et comprendre les propriétés CSS.

Sélecteurs CSS

Les sélecteurs CSS sont les éléments qui définissent les éléments HTML auxquels le style sera appliqué. Ils peuvent être divisés en cinq catégories : les sélecteurs de type, les sélecteurs de descendants, les sélecteurs de classe, les sélecteurs d'ID et les sélecteurs d'attributs.

Sélecteurs de types

Les sélecteurs de type sélectionnent les éléments en fonction du nom de l'élément HTML. Par exemple, si nous voulons sélectionner tous les paragraphes d'une page et changer la couleur du texte en rouge, nous pouvons utiliser le code suivant :

P{
    La couleur rouge;
}

Sélecteurs descendants

Les sélecteurs descendants sélectionnent les éléments qui sont les descendants d'un élément spécifique. Par exemple, si nous voulons sélectionner uniquement les paragraphes qui se trouvent à l'intérieur d'un div, nous pouvons utiliser le code suivant :

div p {
    La couleur rouge;
}

Sélecteurs de classe

Les sélecteurs de classe sélectionnent les éléments en fonction de leur classe. Par exemple, si nous voulons sélectionner tous les éléments avec la classe "red-text" et changer la couleur du texte en rouge, nous pouvons utiliser le code suivant :

.texte rouge {
    La couleur rouge;
}

Sélecteurs d'ID

Les sélecteurs d'ID sélectionnent un élément en fonction de son ID. Par exemple, si nous voulons sélectionner l'élément avec l'ID "mon-paragraphe" et changer la couleur du texte en rouge, nous pouvons utiliser le code suivant :

#mon-paragraphe {
    La couleur rouge;
}

Sélecteurs d'attributs

Les sélecteurs d'attribut sélectionnent des éléments en fonction d'un attribut et d'une valeur spécifiques. Par exemple, si nous voulons sélectionner tous les liens qui pointent vers "https://www.google.com" et changer la couleur du texte en rouge, nous pouvons utiliser le code suivant :

a[href="https://www.google.com"] {
    La couleur rouge;
}

Propriétés et valeurs CSS

Les propriétés CSS sont les styles que vous souhaitez modifier et les valeurs CSS sont les styles que vous souhaitez appliquer. Par exemple, si nous voulons changer la couleur du texte d'un paragraphe en rouge, "color" est la propriété que nous voulons modifier et "red" est la valeur que nous voulons appliquer.

Il existe de nombreuses propriétés différentes que vous pouvez modifier, notamment la couleur d'arrière-plan, la taille de la police, la marge, le remplissage, la bordure, etc. Chaque propriété possède un ensemble spécifique de valeurs qui peuvent être appliquées.

Par exemple, si nous voulons changer la taille de police d'un paragraphe à 16 pixels, nous pouvons utiliser le code suivant :

P{
    taille de police : 16 px ;
}

Si nous voulons changer la couleur d'arrière-plan d'un div en bleu, nous pouvons utiliser le code suivant :

div{
    couleur de fond : bleu ;
}

Il est important de se rappeler que l'ordre des styles dans votre CSS peut affecter le résultat final. Si vous avez des styles conflictuels pour le même élément, le dernier style de votre CSS prévaudra.

Comprendre comment utiliser et comprendre les propriétés CSS est une compétence essentielle pour tout développeur front-end. J'espère que ce guide a aidé à clarifier certaines bases.