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.

insérer css

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 : utiliser les CSS en ligne

C’est la méthode la plus simple, mais peut-être la moins bonne, car elle ne peut s’appliquer qu’à un seul contenu entre deux balises et n’autorise pas l’utilisation des attributs de balises de types classes « class » ou  identifiants « id », que nous verrons plus loin.

C’est pourtant une pratique que l’ont peut utiliser facilement dans les articles de blogs comme WordPress.

La syntaxe est simple :

Vous remarquerez les « : » entre la propriété et la valeur et le « ; » à la fin.

Ce qui donne :

Mon Texte

Cette méthode est peut utilisée dans les site web car elle relève de la mauvaise programmation. On préférera les méthodes qui suivent.

Deuxième méthode : utiliser les balises <style type= « text/css » > … </style>

Les CSS d’une page html peuvent être placés entre les balises

<style type= « text/css » > … </style>

Ces balises <style type= « text/css » > … </style> doivent elles-mêmes être placées entre les balises <head> … </head>

Mais si vous êtes sous WordPress, vous pouvez mettre ces balises en début d’article en mode texte (HTML). Cela fonctionnera également. Voici un exemple :

Si on appliquait cet exemple à l’article, tous les textes entre les balises <p>et </p>
deviendraient rouges sur fond jaune. Ce n’est pas forcément ce qu’on recherche.
Pour remédier à ce problème, on utilise des attributs de balises, les identifiants (id) ou les classes (class), en ajoutant par exemple :

class= « couleur_texte »

Les identifiants sont uniques alors que les classes peuvent s’appliquer à plusieurs types de balises.

Ce qui va donner pour une balise <p> :

le code CSS pour ce paragraphe, avec cet attribut class devient :

Cette feuille de style se lit : « à l’élément p dont la class est couleur_texte, on donne à la propriété color (couleur du texte) la valeur red (rouge) et à la propriété background (arrière plan), la valeur yellow (jaune).

Si à la place de class, on met id, on remplacera le point « . » par dièses « # » dans la feuille de style.

L’exemple précédent donnera :

Mon Texte

Troisième méthode : utiliser un fichier avec l’extension « .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.

Ce fichier s’intègre dans la page HTML, par un lien de ce genre :

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. Vous avez néanmoins intérêt à placer ce lien le plus haut possible, car plus vous le placé haut dans le document, plus la page s’affichera rapidement. Une page ne commence à s’afficher que lorsque tous les CSS sont chargés.

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

Les recherches qui vous ont mené ici

  • Insérer CSS dans HTML (7)
  • comment introduire css dans html (3)
  • intégrer style code html (2)
Ces articles pourraient vous intéresser :
5 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
geolocalisation
Localisation IP : 4 Widgets et 8 sites.

L'adresse IP (Internet Protocol) d'un visiteur donne des informations inportantes sur le visiteur d'un site, dont la provenance. Si cette...

balises HTML
10 balises HTML pour mettre en forme un article.

Les balises HTML permettent la mise entre autre la mise en forme de vos pages et articles.Elles se présentent sous...

Fermer