Vous êtes ici : page principale > Documentation sur les CSS > cours CSS

Cours CSS et XHTML


Comment passer au nouvel Internet ?
  • Avec les CSS bien sûr .....

Cette page est un résumé d'un cours express délivré en 1h30 par Jean-Pascal MILCENT de Tela-Botanica, complété par les lectures de Tamara Le Bourg ....

  • petit historique des langages Internet.
  • comment utiliser le HTML avec des feuilles de styles CSS ?
  • comment passer au CSS et au (X)HTML ?

Petit historique et définitions

Parmi les premiers langages "à balise" utilisés pour rédiger des documents, il y a eu le SGML, puis deux sous-ensemble s'en sont détachés le HTML et le XML.

Le XML se caractérise par une définition des balises, des règles qu'elles devront respecter et de la mise en page par le programmeur lui-même. C'est un simplification du SGML mais cela reste un standard avec des règles précises.

Le HTML a été une simplication provenant directement du SGML. Cette simplification était telle qu'elle rendait difficile l'interprétation d'un même document par différents outils. Le HTML ne respectait pas les règles de base (et facile à appliquer) défini par le XML.
Ainsi, la norme XHTML est apparue. Le XHTML est plus rigoureux que le HTML (à présent il faut être attentif à tout écrire en minuscules, à fermer systématiquement les balises et mettre des guillemets aux attributs) car il reprend les règles du XML appliquées aux balises HTML.

Pourquoi utiliser les styles pour la mise en page

Pour la mise en page des pages, il y a eu l'utilisation de cadres (frames), puis de cellules de tableaux (tables). Mais dans ces configurations, le contenu et la mise en page sont mêlés.
A présent, l'ère du web sémantique est ouverte : les balises prennent un sens en rapport avec le contenu. Les CSS (Cascading Style Sheets) s'inscrivent dans cette mouvance. CSS est un langage déclaratif simple pour mettre en forme des pages HTML ou des documents XML.
Les avantages des CSS sont l'homogénéité et la cohérence de la mise en page des pages d'un site : quand le webmaster veut modifier la charte graphique de son site : il n'aura qu'a modifier la déclaration de ses feuilles de styles et cela s'appliquera automatiquement à l'ensemble des pages du site.

Le (X)HTML structure la page Web. (X)HTML et CSS sont intimement liés : une feuille de style est composée de règles qui décrivent la mise en page des éléments des pages (X)HTML. Ces éléments vont être agencés par des divisions qui organisent l'espace de la page.
Une feuille de style (fichier .css) peut être ouverte et modifiée avec un simple éditeur de texte (ex : gEdit ou wordpad...).

Comment utiliser les styles ?

Voyons un peu concrètement comment mettre en place ce type de programmation.

Un style peut être affecté de trois façons différentes en HTML :

l'attribut style de l'élement auquel on souhaite appliquer le style
Par ex pour appliquer un style à l'élément <p> :
<p style="background-color:yellow;color:red;">Texte à afficher</p>
soit le résultat suivant :

Texte à afficher


l'élément <style>
L'exemple précédent deviendrait :
<style> p {background-color:yellow;color:red;}</style>
<p>Texte à afficher</p>
soit le résultat identique :

Texte à afficher


une feuille de style externe
Il est plus fréquent de créer une feuille de style externe, plutôt que de répartir des blocs de code de style internes dans un document html.
On va donc dans ce cas là complètement séparer d'un côté le contenu (fichier html) et de l'autre les éléments qui donneront à ce contenu son apparence (fichier css).
Pour appeler la feuille de style depuis le document html :
il faut placer dans le <head> de la page soit :
  • une balise <link> du type : <link type="text/css" rel="stylesheets" href="ma_feuille_de_style.css">
  • @import (n'est compris que par les navigateurs les plus récents... : ne marche pas avec Netscape 4 et IE4)

Pour importer plusieurs feuilles de style sur une même page :
  • avec @import : pas de problème
  • avec <link> : il faut que les attributs media et title aient la meme valeur :
<link rel="stylesheet" type="text/css" media="screen" title="essai" href="../sites/admin/fr/styles/admin.css">
<link rel="stylesheet" type="text/css" media="screen" title="essai" href="presentations/css/debogage.css" />

Pour les stylesheets alternative, il faut obligatoirement utiliser : <link rel="alternate stylesheet" ...
(l'url dans href peut être relative ou absolue)

A savoir
Dans le cas de l'utilisation de l'élment <style> : si on définit deux fois (ou plus), à deux (ou plus) endroits différents du fichier html, un même style mais avec des règles différentes, c'est le dernier défini qui s'applique automatiquement sur toute la page.
Dans le cas de l'utilisation d'une feuille de style externe, toute règle présente dans le document html aura la priorité sur une règle correspondante dans la feuille de style associée.

Feuille de style externe et fichier html : séparer la forme du contenu

au sein du fichier html

Il est important de tenir compte de l'accessibilté des pages. C'est pourquoi il est nécessaire d'écrire le contenu en mode texte en affichant successivement et sans forme le logo du site, le plan du site, le moteur de recherche, les accessibiltés (accesskeys) ; puis le contenu et enfin le menu pour la navigation.
On va insérer les balises <div> qui permettront la mise en page avec les feuilles de style. Dans la balise <div> il y a 2 principaux types d'attributs :
  • "id" qui permet de définir le style pour des éléments qui apparaissent une seule fois au sein d'une page ;
  • "class" qui permet de définir le style pour des éléments qui apparaissent plusieurs fois au sein d'une page. On va également pouvoir utiliser des balises <span> pour spécifier certains éléments (ex : noms latin).

au sein du fichier css

On va définir les attributs
  • "id" sera défini#titre par exemple ;
  • "class" sera défini .liste par exemple ;
mais également l'ensemble des balises html.

La feuille de style

Les classes (l'attribut class)

La déclaration d'une classe débute par un point :
<style>
  • .classe1 {background-color:yellow;color:red}
</style>
Un commentaire dans une feuille de style sera délimité par <!-- et --> (comme en html) ou bien par /* et*/ (comme en JavaScript)

Le document html

Les classes (l'attribut class)

L'utilisation des classes se fait par l'ajout de l'atribut class à l'élément souhaité. Par exemple :
<p class="classe1">Texte à afficher</p>

Pour en savoir plus :