Déclarations CSS : comment les combiner pour styliser les éléments

Déclarations CSS : Comment les combiner pour styliser les éléments

Les déclarations CSS sont des instructions individuelles qui spécifient le style des éléments HTML sur une page Web. Elles sont composées d'une propriété et d'une valeur, et peuvent être combinées pour créer des styles complexes et attrayants.

1. Combinaison de déclarations simples :

Les déclarations CSS simples consistent en une seule propriété et une seule valeur, comme dans l'exemple suivant :

p { 
  color: blue; 
  font-size: 16px; 
}

Dans cet exemple, deux déclarations sont utilisées pour styliser les éléments <p>. La première définit la couleur du texte en bleu, tandis que la deuxième définit la taille de la police à 16 pixels.

2. Combinaison de déclarations multiples :

Vous pouvez également combiner plusieurs déclarations dans une seule règle CSS pour styliser un élément de manière plus complexe, comme dans l'exemple suivant :

div { 
  background-color: #f0f0f0; 
  border: 1px solid #ccc; 
  padding: 10px; 
}

Dans cet exemple, trois déclarations sont combinées pour styliser les éléments <div>. La première définit la couleur de fond, la deuxième définit une bordure d'un pixel solide avec une couleur spécifique, et la troisième définit un remplissage de 10 pixels à l'intérieur de l'élément.

3. Surcharge de styles :

Lorsque plusieurs règles CSS s'appliquent au même élément, la déclaration la plus spécifique ou la plus récente l'emporte. Cela vous permet de définir des styles par défaut dans une feuille de style principale et de les surcharger au besoin dans des feuilles de style spécifiques ou directement dans le code HTML.

Exemple :

/* Feuille de style principale */ 
p { 
  color: blue; 
} 

/* Surcharge dans une feuille de style spécifique */ 
p { 
  color: red; 
}

Dans cet exemple, le texte des éléments <p> sera initialement bleu en raison de la règle dans la feuille de style principale. Cependant, s'il existe une règle spécifique qui surcharge la couleur en rouge dans une feuille de style spécifique, le texte sera affiché en rouge.

En comprenant comment combiner les déclarations CSS, vous pouvez créer des styles cohérents et attrayants pour les éléments HTML sur votre page Web.