Assignation d'une propriété css - Les cours Css

Assigner la propriété css

Introduction

Dans ce cours, nous étudier les trois principales façons cibler un élément HTML pour lui assigner un ensemble de propriétés de feuille de style css.
Ce cours est une première étape pour bien comprendre le ciblage avant de voir l'ensemble des possibilités pour cibler un élément HTML.
On peut assigner une propriété de feuille de style css à une balise HTML ou XHTML de trois façons :

Assigner par la balise

Ciblage par le nom de la balise

Par exemple, nous voulons que le texte qui se trouve dans les balises HTML <> soit souligné.

Nous mettrons pour la feuille de style :
<STYLE type="text/css">
  B { text-decoration : underline; } 
</STYLE>

Le code HTML ou XHTML sera :
<B> texte </B>

Cette technique permet de donner une ou des propriétés de feuilles de style css à toutes les balises B.

Si vous avez plusieurs balises ayant les mêmes propriétés de feuilles de style css, vous pouvez les regrouper en les séparant par une virgule.
Vous pouvez écrire le nom des balises en majuscule ou minuscule.

Code HTML : 
<STYLE type="text/css">
  P, TD, ADDRESS { text-decoration : underline; } 
</STYLE>

Ciblage en fonction des balises parentes

Vous pouvez aussi assigner une propriété de feuille de style css à une balise en fonction des balises parentes de cette dernière.
Pour cela il vous suffit de nommer chaque balise comprise entre la balise parente et la balise cible (incluses).
Par exemple, vous avez une balise qui contient une balise qui contient une balise :

Soit en code HTML : 
<p>
  <span>
    <b>Mon texte</b>
  </span> 
</p>

Si vous mettez :

Code HTML : 
<STYLE type="text/css">
  P SPAN B{  text-decoration : underline; } 
</STYLE>

Alors votre texte sera souligné, car vous avez demandé :

  • souligne-moi la balise B qui a comme parent la balise SPAN et qui elle-même a comme parent la balise P.

Si vous inversez le SPAN et le B :

Code HTML : 
<STYLE type="text/css">
  P B SPAN { text-decoration : underline; } 
</STYLE>

Alors la balise SPAN ne sera pas soulignée, car vous avez demandé :

  • souligne-moi la balise SPAN qui a comme parent la balise B et qui elle-même a comme parent la balise P, ce qui n'est pas le cas.

De la précision du chemin, dépendra la précision du ciblage.

Prenons l'exemple suivant de code HTML : 
<p>
  <span> Texte span
    <b>Texte b</b>
  </span> 
  <b>
    <span>Texte span</span>
  </b> 
</p>
<div>
  <b>Texte b
    <span>Texte span</span>
  </b> 
</div>

Si nous voulons souligner les textes des balises B ayant comme parent la balise P :

Code HTML : 
<STYLE type="text/css">
  P B{ text-decoration : underline; } 
</STYLE>

Résultat :

Assigner par l'attribut CLASS

Ciblage par la valeur de l'attribut CLASS

Vous pouvez utiliser la valeur de l'attribut HTML CLASS comme identifiant afin de lui assigner une ou des propriétés de feuille de style CSS.
Pour cela, vous devez dans votre feuille de style mettre la valeur de l'attribut HTML class précédé d'un "." (point).
Attention, l'identifiant est sensible à la case : "nomclass" est différent de "nomClass".

Exemple de code HTML avec class : 
<ADDRESS class="nom"> </ADDRESS>
<SPAN class="nom"> </SPAN>

Exemple de code CSS avec identifiant de class : 
<STYLE type="text/css">
  ADDRESS { /* Propriété */ }
  .nom { font-weigth : bold; }
</STYLE>

Petit rappel, on utilise .class quand les propriétés CSS s'appliquent à plusieurs éléments de types identiques ou différents.
Cette technique permet, dans notre exemple, d'assigner un gras à toutes les balises HTML ou XHTML dont l'attribut class a comme valeur "nom".

Nous pouvons associer la classe au nom de la balise HTML, pour que seules les balises ADDRESS de class "nom" héritent des propriétés CSS.

Exemple de classe associe au nom de balise :
<STYLE type="text/css">
  ADDRESS { font-size : 12px; }
  ADDRESS.nom { text-decoration : underline; }
</STYLE>

Exemple de balises HTML avec la même valeur de class : 
<SPAN class="nom"> </SPAN>
<ADDRESS class="nom"> </ADDRESS>

Les autres balises HTML ou XHTML ayant un attribut CLASS de valeur "nom" n'héritent pas de cette propriété.
Attention, la balise ADDRESS de class "nom" hérite aussi des propriétés définies avec ADDRESS{}.

Cumule et héritage des propriétés CSS

Attention dans notre premier exemple, les balises HTML ou XHTML dont la valeur de l'attribut CLASS est "nom" héritent aussi des propriétés définies avec ADDRESS{}, mais pas les autres balises.
Si vous avez re-déclaré une propriété CSS, elle prendra le dessus selon le poids du sélecteur.
Maitrisez d'abord le ciblage avant de vous pencher sur cette notion de poids. Pour le moment sachez seulement que le ciblage par la classe est plus fort que celui par le nom de la balise.

Exemple de re-déclaration d'une propriété CSS :
<STYLE type="text/css">
  ADDRESS { font-size:12px; } 
  .nom {
    font-size : 15px;
    text-decoration : underline;
  }
</STYLE>

C'est font-size : 15px qui sera pris en compte.
Si vous ne voulez pas que la propriété de la CLASS prenne le dessus, utilisez !important.

Exemple de code CSS !important : 
<STYLE type="text/css">
  ADDRESS { font-size:12px !important; } 
  .nom {
    font-size : 15px;
    text-decoration : underline;
  }
</STYLE>

Attention: est à utiliser dans les cas exceptionnels, car à de forte incidence sur l'héritage de propriétés CSS.

Valeur de l'attribut class

Attention, les caractères spéciaux sont à bannir dans la valeur de l'attribut HTML ou XHTML CLASS.
La valeur de l'attribut class peut contenir toutes les lettres sans accent minuscules ou majuscules de l'alphabet ([a-zA-z]), les chiffres de 0 à 9, le "_" et le "-".
Les noms de classe doivent commencer une lettre ([a-zA-z]) et être séparés par un espace.

Assigner par l'attribut ID

Ciblage par la valeur de l'attribut ID

Vous pouvez utiliser la valeur de l'attribut HTML ID comme identifiant afin de lui assigner une ou des propriétés de feuille de style CSS.
Pour cela, vous devez dans votre feuille de style mettre la valeur de l'attribut HTML ID précédé d'un "#" (dièse).

Exemple de code HTML avec ID : 
<ADDRESS ID="nomid"> </ADDRESS>

Exemple de code CSS avec identifiant d'ID : 
<STYLE type="text/css">
  ADDRESS { /* Propriété */ } 
  #nomid { text-decoration : underline; } 
</STYLE>

Attention, ADDRESS ID="nomid" hérite aussi des propriétés définies avec ADDRESS{}.
Attention, l'identifiant est sensible à la case : "idnom" est différent de "idNom".

Cumul et héritage des propriétés CSS

Un autre cas peut se poser, vous avez une balise qui a un attribut ID et un attribut CLASS.

Exemple de code HTML avec ID et CLASS : 
<ADDRESS ID="nomId" CLASS="nomClass"> </ADDRESS>

Si vous avez spécifié des propriétés différentes alors elles se cumulent.

Exemple de code CSS avec identifiant d'ID et CLASS : 
<STYLE type="text/css">
  .nomClass { font-size : 12px; } 
  #nomId{ text-decoration : underline; } 
</STYLE>

Si vous avez re-déclaré une propriété CSS, elle prendra le dessus selon le poids du sélecteur.
Maitrisez d'abord le ciblage avant de vous pencher sur cette notion de poids. Pour le moment sachez seulement que le ciblage par simple ID est plus fort que celui par simple CLASS .

Exemple de code CSS avec identifiant d'ID : 
<STYLE type="text/css">
  .nom1 { font-size:12px; } 
  #nom { font-size:15px; } 
</STYLE>

C'est font-size : 15px qui sera pris en compte.
Si vous ne voulez pas que la propriété de l'ID prenne le dessus, utilisez !important.

Exemple de code CSS !important : 
<STYLE type="text/css">
  .nom1 { font-size:12px !important; } 
  #nom { font-size:15px; } 
</STYLE>

Attention: est à utiliser dans les cas exceptionnels, car a une forte incidence sur l'héritage de propriétés CSS.

Valeur de l'attribut id

La valeur de l'attribut ID peut contenir toutes les lettres sans accent minuscules ou majuscules de l'alphabet ([a-zA-Z]), les chiffres de 0 à 9, le "_", le "-", les ":" et le ".". Cependant, je vous conseille fortement de ne pas utiliser les deux derniers.
Elle doit obligatoirement commencer par une lettre ([a-zA-Z]).
Attention, les caractères spéciaux sont à bannir dans la valeur de l'attribut HTML ou XHTML ID.
Attention, la valeur de ID doit être unique dans le document (norme HTML).