Programmation

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.

Pour que s’applique un style css à un document, il existe trois solutions :

1. 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.

2. 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

3. 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