CSS3 – Intégration dans le HTML

LEÇON

 

Il y a 3 approches pour intégrer du CSS dans le HTML.

Remarque : Dans un même fichier HTML on n'est pas limité à une seule approche. On peut, si l'on veut, exploiter 2 ou 3 approches à la fois.

 

1. Fichier CSS externe

 

Caractéristiques :

  • Les styles se trouvent dans un fichier CSS à part
  • le fichier CSS est lié au fichier HTML via une balise <link>

 

Exemple (HTML) :

<link rel="stylesheet" type="text/css" href="style.css">

 

Avantages :

  • une séparation nette du contenu (dans le fichier HTML) et de la mise en forme (dans le fichier CSS)
  • les styles peuvent s'appliquer à plusieurs fichiers HTML

Désavantages

  • aucun (même si un fichier supplémentaire nécessite une requête HTTP supplémentaire ...)

 

Remarques :

  • c'est l'approche conseillée pour la plupart des situations
  • le fichier dans l'exemple ci-dessus est nommé style.css mais il n'y a pas besoin de nommer le fichier spécifiquement ainsi. Par convention on utilise l'extension .css mais le nom du fichier est librement choisi par son auteur : par exemple feuille.css, abcd.css, layout.css, skin_militaire.css, et cetera
  • dans un même document HTML on peut inclure plusieurs fichiers CSS. Exemple :
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="skin.css">

 

2. Feuille de Style Interne

 

Caractéristiques :

  • Les styles se trouvent dans le fichier HTML entre des balises <style>
  • Les balises <style> doivent se trouver dans la section <head> du document HTML

 

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
        <style>
.couleur_vive { color:red; }
        </style>
    </head>
    <body>
        <p class="couleur_vive">Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit.</p>
        <p class="couleur_vive">Aliquam lobortis risus eros.</p>
    </body>
</html>

 

Avantages :

  • tout ce dont on a besoin pour spécifier le contenu et son affichage est dans le même fichier

Désavantages :

  • ne sépare pas nettement (au niveau des fichiers) le contenu et la mise en forme
  • les styles déclarés ainsi ne s'appliquent que sur le document HTML dans lequel ils se trouvent (ils ne peuvent pas s'appliquer à d'autres documents HTML)

 

3. Styles intégrés (en anglais : in-line styles)

 

Caractéristiques :

  • les styles pour un seul élément se trouvent dans la balise de l'élément
  • pour définir des styles, on utilise l'attribut style dans la balise

 

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
    </head>
    <body>
        <h1 style="color:green;">Lorem ipsum</h1>
        <p>Consectetur adipiscing elit.</p>
    </body>
</html>

 

Avantages :

  • par rapport au HTML pur, possibilité d'exploiter la richesse offerte par CSS
  • offre la possibilité de forcer un style sur un élément spécifique sans s'occuper des complexités des règles CSS génériques en place

Désavantages :

  • aucune séparation de contenu et de la mise en forme (un des intérêts principaux du CSS)
  • aucune réutilisation des styles

 

Remarques :

  • à utiliser avec précaution !

 

 

Exemple avec les 3 approches ensemble

 

style.css

body
{
  color:blue;
  background-color:pink;
}

 

mapage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
.couleur_vive { color:red; }
        </style>
    </head>
    <body>
        <h1 style="color:green;">Lorem ipsum</h1>
        <p class="couleur_vive">Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit.</p>
        <p class="couleur_vive">Aliquam lobortis risus eros.</p>
    </body>
</html>

 

Mini-exercice :

  • reproduire sur votre machine les fichiers dans l'exemple ci-dessus et ouvrir le fichier HTML dans un navigateur
  • le texte "Consectetur adipiscing elit." s'affiche en quelle couleur ?
  • comment expliquer ce résultat ?

 

La priorité des 3 approches

Regardez l'exemple ci-dessous.

Le fond de la page (body / background-color) sera de quelle couleur ? Autrement dit : quelle approche prime sur les autres ?

 

style.css

body
{
  background-color:yellow;
}

 

mapage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
body { background-color:red; }
        </style>
    </head>
    <body style="background-color:green;">
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit.</p>
        <p>Aliquam lobortis risus eros.</p>
    </body>
</html>

 

La règle :

  • le navigateur applique les styles dans l'ordre où il les trouve dans le document HTML
  •  les styles rencontrés en dernier priment

 

Dans l'exemple ci-dessus donc : on applique les styles du fichier CSS externe, puis les styles internes (balise style), puis les styles intégrés. La réponse à la question est : vert (green).

 

La priorité des instructions CSS

 

Des styles sont mentionnés 2 fois dans le même contexte ? Toujours la même règle : Le style rencontré en dernier prime.

Par exemple, le fond de la page spécifié par style.css est orange :

style.css

body
{
  background-color:yellow;
}

p
{
  padding:20px;
}

body
{
  background-color:orange;
}

 

Un style est présent dans 2 fichiers CSS, ou dans 2 éléments de type style dans la section head ? Toujours la même règle : Le style rencontré en dernier prime.

Par exemple :

style.css

body
{
  background-color:orange;
}

style2.css

body
{
  background-color:pink;
}

mapage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
        <style>
.couleur_vive { color:red; }
        </style>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="style2.css">
        <style>
.couleur_vive { color:yellow; }
        </style>
    </head>
    <body>
        <h1>Lorem ipsum</h1>
        <p class="couleur_vive">Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit.</p>
        <p class="couleur_vive">Aliquam lobortis risus eros.</p>
    </body>
</html>

Le fond de la page est rose (pink) et les paragraphes colorés sont jaunes (yellow).

 

 Fichiers externes et balises style intercalés

Toujours la même règle : Le style rencontré en dernier prime.

Exemple :

Ci-dessous, la couleur du texte dans le body sera vert car b.css se situe après la balise style.

 

a.css

body { color:blue; }

b.css

body { color:green; }

mapage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="a.css">
        <style>body { color:red; }</style>
        <link rel="stylesheet" type="text/css" href="b.css">
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </body>
</html>

 


 

 

EXERCICES

  1. Créer un fichier HTML simple, avec au moins un élément <h1>, puis :
    • appliquer un style (couleur vert par exemple) sur <h1> avec un ficher CSS externe
    • appliquer ce même style mais plutôt via une feuille de style interne
    • appliquer ce même style mais plutôt via un style intégré
  2. Si ce n'est pas encore fait, faire le "mini-exercice" dans la section "Exemple avec les 3 approches ensemble" ci-dessus
  3. Créer un fichier HTML simple, avec au moins un élément <h1> et un élément <p>, puis :
    • créer 2 fichiers CSS externes style1.css et style2.css et les lier dans cet ordre au fichier HTML
    • définir color sur l'élément <h1> dans les 2 fichiers CSS (choisir 2 couleurs différentes)
    • définir color  sur l'élément <p> uniquement dans style1.css (choisir une 3ème couleur)
    • remarquer quelles couleurs s'appliquent à l'affichage
    • remarquer aussi que les styles sur l'élément <p> s'appliquent toujours, même si style2.css est prioritaire sur style1.css
    • ajouter une définition color sur <h1> via une balise <style> avant la déclaration de style1.css (choisir encore une autre couleur) : remarquer s'il y a un effet sur l'affichage
    • déplacer cette nouvelle balise style : la mettre entre la déclaration de style1.css et la déclaration style2.css : remarquer s'il y a un effet sur l'affichage
    • déplacer encore cette nouvelle balise style : la mettre après la déclaration de style2.css : remarquer s'il y a un effet sur l'affichage
    • ajouter des styles intégrés (définition color), dans le HTML, sur les éléments <h1> et <p> : remarquer l'effet sur l'affichage
    • ajouter un autre élément h1 et un autre élément p dans le fichier HTML, sans style intégré : remarquer quelles couleurs s'appliquent aux différents éléments