Les CSS permettent de définir les styles ue l'on utilise souvent dans son document, ou même dans son site.
Dans l'exemple qui suit, c'est une utilisation basique d'un CSS : On définit le style perenoel comme étant simplement l'écriture en rouge. La définition du style est donnée entre les balises <STYLE>, qui sont situées dans les balises <HEAD>
<HTML>
<HEAD>
<TITLE>CSS
: Exemple basique</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<STYLE TYPE="TEXT/CSS">
.perenoel {color:
#FF0000}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Il vaut mieux <SPAN CLASS="perenoel">allumer</SPAN>
une chandelle que maudire l'obscurité
</BODY>
</HTML>
Si on affiche cette page dans le navigateur, le mot allumer serait écrit en rouge (rouge = #FF0000)
On peut faire cette modification directement dans le code-source HTML, mais on peut également demander à DreamWeaver de le faire pour nous de manière plus conviviale. Marche à suivre :
Voilà. Exactement le même style, mais créé avec DreamWeaver.
Voyons maintenant comment redéfinir un style existant. Par exemple,
redéfinissons le style H1 (Les gros titres / Heading 1). Nous allons
ici décider que tous les titres H1 de ce document sera affiché
en :
Police Courier New (font-family: "Courier
New", Courier, mono)
18 Pts de grandeur (font-size: 18pt)
Centré (text-align: center)
<HTML>
<HEAD>
<TITLE>CSS : Redéfinition de H1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<STYLE TYPE="TEXT/CSS">
H1 { font-family:
"Courier New", Courier, mono; font-size: 18pt; text-align: center}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>La pensee
de Confucius</H1>
<P>Il vaut mieux allumer une chandelle que maudire
l'obscurité </P>
</BODY>
</HTML>
Rien ne nous empêche donc de mélanger les nouvelles définitions (perenoel), avec les redéfinitions des styles existants (H1)
<STYLE
TYPE="TEXT/CSS">
.perenoel {color:
#FF0000}
H1 { font-family: "Courier New",
Courier, mono; font-size: 18pt; text-align: center}
</STYLE>
L'immense avantage des CSS est bien entendu du pouvoir réutiliser tous les styles non pas dans un seul document, mais dans le site entier. Pour cela, nous allons créer styleperso.css qui va contenir la redéfinition du style existant H1, et le style créé de toutes pièces labellenature qui va écrire simplement en vert, police comic sans ms
J'ai cherché les options DreamWeaver pour créer avec un assistant une nouvelle feuille de style, mais je n'ai pas trouvé... ça n'existe peut-être pas. Je peux lier des styles depuis une feuille HTML vers un style d'une page de style externe, mais je ne peux pas faire faire le travail par un assistant de A à Z.
De plus, on ne doit pas s'imaginer que le simple fait d'ouvrir une nouvelle feuille, d'y définir des styles avec Texte/Styles CSS/Modifier feuille de style, et de créer avec l'assistant différents styles, et ensuite sauver sa feuille sous monstyle.css suffira à ce que DreamWeaver reconnaisse normalement cette feuille de style ! Ce serait trop simple !!! Il faut nettoyer complètement le code HTML de :
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="TEXT/CSS">
<!--
.lanature { color: #99FF99}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
en
.lanature { color: #99FF99}
Sinon, y'a rien qui marche...
C'est seulment à ce moment, c'est à dire ou on a manuellement écrit correctement un style dans un fichier .css, que, dans la carte du site, si on clique 2 fois sur le fichier .css, il y a la boîte de dialogue qui apparaît, et qui permet de modifier, ajouter, supprimer les styles. C'est marrant... On dirait qu'il manque vraiment l'étape de création de feuille de style depuis zéro...