8.3. Introduction à CSS : sélecteurs, propriétés et valeurs
L'étude des CSS (Cascading Style Sheets) est essentielle pour tout développeur front-end. C'est le langage qui donne du style et de la mise en page aux pages Web, les rendant visuellement attrayantes et fonctionnelles. Dans ce chapitre, nous nous concentrerons sur un aspect fondamental du CSS : les sélecteurs, les propriétés et les valeurs. De plus, nous explorerons les trois principaux types de sélecteurs CSS : élément, classe et ID.
Sélecteurs CSS
Les sélecteurs permettent à CSS d'identifier les éléments HTML qu'il souhaite styliser. Il existe plusieurs types de sélecteurs, mais nous nous concentrerons sur les trois principaux : Élément, Classe et ID.
Sélecteurs d'éléments
Les sélecteurs d'éléments sont les plus basiques. Ils sélectionnent les éléments HTML en fonction de leur nom de balise. Par exemple, si nous voulons styliser tous les paragraphes (<p>) d'une page, nous pouvons utiliser le sélecteur d'élément 'p'.
P{
Couleur bleue;
taille de police : 14 px ;
}
Dans cet exemple, tous les paragraphes de la page seront rendus en bleu et avec une taille de police de 14 px.
Sélecteurs de classe
Les sélecteurs de classe sont plus spécifiques que les sélecteurs d'éléments. Ils sélectionnent des éléments HTML en fonction d'une classe qui leur est attribuée. Les classes sont attribuées aux éléments HTML à l'aide de l'attribut 'class'. Par exemple, nous pouvons attribuer la classe 'highlight' à un paragraphe spécifique (<p>) comme ceci :
<p class="highlighted">Ceci est un paragraphe surligné.</p>
Et puis, nous pouvons utiliser le sélecteur de classe « .highlight » pour styliser uniquement ce paragraphe :
.accent {
La couleur rouge;
taille de police : 18 px ;
}
Dans cet exemple, seul le paragraphe avec la classe 'highlight' sera rendu en rouge et avec une taille de police de 18px.
Sélecteurs d'ID
Les sélecteurs d'ID sont les plus spécifiques de tous. Ils sélectionnent un seul élément HTML en fonction d'un identifiant qui lui est attribué. Les identifiants sont attribués aux éléments HTML à l'aide de l'attribut 'id'. Par exemple, nous pouvons attribuer l'ID 'titre' à un en-tête spécifique (<h1>) comme ceci :
<h1 id="title">Voici le titre.</h1>
Et puis, nous pouvons utiliser le sélecteur d'ID '#title' pour styliser uniquement cet en-tête :
#titre {
la couleur verte;
taille de police : 24 px ;
}
Dans cet exemple, seul l'en-tête portant l'ID « titre » sera rendu en vert et avec une taille de police de 24 px.
Propriétés et valeurs CSS
Une fois que nous avons sélectionné les éléments HTML que nous souhaitons styliser, nous utilisons les propriétés et les valeurs CSS pour définir le style. Les propriétés sont des aspects du style que nous souhaitons modifier, tels que la couleur, la taille de la police, la marge, le remplissage, etc. Les valeurs sont les paramètres spécifiques que nous souhaitons appliquer à ces propriétés.
Par exemple, dans la règle CSS ci-dessous :
P{
Couleur bleue;
taille de police : 14 px ;
}
'color' et 'font-size' sont des propriétés, tandis que 'blue' et '14px' sont leurs valeurs respectives.
Il existe de nombreuses propriétés et valeurs CSS différentes à apprendre, et la bonne combinaison peut créer une variété infinie de styles pour vos pages Web.
En résumé, les sélecteurs, propriétés et valeurs CSS sont des outils puissants dans votre arsenal de développement front-end. Comprendre comment ils fonctionnent et quand les utiliser est essentiel pour créer des pages Web visuellement attrayantes et fonctionnelles.
