Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Comment intégrer des styles CSS

Comment intégrer des styles CSS

Pour intégrer des styles CSS dans un fichier XHTML, vous avez le choix entre quatre méthodes que je vais déployer selon un ordre de pertinence croissant :

Cette méthode consiste à noter tous vos styles dans un fichier séparé dont l'extension est : ".css". Je vous recommande vivement cette méthode en raison des avantages qu'elle nous apporte. On en parlera à la fin de ce chapitre. Maintenant prenez votre éditeur bloc-notes ou Notepad++. N'oubliez pas les avantages de ce dernier notamment la coloration du code pour une meilleure lisibilité. Si vous allez travailler avec Notepad++ choisissez tout d'abord CSS dans le menu "language", pour activer de la coloration des CSS.
Après, appliquez les propriétés de style CSS suivantes :

h1 {
    font-family: Arial;
    font-size: 30px;
    color: white;
    text-decoration: underline;
    background-color: black;
    text-align: center;
}


h3 {
    font-family: Helvetica;
    font-size: medium;
    font-style: italic;
    color: green;
    text-align: left;
}


p {
    font-family: Helvetica;
    font-size: small;
    color: blue;
    text-align: justify;
}
  

attacher une feuille de style CSS externe avec la balise link : code CSS On a redéfinit trois balises :

Ouuuufff, enfin on a bel et bien définit nos styles, maintenant enregistrez votre travail sous l'extension (.css), et après créez un fichier XHTML et nommez le essai.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai CSS</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>
<h1>Langage XHTML et CSS</h1>
<h3>Le XHTML</h3>
<p>Le langage XHTML permet de créer le fond d'une page web.</p>
<h3>Les CSS</h3>
<p>Le langage CSS permet de créer la forme d'une page web.</p>
</body>
</html>

attacher une feuille de style avec la balise link : code XHTML

Je parie que la seule chose qui vous a surprise est la balise link qui se trouve dans l'en-tête du fichier XHTML. En fait cette balise permet d'attacher une feuille de style à un fichier XHTML. Je vais pas m'attarder là-dessus, mais sachez pour le moment que l'attribut href sert à indiquer l'URL de votre feuille de style, c'est-à-dire l'adresse hypertexte qui va permettre au navigateur d'atteindre le document CSS. La notation rel="stylesheet" est obligatoire, car c'est-elle qui dit au navigateur voilà il s'agit d'un document CSS css L'attribut media a pour rôle de préciser l'outil de restitution (écran d'ordinateur, imprimante etc.).

Faites attention. L'URL suit les mêmes principes d'adressage que ce qu'on a vu dans la partie "les liens relatifs et absolus".

Récapitulons tout ce qu'on vient de faire, on a crée deux fichiers "essai.html" et "style.css" et on les a placé dans le même répertoire : une feuille de style et un document XHTML Lorsque vous allez ouvrir le fichier "essai.html" vous serez époustouflé par le nouveau aspect que va revêtir la page Web "essai.html". aperçu du document XHTML avec une feuille de style CSS Admirez le rendu visuel, chouette, on n'à qu'a applaudir vivement css

Importer une feuille de style externe avec la règle @import

Une autre méthode moins brillante consiste à importer des styles externes définis dans un fichier CSS séparé. La déclaration de l'opération d'import avec le mot-clé @import, doit se faire à l'intérieur de la balise <style>. En plus un ou plusieurs médias de sortie (séparés par des virgules) doivent être spécifiés. Bon on en a assez parlé, mettons-nous dans un exemple plus parlant :

Reprenons les mêmes données de l'exercice précédent, sauf que cette fois, la feuille de style "style.css" sera importée depuis le fichier XHTML "essai.html" :

<style type="text/css" media="screen, print">
@import url("style.css");
</style>

Je vais pas tout de même vous expliquez ligne par ligne, essayez de bien retenir cette nouvelle syntaxe. Par contre j'aimerais bien vous signaler que vous pouvez importer plusieurs styles externes au sein de la même balise <style>, comme vous avez aussi le plein droit de réserver un couple <style></style> pour chacun des styles. Ceci peut être utile si vous allez spécifier pour chaque style externe, un media de sortie qui lui est propre. Exemple :

<style type="text/css" media="screen">
@import url("design.css");
</style>
<style type="text/css" media="print">
@import url("impression.css");
</style>

Comparez cet exemple avec celui qui le précède. Dans le premier exemple la feuille "style.css" va concerner les deux outils de sortie screen (écran) et imprimante (print). En revanche la deuxième syntaxe nous a permis d'associer à chaque média un style qui lui convient.

A noter aussi qu'il est tout à fait possible d'attribuer plusieurs feuilles de style à un ou plusieurs médias de sortie (séparés par des virgules) au sein de la même balise <style>. Exemple :

<style type="text/css" media="screen">
@import url("design.css");
@import url("impression.css");
</style>

Dans ce cas si les styles définis dans les deux feuilles "design.css" et "impression.css" entrent en conflits. Le navigateur va trancher entre eux en recourant à la règle de cascade des styles CSS ou ordre de priorité. Dans le cas contraire les styles vont se fusionner.

Une autre syntaxe plus puissante et plus intéressante consiste à définir le média de sortie juste après l'URL de feuille de style. Cette notation est plus pratique, du fait qu'elle est plus claire et lisible, en plus elle permet d'attribuer facilement les médias de sortie aux différents styles importés. Pour cette raison je vous la recommande. Exemple :

<style type="text/css">
@import url("design.css") screen;
@import url("print.css") print;
@import url("television.css") tv;
@import url("retroprojecteur.css") projection;
</style>

Attention : L'élément link fait référence à des feuilles de style alternatives que le lecteur peut sélectionner, alors que les feuilles de style importées par la règle @import sont automatiquement combinées avec les autres feuilles de style.

Les deux méthodes que je vais déployer par la suite sont à utiliser avec modération. Car elles consistent à placer le code CSS dans le document XHTML, ce qui suppose un mélange des deux codes, et puis gâcher la raison d'être des CSS, qui consiste à séparer forme et fond.

Dans l'en-tête (le head) avec la balise <style>

Cette méthode consiste à définir nos styles dans l'en-tête (le head) de notre page Web, pour cela on utilise la même balise <style> qu'on vient de voir dans la section "Importer une feuille de style externe avec la règle @import". Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai CSS</title>
<style type="text/CSS">
p {
font-size: small;
color: blue;
text-align: center;
}  
</style>
</head>
<body>
<p>Le langage XHTML  permet de créer le fond d'une page web.</p>  
</body>
</html>

Vous avez le droit de combiner la deuxième et la troisième méthode puisqu'elles s'appuient sur la même balise <style>. Exemple :

<style type="text/css">
@import url("design.css");
h3 { color: green; }
</STYLE>

La troisième méthode souffre d'un net recul en terme de performance par rapport aux deux premières solutions et ce parce que :

Dans le corps (le body) avec l'attribut universel style

Cette méthode doit être utilisée avec modération, et seulement lorsqu'on en a besoin, car c'est la méthode la moins recommandée et la plus déconseillé. Elle consiste à ajouter l'attribut universel style à l'intérieur d'une balise par exemple <p> ou <h1> et puis lui appliquer des styles, voici une démonstration :
<p style="font-size: small; color: blue; text-align: center;"> notre texte </p>

css Faites très attention, dans cette méthode notre style ne sera valable que pour cette balise <p> où on à mis l'attribut style. Donc retenez ces trois cas de figures :

Dernièrement la syntaxe reste la même, abstraction faite de la méthode que vous utilisez :
propriété CSS : valeur ; propriété CSS : valeur ...

Je me contente de ceci pour ce chapitre. Le prochain tutoriel sera encore plus nutritif css et croyez-moi, il reste encore tout un paquet de choses à apprendre (les sélecteurs CSS : définitions et typologie).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau