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



En relation avec cet 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. Apprenez comment les données de vos commentaires sont utilisées.

Lire plus :
suligner texte stabilo css
Comment surligner un texte comme avec un stabilo ?

Dans ce petit tuto nous allons utiliser les balises <span> et </span> et les CSS en ligne, pour surligner un...

l'équipe modifée
Modifier l’apparence d’un site web en ligne.

N'aimeriez-vous pas vous amuser à changer l'apparence d'un site, en modifiant ses titres, en changeant ses images tout en vous...

enjoy-css
Les 7 meilleurs générateurs css3 en ligne

Depuis CSS3, les feuilles de style ont révolutionné la création des sites web : des coins arrondis, des gradients, des transitions,...

Fermer