Le CSS allége la mise en page, il n'y a plus qu'à se concentrer sur le contenu.
Script : Page HTML normale sans mise en page HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Page de test_1</title>
</head>
<body >
<h3><font face="Verdana" size="5">Test 1</font></h3>
<h4><font face="Verdana" color="#FF0000">Comparaison d'une page HTML simple
et de la même page préparée avec du CSS</font></h4>
<p><font face="Verdana">Une page écrite en HTML comporte l'ensemble des éléments
composant cette page ainsi que la mise en page.</font></p>
<p><font face="Verdana">A chaque page, il sera nécessaire de répéter les mêmes
infirmations de mise en page, la taille est relativement lourde et les risques d'erreur importants</font></p>
<p><i><font face="Verdana" color="#0000FF">Alléger la présentation et la rendre plus agréable
à l'oeil, c'est le rôle du CSS.</font></i></p>
<p><font face="Verdana">Les scripts comparés ci-dessous et un exemple permettront de se faire
un jugement</font></p>
</body>
Test 1 : page ecrite uniquement en HTML
Script : Page HTML avec mise en page CSS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Page de test 2</title>
<style type=text/css>
body
background-color: #C0C0C0;
font-size: 12px; text-align: left; font-style: verdana,Arial,sans-serif;}
h3{font-size: 24px; color: #334D55;}
h4{ font-size: 20px; color: #FF0000;}
p{ font-size: 16px; color: #334D55;}
a{ font-size: 16px; color: #334D55;}
</style>
</head>
<body>
<h3>Page de test 2S</h3>
<h4>Comparaison d'une page HTML simple et de la même page préparée avec du CSS</h4>
<p>Une page écrite en HTML comporte l'ensemble des éléments composant cette page ainsi que la mise en page.</p>
<p>A chaque page, il sera nécessaire de répéter les mêmes infirmations de mise en page, la taille est relativement lourde et les risques
d'erreur importants</p>
<p><i><font color=\"#0000FF\">Alléger la présentation et la rendre
plus agréable à l'oeil, c'est le rôle du CSS.</font></i></p>
<p>Les scripts comparés ci-dessous et un exemple permettront de se faire un jugement</p>
</body>
</html>
Test 2 : page écrite avec l'aide de CSS
Haut de pagePar rapport au premier script :
<style type=text/css>
body
background-color: #C0C0C0;
font-size: 12px; text-align: left; font-style: verdana,Arial,sans-serif;}
h3{font-size: 24px; color: #334D55;}
h4{ font-size: 20px; color: #FF0000;}
p{ font-size: 16px; color: #334D55;}
a{ font-size: 16px; color: #334D55;}
</style>
Le texte entre les balises style représente la mise en page CSS. Il est placé dans la partie "head".
C'est la mise en page de la page qui s'adress à la partie "body".
Pour une mise en page sur une partie de la page, il existe deus solutions :
-soit diriger les instructions vers des zônes entre balises <div>, ces balises pouvant s'imbriquer les unes dans les autres
-soit reprendre la main avec le code HTML comme dans la partie reproduite ci-dessous extraite du script 2.
<p><i><font color=\"#0000FF\">Alléger la présentation et la rendre plus agréable à l\'oeil, c\'est le rôle du CSS.</font></i></p>
- On crée tout d'abord une page CSS appelée style.css placée dans un répertoire spécialisé (styles par exemple et plcé de préférence à la racine du site. L'appel se fait entre balises "head".
Exemple :
<link href=\"http://www.nom de domaine/styles/style_1.css\" rel=\"stylesheet\" type=\"text/css\" />
Plusieurs feuilles de style sont possibles sur un même site.
- On peut comme dans l'exemple 2, mettre des instructions CSS en tête de page.
Haut de page- On peut enfin mettre des instructions HTML entre les balises "body" de la page..