Utilisation des CSS (Cascade Style Sheet)

Les CSS permettent de définir les styles ue l'on utilise souvent dans son document, ou même dans son site.

Création d'un nouveau style à la main

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)

Création d'un style CSS avec DreamWeaver

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 :

  1. Allez dans Texte/Styles CSS/Modifier feuille de style
  2. Cliquez sur Nouveau...
  3. Cochez Créer un style personnalisé (classe)
  4. Dans la zone nom : Ecrivez perenoel, cliquez sur OK
  5. Dans la catégorie de droite, choisissez Type, et à gauche : Couleur = Rouge (#FF6699 par exemple)
  6. cliquez sur OK, et Terminé

Voilà. Exactement le même style, mais créé avec DreamWeaver.

Redéfinition d'un style existant

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>

Si on voulais faire créer sa redéfinition de style par DreamWeaver, il faudrait se reporter à la première marche à suivre, mais changer Cochez Créer un style personnalisé (classe) par Redéfinir la balise HTML

Définitions et redéfinitions mélangées

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>

Création d'un fichier .CSS

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

Marche à suivre

  1. Allez dans un nouveau fichier
  2. Demandez l'affichage du source HTML (Fenêtre/Source HTML)
  3. Effacez TOUT le contenu HTML
  4. Ecrivez la redéfinition du H1 (Fond jaune (#FFFF66), Courier New, Taille 18)
    Et la nouvelle définition labellenature (Couleur verte (#66FF66), Comic sans MS)
    Soit exactement les deux lignes suivantes :
     H1            {font-family: "Courier New", Courier, mono; font-size: 18pt; background-color: #FFFF66}
    .labellenature {font-family: "Comic Sans MS"; color: #66FF66}

  5. Fichier/Enregistrer Sous styleperso.css
    Nous voici à présent en possession de nos définitions de styles. Il s'agit maintenant de les utiliser
  6. Fermez styleperso.css
  7. Demandez un nouveau fichier
  8. Enregistrez-le vide sous le nom jutilisestyleexterne.htm, parce que sinon, DreamWeaver va renvoyer un message d'erreur
  9. Affichez le code HTML de ce nouveau fichier, et dans la zone HEAD, ajouter la ligne suivante :
    <LINK REL="stylesheet" HREF="/styleperso.css">
  10. Pour voir si ça marche, essayons ces styles. Dans la zone BODY, écrivez ces lignes :
    <H1>Ceci est un gros titre</H1>
    <P>Pas de mise en forme</P>
    <P CLASS="labellenature">J'aime la nature</P>

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...