Comment avoir la priorité dans les feuilles de style ?
Gardez le contrôle des propriétés dans vos fichiers CSS en toutes circonstances !
Avant-propos
Dans cet article, je vais traiter de CSS (comme indiqué dans le titre). Bien qu’à l’heure actuelle créer et apprendre le CSS est de plus en plus simple avec les différents cours, tutoriels et livres disponibles, mais aussi des services proposant du ready to use.
Mais aujourd’hui je vais traiter de la priorité dans les fichiers CSS, cela relève plus de l’information pratique qu’il est bon de savoir lorsque vous mettez en forme vos petits sites internet, mais rien de bien compliquer.
Cela est fort pratique lorsque l’on met en place un site en responsive design, car il faut donner des valeurs différentes à chaque résolution, il y aura donc des priorités.
A. Degré de priorité
Lorsque l’on crée un site internet, il y a différentes méthodes pour intégrer son code CSS, à savoir 2 cas principaux :
– Dans le fichier HTML directement.
– Dans un fichier css à part, en général « style.css ».
Lorsqu’un style est appliqué dans le code HTML, il est prioritaire sur le fichier css, cela semble assez logique, car le navigateur au chargement de la page affiche en premier le fichier HTML et vient ensuite appliquer la feuille de style qui est lié. Mais, comment contourner cette priorité ?
B. La solution
Quoi qu’il en soit il préférable d’avoir un ou des fichier(s) CSS à part, car c’est plus simple pour gestion et de s’y retrouver plus facilement. Mais si par hasard vous avez affaire à du code directement intégrer dans le fichier HTML auquel vous n’avez pas accès, il est possible de rependre la main dessus dans votre fichier CSS.
Dans la propriété que vous souhaitez modifier, il fait rajouter avant le point-virgule la directive « !important ». Cela aura pour effet d’informer le navigateur d’utiliser la propriété du fichier CSS plutôt que celui du code HTML.
Utilisation : p { font-size: 16px !important; }
C. Le cas responsive
Dans le cadre d’un site en responsive web design, la priorité est donnée en fonction de la contrainte appliquée. Exemple :
Format original du site : html { background-color: blue; font-size: 14px; }
On souhaite modifier la couleur de fond en gardant la même taille de police sur une plage de résolution de 1280px à 1440px :
@media screen and (min-width:1280px) and (max-width:1440px) {
html { background-color: white; }
}
Donc la règle générale est de modifier uniquement la propriété qui doit être adaptée.
Conclusion
J’ai tenu à rester ici le plus simple possible, surtout dans le but de ne pas bloquer sur un problème tout bête, mais si on ne le sait pas, on peut bien rester bloqué là-dessus pendant un bon moment.
Dans le cas où vous n’auriez pas compris quelque chose, n’hésitez pas à poser des questions dans les commentaires. Aussi si vous avez vous même d’autres recommandations ou conseils, allez-y gaiement et partagez avec nous !
J’accompagne les TPE/PME dans leur communication et leur marketing sur internet.