CSS - Syntaxe

Un CSS comprend des règles de style qui sont interprétées par le navigateur puis appliquées aux éléments correspondants dans votre document. Une règle de style est composée de trois parties -

  • Selector- Un sélecteur est une balise HTML à laquelle un style sera appliqué. Cela peut être n'importe quelle balise comme <h1> ou <table> etc.

  • Property- Une propriété est un type d'attribut de balise HTML. En termes simples, tous les attributs HTML sont convertis en propriétés CSS. Ils peuvent être de couleur , de bordure, etc.

  • Value- Les valeurs sont attribuées aux propriétés. Par exemple, la propriété de couleur peut avoir la valeur rouge ou # F1F1F1 etc.

Vous pouvez mettre la syntaxe des règles de style CSS comme suit -

selector { property: value }

Example - Vous pouvez définir une bordure de tableau comme suit -

table{ border :1px solid #C00; }

Ici, la table est un sélecteur et la bordure est une propriété et la valeur donnée 1px solid # C00 est la valeur de cette propriété.

Vous pouvez définir des sélecteurs de différentes manières simples en fonction de votre confort. Permettez-moi de mettre ces sélecteurs un par un.

Les sélecteurs de type

C'est le même sélecteur que nous avons vu ci-dessus. Encore une fois, un autre exemple pour donner une couleur à tous les en-têtes de niveau 1 -

h1 {
   color: #36CFFF; 
}

Les sélecteurs universels

Plutôt que de sélectionner des éléments d'un type spécifique, le sélecteur universel correspond tout simplement au nom de n'importe quel type d'élément -

* { 
   color: #000000; 
}

Cette règle rend le contenu de chaque élément de notre document en noir.

Les sélecteurs descendants

Supposons que vous souhaitiez appliquer une règle de style à un élément particulier uniquement lorsqu'il se trouve à l'intérieur d'un élément particulier. Comme indiqué dans l'exemple suivant, la règle de style s'appliquera à l'élément <em> uniquement lorsqu'il se trouve à l'intérieur de la balise <ul>.

ul em {
   color: #000000; 
}

Les sélecteurs de classe

Vous pouvez définir des règles de style en fonction de l'attribut de classe des éléments. Tous les éléments ayant cette classe seront formatés selon la règle définie.

.black {
   color: #000000; 
}

Cette règle rend le contenu en noir pour chaque élément avec l'attribut de classe défini sur noir dans notre document. Vous pouvez le rendre un peu plus particulier. Par exemple -

h1.black {
   color: #000000; 
}

Cette règle rend le contenu en noir uniquement pour les éléments <h1> avec l'attribut de classe défini sur noir .

Vous pouvez appliquer plusieurs sélecteurs de classe à un élément donné. Prenons l'exemple suivant -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Les sélecteurs d'ID

Vous pouvez définir des règles de style en fonction de l' attribut id des éléments. Tous les éléments ayant cet identifiant seront formatés selon la règle définie.

#black {
   color: #000000; 
}

Cette règle rend le contenu en noir pour chaque élément avec l' attribut id défini sur noir dans notre document. Vous pouvez le rendre un peu plus particulier. Par exemple -

h1#black {
   color: #000000; 
}

Cette règle rend le contenu en noir uniquement pour les éléments <h1> avec l' attribut id défini sur noir .

La véritable puissance des sélecteurs d' identifiant est lorsqu'ils sont utilisés comme base pour les sélecteurs descendants, par exemple -

#black h2 {
   color: #000000; 
}

Dans cet exemple, tous les en-têtes de niveau 2 seront affichés en noir lorsque ces en-têtes se trouveront dans des balises dont l' attribut id est défini sur noir .

Les sélecteurs enfants

Vous avez vu les sélecteurs descendants. Il existe un autre type de sélecteur, qui est très similaire aux descendants mais qui a des fonctionnalités différentes. Prenons l'exemple suivant -

body > p {
   color: #000000; 
}

Cette règle rendra tous les paragraphes en noir s'ils sont les enfants directs de l'élément <body>. D'autres paragraphes placés dans d'autres éléments comme <div> ou <td> n'auraient aucun effet sur cette règle.

Les sélecteurs d'attributs

Vous pouvez également appliquer des styles à des éléments HTML avec des attributs particuliers. La règle de style ci-dessous correspondra à tous les éléments d'entrée ayant un attribut de type avec une valeur de texte -

input[type = "text"] {
   color: #000000; 
}

L'avantage de cette méthode est que l'élément <input type = "submit" /> n'est pas affecté et que la couleur n'est appliquée qu'aux champs de texte souhaités.

Les règles suivantes s'appliquent au sélecteur d'attribut.

  • p[lang]- Sélectionne tous les éléments de paragraphe avec un attribut lang .

  • p[lang="fr"]- Sélectionne tous les éléments de paragraphe dont l' attribut lang a une valeur d'exactement "fr".

  • p[lang~="fr"]- Sélectionne tous les éléments de paragraphe dont l' attribut lang contient le mot "fr".

  • p[lang|="en"]- Sélectionne tous les éléments de paragraphe dont l' attribut lang contient des valeurs qui sont exactement "en", ou commencent par "en-".

Règles de style multiples

Vous devrez peut-être définir plusieurs règles de style pour un seul élément. Vous pouvez définir ces règles pour combiner plusieurs propriétés et valeurs correspondantes en un seul bloc comme défini dans l'exemple suivant -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Ici, toutes les paires propriété et valeur sont séparées par un semicolon (;). Vous pouvez les conserver sur une ou plusieurs lignes. Pour une meilleure lisibilité, nous les conservons dans des lignes séparées.

Pendant un certain temps, ne vous souciez pas des propriétés mentionnées dans le bloc ci-dessus. Ces propriétés seront expliquées dans les chapitres suivants et vous pouvez trouver des détails complets sur les propriétés dans les références CSS

Sélecteurs de regroupement

Vous pouvez appliquer un style à de nombreux sélecteurs si vous le souhaitez. Séparez simplement les sélecteurs par une virgule, comme indiqué dans l'exemple suivant -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Cette règle de style de définition sera également applicable aux éléments h1, h2 et h3. L'ordre de la liste n'est pas pertinent. Tous les éléments du sélecteur auront les déclarations correspondantes appliquées.

Vous pouvez combiner les différents sélecteurs d' identifiants comme indiqué ci-dessous -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}