Intégrer les styles CSS

Le rôle des CSS

Rappelons que les CSS, Cascading Style Sheets, permettent de mettre en forme le contenu des éléments HTML et s’occupent aussi de la mise en page des sites web. Avec les CSS, nous avons donc deux objectifs bien définis :

La mise en forme qui concerne le formatage des textes, avec par exemple l’application d’une couleur, le changement de casse des caractères, la mise en évidence des paragraphes de texte avec la mise en forme de l’interligne ou le retrait de première ligne…
La mise en page concerne l’agencement des blocs de contenu HTML de la page, avec une barre de navigation, un en-tête, un pied de page, une zone d’affichage des contenus…

Les CSS permettent de modifier dynamiquement la mise en page selon le média de diffusion. C’est-à-dire que la mise en page va être différente suivant que vous consultez le site sur l’écran d’un ordinateur, d’une tablette ou d’un smartphone.

Rappelons que les CSS3 sont divisées en modules indépendants et qu’elles sont élaborés avec leur propre vitesse.

Il est maintenant bien acquis, et depuis longtemps déjà, qu’il faut séparer les CSS de la structure du HTML. Nous allons donc voir dans ce chapitre où placer les règles CSS qui constituent une feuille de style.

Les styles intégrés dans un élément HTML

La première possibilité d’intégrer des styles CSS est de définir une règle directement dans l’élément HTML concerné. Dans ce cas, cette règle ne s’applique qu’à cet élément et à nul autre.

Pour cela, nous devons utiliser l’attribut style dans l’élément HTML souhaité et indiquer la propriété et la valeur voulues.

Dans cet exemple, nous appliquons de l’italique au premier titre <h2> :

<!doctype html> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Ma page web</title> 
</head> 
<body> 
   <h2 style="font-style: italic">Tristique Cursus Commodo Ligula</h2> 
   <p>Cras justo odio, dapibus ac facilisis...</p> 
   <h2>Tortor Ullamcorper Etiam Nibh</h2> 
   <p>Nullam id dolor id nibh ultricies...</p> 
</body> 
</html>

Voici l’affichage obtenu :

Ainsi, vous voyez que la portée de cette règle CSS est des plus réduites, puisqu’elle ne s’applique qu’à l’élément HTML dans lequel elle est définie. Elle ne peut...

Les styles définis dans la page

La deuxième possibilité est de définir les règles CSS dans une page HTML. Dans ce cas, les règles ne peuvent s’appliquer qu’aux éléments HTML contenus dans cette page HTML et nulle part ailleurs, dans aucun autre fichier HTML. Les règles CSS se définissent dans l’élément <head> dans un élément <style>.

Voici un exemple :

<!doctype html> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Ma page web</title> 
   <style> 
       .titre-article { 
           font-style: italic; 
           text-transform: uppercase; 
       } 
   </style> 
</head> 
<body> 
   <h2 class="titre-article">Tristique Cursus Commodo Ligula</h2> 
   <p>Cras justo odio, dapibus ac facilisis...</p> 
   <h2 class="titre-article">Tortor Ullamcorper Etiam Nibh</h2> 
   <p>Nullam id dolor id nibh ultricies...</p> 
</body> 
</html>

Dans l’élément <style>, nous n’avons qu’une seule règle...

Les styles définis dans un fichier .css

La troisième possibilité est de déclarer les règles CSS dans un fichier séparé des pages HTML. Ce fichier aura alors comme extension .css. Ce fichier ne contiendra rien d’autre que les règles CSS voulues. Ensuite, nous devrons lier ce fichier CSS aux pages HTML voulues pour appliquer les règles CSS aux éléments HTML voulus.

Voici un exemple très simple d’un fichier CSS, nommé styles.css, qui ne contient que deux règles CSS :

.titre-article { 
   margin-left: 20px; 
   padding-left: 10px; 
   border-left: 5px solid #000; 
} 
 
.nom { 
   font-style: italic; 
}

Voici le fichier HTML :

<!doctype html> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Ma page web</title> 
   <link href="styles.css" rel="stylesheet"> 
</head> 
<body> 
   <h2 class="titre-article">Tristique Cursus Commodo Ligula</h2> 
   <p>Cras justo odio ... id nibh <span class="nom">Ultricies 
vehicula</span> ut id elit...</p> 
   <h2 class="titre-article">Tortor Ullamcorper Etiam Nibh</h2> ...

Les styles importés

La dernière possibilité d’intégrer une feuille de style CSS est d’utiliser la règle @import. Attention, notez que cette règle a été implémentée dans les CSS 2. Il ne s’agit donc pas d’une règle HTML ni d’un élément HTML.

Cette règle permet d’importer un fichier .css dans un autre fichier .css. Voici sa syntaxe qui se place usuellement au début d’un fichier .css :

@import url("autres-styles.css")

La règle @import utilise la propriété url() pour indiquer le chemin d’accès au fichier .css qui doit être importé.

Vous pouvez aussi utiliser la règle @import dans un fichier .html, dans l’élément <head>. Voici la syntaxe à utiliser :

<style> 
   @import url("autres-styles.css"); 
</style>

Mais pour des raisons de performance, cette méthode est moins utilisée.