Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.
Consulter les coursParcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.
Consulter les écolesAccédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.
Accéder au tchatPour 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;
}
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>
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 
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 :
Lorsque vous allez ouvrir le fichier "essai.html" vous serez époustouflé par le nouveau aspect que va
revêtir la page Web "essai.html".
Admirez le rendu visuel, chouette, on n'à qu'a applaudir vivement 
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.
<!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 :
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>
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 :
Je me contente de ceci pour ce chapitre. Le prochain tutoriel sera encore plus nutritif 
et croyez-moi, il reste encore tout un
paquet de choses à apprendre (les sélecteurs CSS : définitions et typologie).