Les 3 méthodes pour insérer un style CSS dans une page HTML

Les feuilles de style ou CSS (Cascading Style Sheets) sont indispensables pour les documents HTML. Elles apportent les couleurs, la mise en page et le relief nécessaire à un bon document internet.

Comment appliquer une feuille de style à un document en HTML ?

Pour que des CSS s’appliquent à un document, il existe trois solutions :

Première méthode : le CSS en ligne

C’est la méthode la plus simple, mais peut-être la moins bonne, car elle ne peut s’appliquer qu’à une seule balises.
La syntaxe est simple pour changer la couleur d’un texte et celle de l’arrière plan :

Mon Texte

1
<span style="color:blue;background-color:yellow;"> Mon Texte </span>

Cette méthode est pratique à utiliser pour modifier rapidement un élément, mais les puristes vous diront que ce sont des mauvaises pratiques.
Quand c’est possible, on préférera les méthodes qui suivent.

Deuxième méthode : les balises <style >

Les CSS d’une page html peuvent être placés entre les balises <style type= “text/css”> … </style>
Plus le code css est chargé rapidement plus la page s’affiche vite. On a donc intérêt à le placer dans les balises <head> en haut de page.
Pour accéder à un élément, on utilisera souvent les attibuts “class” ou”id”.
Voici un exemple :

  • code CSS ;

    1
    2
    3
    4
    5
    6
    <style type= "text/css">
    .txt{
    color:blue;
    background-color:yellow;
    }
    </style>
  • code HTML :

    1
    <p class="txt"> Mon texte </p>

Mon texte

Troisième méthode : le fichier externe “.css “

C’est la méthode la plus utilisée, elle consiste à regrouper tout le code entre les balises <style> et </style> dans un fichier du genre style.css. 
Ce fichier ne doit pas contenir les balises <style> et </style>, mais seulement le code css et s’intègre dans la page HTML, par un lien comme dans cet exemple :

1
<link rel="stylesheet" href="style.css">

En principe cette balise avec le lien doit être placée entre les balises <head> et </head> de la page, même si vous pouvez le placer ailleurs dans le document.
Pour en savoir plus sur les principales balises de mise en forme, vous pouvez vous référer à cet article : 10 balises html pour mettre en forme un article

Cet article vous a plu, n’hésitez pas à le partager.

A bientôt sur Outils Web

Partager