8.9. Introduction à CSS : sélecteurs, propriétés et valeurs : Comment appliquer des valeurs aux propriétés CSS

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

CSS, ou Cascading Style Sheets, est un langage de style utilisé pour décrire l'apparence d'un document écrit en HTML. CSS décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur d'autres supports. CSS économise beaucoup de travail car il contrôle la mise en page de plusieurs pages à la fois.

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour « rechercher » (ou sélectionner) des éléments HTML en fonction de leur nom d'élément, de leur identifiant, de leur classe, de leur attribut, etc.

Par exemple, un sélecteur de type sélectionne les éléments par nom de nœud. Par exemple, le sélecteur de type 'h1' sélectionne tous les éléments <h1>.

<style>
h1 {
  Couleur bleue;
}
</style>

Cet exemple sélectionne tous les fichiers <h1> éléments et change la couleur du texte en bleu.

Propriétés CSS

Les propriétés CSS sont utilisées pour spécifier le style d'un élément. Chaque propriété a un nom et une valeur. Le nom de la propriété est suivi de deux points et de la valeur de la propriété. Une déclaration CSS se termine toujours par un point-virgule et les déclarations de style sont séparées par un espace.

Par exemple :

<style>
P{
  La couleur rouge;
  alignement du texte : centre ;
}
</style>

Cet exemple définit la couleur du texte sur rouge et aligne le texte au centre.

Valeurs CSS

Les valeurs CSS sont définies avec les propriétés pour styliser les éléments HTML. Par exemple, la propriété color peut avoir des valeurs telles que « rouge », « bleu », « vert », etc. De plus, la propriété width peut avoir des valeurs telles que « 100px », « 50 % », etc.

Exemple :

<style>
P{
  taille de police : 20 px ;
  Couleur blanche;
  couleur de fond : noir ;
}
</style>

Cet exemple définit la taille de la police sur 20 pixels, la couleur du texte sur blanc et la couleur d'arrière-plan sur noir.

Comment appliquer des valeurs aux propriétés CSS

Appliquer des valeurs aux propriétés CSS est assez simple. Tout d’abord, vous devez sélectionner l’élément auquel vous souhaitez appliquer le style. Ensuite, vous devez définir la propriété que vous souhaitez modifier. Enfin, vous devez définir la valeur que vous souhaitez appliquer à cette propriété.

Par exemple, si vous souhaitez changer la couleur de tous vos paragraphes en bleu, vous pouvez procéder comme suit :

<style>
P{
  Couleur bleue;
}
</style>

Dans cet exemple, « p » est le sélecteur, « color » est la propriété et « blue » est la valeur.

CSS est un langage puissant qui permet aux développeurs de contrôler l'apparence de leurs sites Web. En comprenant le fonctionnement des sélecteurs, des propriétés et des valeurs CSS, vous pouvez créer des sites Web plus attrayants et efficaces.

Nous espérons que ce guide vous a aidé à mieux comprendre CSS. N'oubliez pas que la pratique est essentielle pour apprendre et maîtriser CSS. Alors continuez à vous entraîner et à expérimenter différents sélecteurs, propriétés et valeurs.

Page suivante de lebook gratuit :

53Introduction à CSS : sélecteurs, propriétés et valeurs : Comprendre la cascade et l'héritage en CSS

0 minutes