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

5 Comments

Add a Comment

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
flash
Comment créer une bannière flash en ligne et l’intégrer dans une page web ?

Les bannières sont les symboles d'un site. Elles peuvent amener du trafic ou au contraire le réduire. Dans cet article...

css jquery
Comment changer la couleur d’un texte d’un simple clic ?

Voici un petit script utilisant jQuery pour changer les css d'un texte. Ici nous changerons l'attribut 'color' d'un texte 1- le code...

lien en relation
En relation avec : les trois meilleurs Plugins WordPress.

Pour débuter cette année, nous allos nous intéresser aux plugins WordPress proposant des articles en rapport avec l'article lu. Pourquoi utiliser...

Fermer