CSS en ligne et !important
##########################

.. raw:: html

   <iframe width="560" height="315" src="https://www.youtube.com/embed/o2OpRHidOyY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS en ligne
************

On appelle le CSS en ligne (*inline CSS*) les déclarations CSS contenues directement dans le HTML.

Les CSS en ligne sont prioritaires sur le CSS des feuilles de style, et ont donc une priorité encore plus élevée que les sélecteur d'id par exemple. C'est donc tout autant une mauvaise pratique de les utiliser.

exemple
=======

.. code-block:: html

   <p style="font-family: serif">Du texte.</p>

L'annotation *!important*
*************************

Les déclarations sont dites *normales* lorsqu'elles ne comportent pas d'annotation ``!important``. Une déclaration avec l'annotation ``!important`` est prioritaire sur tout déclaration normale, qu'elle soit dans un fichier .css ou en-ligne.

exemple
=======

Ci-dessous, l'instruction ``font-family: sans-serif !important;`` est annotatée avec ``!important`` : elle est prioritaire sur la déclaration en-ligne qui est une déclaration normale.

Par contre, l'instruction ``color: blue;`` n'est pas annotée : elle sera ignorée au profit de la déclaration en-ligne.

.. code-block:: css

   p {
      font-family: sans-serif !important;
      color: blue;
   }


.. code-block:: html

   <p style="font-family: serif; color: red;">Du texte.</p>