<p class="spip">Pour bien comprendre l’utilité et la pratique du CSS, il faut assimiler
les principes de conception des sites modernes :</p>

<ol>
  <li>Séparation du contenu et de la forme</li>
  <li>Prendre en compte la maintenance du site dés la conception</li>
  <li>faire un code xhtml sémantiquement correct</li>
  <li>Prendre en compte les contraintes d’accéssibilité pour tous les
    navigateurs, tous les systèmes et toutes les personnes.</li>
</ol>
<h2>Le XHTML 1.0</h2>
<p class="spip">Le contenu est obtenu par le langage <strong><abbr xml:lang="en" lang="en"
title="eXtensible HyperText Markup Language">XHTML</abbr></strong>, mariage
du <strong><abbr xml:lang="en" lang="en"
title="HyperText Markup Language">HTML</abbr></strong> et du <strong><abbr
xml:lang="en" lang="en"
title="eXtensible Markup Language ">XML</abbr></strong>, il est composé comme
suit :</p>

<dl>
  <dt>Déclaration XML</dt>
    <dd><code class='spip_code' dir='ltr'><?xml version="1.0" encoding="ISO-8859-15"?></code></dd>
  <dt>Déclaration de la <abbr xml:lang="en" lang="en"
  title="Document Type Definition">DTD</abbr>, qui décrit comment utiliser
  les balises</dt>
    <dd>
      <div>
      <div style='text-align: left;' class='spip_code' dir='ltr'><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></div>
</div>
<p class="spip"><code class='spip_code' dir='ltr'><html xmlns="http://www.w3.org/1999/xhtml"></code></p>

</dd>
  <dt>Contenu du site</dt>
    <dd>
      <div>
      <code class='spip_code' dir='ltr'><head></code></div>
<p class="spip">...</p>

<p class="spip"><code class='spip_code' dir='ltr'></head></code></p>

<p class="spip"><code class='spip_code' dir='ltr'>>body></code></p>

<p class="spip">...</p>

<p class="spip"><code class='spip_code' dir='ltr'></body></code></p>

</dd>
    <dd><code class='spip_code' dir='ltr'></html></code></dd>
</dl>
<p class="spip">Nous venons de voir la structure initial d’une page écrit en <strong>xhtml
1.0 strict</strong>, il existe d’autre DTD utilisable pour la réalisation
d’une page HTML, la DTD la plus utilisée semble être le HTML 4.01.</p>

<p class="spip">voici un exemple de source : <br />
<a href="http://yogi.homelinux.org/spip/http://download.tuxfamily.org/assocoagul/drupal-files/spip/pngDTD01.png" title="Cliquer pour voir l'image en grand">
<img alt="Source de la page affichant la DTD" src="http://yogi.homelinux.org/spip/http://download.tuxfamily.org/assocoagul/drupal-files/spip/DTD01.png" width="30%" /></a><p>

<p class="spip">Pour la suite du tutoriel, je vais parler de balise, d’élément ou
d’attribut, afin d’être clair et que tout le monde parle le même langage, je
vais expliquer les définitions :</p>

<dl>
  <dt>Eléments</dt>
    <dd><code class='spip_code' dir='ltr'>title, body, p</code> >> le terme élément
      est générique</dd>
  <dt>Balise</dt>
    <dd><code class='spip_code' dir='ltr'>&lt;title&gt;</code> : <em>balise ouvrante</em>
      de l’élément <code class='spip_code' dir='ltr'>title</code>
<p class="spip"><code class='spip_code' dir='ltr'>&lt;/p&gt;</code> : <em>balise fermante</em> de
      l’élément <code class='spip_code' dir='ltr'>p</code></p>

</dd>
  <dt>Attribut</dt>
    <dd><code class='spip_code' dir='ltr'>src, alt, title</code> sont les attributs de
      <div style='text-align: left;' class='spip_code' dir='ltr'><code><img src="./image.png" alt="moi" title="je suis le plus beau"<br />
      /></code></div>
</dd>
</dl>
<p class="spip">Une fois déterminé selon quel référence nous allons coder, nous pouvons
passer à la réalisation du code en xhtml, celui-ci est régit par quelques
principes élémentaires :</p>

<ol>
  <li>les balises sont toutes en minuscules</li>
  <li>Toutes les balises ouvertes doivent être fermées :
    <code class='spip_code' dir='ltr'><body>...</body> | <p>...</p> | <a href="">...</a></code> | etc</li>
  <li>Seules quelques balises dites "orphelines" existent :
<p class="spip">le retour chariot : <code class='spip_code' dir='ltr'><br /></code></p>

<p class="spip">la ligne horizontale : <code class='spip_code' dir='ltr'><hr /></code></p>

<p class="spip">les images : <code class='spip_code' dir='ltr'><img src="" alt="" title="" /></code></p>

</li>
  <li>Respecter la sémantique des balises, ne pas aller vers la facilitée en
    détournant une balise hors de sa fonction initiale
    (<code class='spip_code' dir='ltr'>blockquote</code>, ...)</li>
  <li>Le décor est fait avec les feuilles de styles (CSS)</li>
</ol>
<p class="spip">voici un exemple de code source d’une page en XHTML :</p>

<p class="spip"><a href="http://yogi.homelinux.org/spip/http://download.tuxfamily.org/assocoagul/drupal-files/spip/source02.png" title="Cliquer pour voir l'image en grand"><img alt="Vue du code source en .PiNG" src="http://yogi.homelinux.org/spip/IMG/png/source02.png" width="30%" /></a><p>

<h2>Le Cascading Style Sheet</h2>
<h3>La définition du CSS</h3>
<p class="spip">(selon <a href="http://fr.wikipedia.org/wiki/CSS">fr.wikipedia.org</a>)</p>

<p class="spip">Le langage <strong>CSS</strong> (Cascading Style Sheets : <em>feuilles de
style en cascade</em>) est utilisé pour décrire la présentation d’un document
structuré, écrit en HTML ou en XML, et c’est le World Wide Web Consortium
(W3C) qui en a la direction.</p>

<p class="spip">CSS est principalement utilisé pour définir les couleurs, les polices, le
rendu, et d’autres caractéristiques d’un document, ...</p>

<p class="spip">Ainsi, les avantages des feuilles de style sont multiples :</p>

<p class="spip">* Toute l’architecture visuelle d’un document réside dans un seul fichier,
et peut donc être mise à jour facilement.</p>

<p class="spip">* Un même document peut donner le choix entre plusieurs feuilles de style
(impression ou lecture à l’écran par exemple). Certains navigateurs web
permettent d’accéder facilement à un choix de feuilles de style.</p>

<p class="spip">* Le code HTML est considérablement réduit en taille et en complexité,
puisqu’il ne contient plus de balise de présentation.</p>

<h3>Introduction à CSS2</h3>
<p class="spip">Pour bien comprendre la suite, nous allons parler le même langage en
CSS.</p>

<p class="spip">voici un exemple de règle CSS :</p>

<p class="spip"><code class='spip_code' dir='ltr'>h1 {</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>color: blue;</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>}</code></p>

<p class="spip">Une règle CSS est constituée de 5 caractéristiques indispensables :</p>

<ol>
  <li><strong>le sélecteur</strong>
<p class="spip"><code class='spip_code' dir='ltr'>h1</code></p>

</li>
  <li><strong>une parenthèse ouvrante</strong>
<p class="spip"><i class="spip"></p>

</li>
  <li><strong>la déclaration</strong>
<p class="spip"><code class='spip_code' dir='ltr'>color: blue</code></p>

<p class="spip">celle-ci se compose elle aussi en 2(deux) parties</p>

<ul>
      <li><em>une propriété</em>
<p class="spip"><code class='spip_code' dir='ltr'>color</code></p>

</li>
      <li><em>une valeur</em>
<p class="spip"><code class='spip_code' dir='ltr'>blue</code></p>

</li>
    </ul>
  </li>
  <li><strong>fin de la déclaration</strong>
<p class="spip"><code class='spip_code' dir='ltr'>point virgule ;</code></p>

</li>
  <li><strong>une parenthèse fermante</strong>
<p class="spip"></i></p>

</li>
</ol>
<p class="spip">Soit pour faire simple et clair, le modèle d’une règle CSS est écrit comme
suit :</p>

<p class="spip"><code class='spip_code' dir='ltr'>Sélecteur {</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>propriété n: valeur n;</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>propriété n: valeur n;</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>}</code></p>

<p class="spip">Nous allons commencer par un petit document HTML, sans style, nommé <a
href="./cssexemple/exemple00.html">exemple00.html</a></p>

<p class="spip">Editer le avec votre éditeur de texte préféré :</p>

<dl>
  <dt>Linux / *nix</dt>
    <dd>vi, emacs, Jedit, Kwrite
<p class="spip">...</p>

</dd>
  <dt>Windows</dt>
    <dd>HTML-Kit, Blocs Notes
<p class="spip">...</p>

</dd>
  <dt>Mac OS</dt>
    <dd> ???
<p class="spip">...</p>

</dd>
</dl>
<p class="spip">Vous devez voir ceci :</p>

<p class="spip"><a href="http://yogi.homelinux.org/spip/http://download.tuxfamily.org/assocoagul/drupal-files/spip/source03.png" title="Cliquer pour voir l'image en grand"><img alt="Vu du code source avec jEdit sous Linux" src="http://yogi.homelinux.org/spip/IMG/pngsource03.png" width="30%"
/></a></p>

<p class="spip">Les curieux et les attentifs ont sûrement déjà remarqué la présence de la
déclaration XML et de la DTD ;o), mais il y a autre chose et c’est cela qui
nous intéresse ici.</p>

<p class="spip">Compris dans l’élément head, on peut voir deux choses :</p>

<ol>
  <li>la présence de l’élément <code class='spip_code' dir='ltr'>title</code>, les balises encadrent le
    texte qui s’affiche dans la barre de menu du navigateur</li>
  <li>la présence de la balise <div style='text-align: left;' class='spip_code' dir='ltr'><code><link rel="" type="" href="" media=""<br />
    title="" /></code></div>
<p class="spip">l’élément link spécifie :</p>

<ul>
      <li>le type de lien (rel="stylesheet") : vers une feuille de style</li>
      <li>la localisation de celle-ci (href="CSS/style01.css") : fichier
        ’style01.css’ dans le répertoire ’CSS’</li>
      <li>le type de la feuille de style liée (type="text/css")</li>
      <li>le choix du support de média (media="screen, projection") : il
        existe d’autre média que nous verrons plus tard.</li>
    </ul>
<p class="spip">Le principal avantage à spécifier sa feuille de style externe avec
    l’élément <code class='spip_code' dir='ltr'>link</code>, est la souplesse d’utilisation, on peut
    ainsi modifier plusieurs pages HTML sans en modifier la source.</p>

</li>
</ol>
<p class="spip">Nous allons donc créer une feuille de style, je vous conseille pour
débuter de télécharger un éditeur de CSS, comme tout logiciel ce choix vous
appartient :</p>

<dl>
  <dt>Linux</dt>
    <dd><a href="http://cssed.sourceforge.net/index.fr.php">cssed</a>, un
      éditeur de css en phase de développement mais très prometteur (version
      0.2.1)
<p class="spip">c’est le seul éditeur de CSS sous GNU/Linux à ma connaissance, mais
      je peux me tromper donc si vous en connaissez un autre pour Linux,
      dites le moi ^_^.</p>

</dd>
  <dt>Windows</dt>
    <dd><a href="http://www.bradsoft.com/download/index.asp">Top Style lite
      3.10</a>, un éditeur gratuit et vraiment efficace de chez Bradbury
      Software.
<p class="spip">Il existe d’autres éditeurs pour Windows mais je trouve que celui
      -ci est le plus simple.</p>

</dd>
</dl>
<h3>Un bref tutoriel à CSS2</h3>
<p class="spip">Commençons par créer le fichier CSS, nommons le : <em>style01.css</em></p>

<p class="spip">Pour styler la page HTML, le sélecteur CSS doit appeler l’élément HTML,
<abbr title="c'est à dire">c.a.d.</abbr> :</p>

<p class="spip">Dans l’exemple de la page HTML exemple.html,</p>

<p class="spip">En <strong>HTML</strong> :</p>

<p class="spip"><code class='spip_code' dir='ltr'><h1></code>Fichier d’exemple<code class='spip_code' dir='ltr'></h1></code></p>

<p class="spip">En <strong>CSS</strong> :</p>

<p class="spip"><code class='spip_code' dir='ltr'>h1 {</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>color: red;</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>border-bottom: thin solid Navy;</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>}</code></p>

<p class="spip">Dans cette exemple, le et/ou les attributs <code class='spip_code' dir='ltr'>h1</code> seront de
couleur rouge (color : Red ;) et aurons une bordure fine entière Bleu marine
(border-bottom : thin solid Navy ;)</p>

<h3>Stylons notre page HTML</h3>
<p class="spip">Il n’existe pas de régle ou de norme pour l’organisation d’une feuille de
style, par habitude et aussi dans le soucis de pouvoir me relire plus tard,
je fais mes feuilles selon un schéma simple :</p>

<p class="spip"><em>Exemple d’une feuille de style</em> :</p>

<p class="spip"><code class='spip_code' dir='ltr'>/*</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* @ nom : style01.css</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* @ site : http://www.monsite.fr</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* @ auteur : marc Poiroud</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* @ contact : marciun@free.fr</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* @ licence : Creative Commons</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* date de création : juillet 2004</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>* date de MAJ : 2004-07-27</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>*/</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>/*style des éléments */</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>html, body {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>h1, h2, h3, hn {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>p {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>a {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>a:hover {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>...</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>/*style de l'entete*/</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>.class p {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>...</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>/*style colonne droite*/</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>.classtruc h5 {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>...</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>/*style cadre article*/</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>#idmachin {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>...</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>/*pied de page*/</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>.pied a {}</code></p>

<p class="spip"><code class='spip_code' dir='ltr'>...</code></p>

<p class="spip">Pour allez plus loin dans la réalisation de feuille de style, je joins 2 sites qui permetterons à tous de mieux maîtriser la rédaction d’une feuille de style</p>

<dl>
<dt><a hreflang="fr" href="http://mammouthland.free.fr/cours/css/index.php" title="Pour bien commencer">CSS débutants</a></dt>
<dd>Un site d’une trés grande qualité pédagogique, bien fait, clair, bref LE site pour bien commencer en douceur ...</dd>
<dt><a hreflang="fr" href="http://openweb.eu.org/css/" title="La page concernant les CSS sur OpenWeb">OpenWeb</a></dt>
<dd>Ce site est LA seul référence à avoir en tête pour faire un site conforme aux standards du web. Écris par des grands noms du web francophone, il est indispensable de le connaître.</dd>
</dl>