Chapitre 8 : Introduction au CSS : sélecteurs, propriétés et valeurs
Pour qu'un site Web soit visuellement attrayant et fonctionnel, il ne suffit pas de HTML. C’est là qu’intervient le CSS (Cascading Style Sheets). CSS est un langage de style utilisé pour décrire l'apparence et le formatage d'un document écrit en HTML. Il est fondamental pour le développement Web et est utilisé pour définir les couleurs, les polices, la mise en page et bien plus encore.
Sélecteurs CSS
Les sélecteurs CSS sont la partie du CSS qui sélectionne l'élément HTML que vous souhaitez styliser. Il existe plusieurs types de sélecteurs, mais nous nous concentrerons sur les plus courants : les sélecteurs d'élément, de classe et d'ID.
- Sélecteurs d'éléments : ils sélectionnent les éléments en fonction du nom de l'élément HTML. Par exemple, si nous voulons styliser tous les paragraphes (<p>) de notre document, nous utiliserons le sélecteur d'éléments. Exemple : p {couleur : rouge ;
- Sélecteurs de classe : ils sélectionnent les éléments en fonction de l'attribut de classe de l'élément HTML. Les classes sont utiles lorsque vous souhaitez créer un style CSS pouvant être réutilisé. Exemple : .myClass {font-size : 20px;>
- Sélecteurs d'ID : ils sélectionnent les éléments en fonction de l'attribut ID de l'élément HTML. Les identifiants sont uniques et doivent être utilisés lorsque vous souhaitez styliser un seul élément. Exemple : #myID {background-color : bleu ;
Propriétés CSS
Les propriétés CSS correspondent à ce que vous souhaitez styliser dans l'élément sélectionné. Par exemple, vous souhaiterez peut-être modifier la couleur d’arrière-plan, la police, la couleur de la police, l’espacement, la marge, la bordure, etc. Chaque propriété a un nom et est suivie de deux points et d'une valeur. Par exemple : p {color: red;} - 'color' est la propriété et 'red' est la valeur.
Valeurs CSS
Les valeurs CSS sont les ajustements que vous apportez à la propriété choisie. Dans l'exemple précédent, « rouge » est la valeur que nous avons attribuée à la propriété « couleur ». Les valeurs peuvent être des mots-clés tels que « rouge », « bleu », « vert », des nombres, des pourcentages et un large éventail d'autres options en fonction de la propriété que vous stylisez.
Conclusion
Comprendre les sélecteurs, les propriétés et les valeurs CSS est essentiel pour devenir un développeur front-end efficace. Ils constituent la base de la création de sites Web visuellement attrayants et fonctionnels. Dans le chapitre suivant, nous explorerons CSS plus en profondeur, en découvrant le modèle de boîte CSS, le positionnement, les animations et bien plus encore.
