Tutoriel HTML

Les éléments du code HTML

Le HTML (HyperText Markup Language) est un langage utilisé pour la description de pages internet.
Un document HTML est composé d'une succession de balises (ou éléments) pouvant contenir différents attributs. Les balises sont délimitées par les caractères < et >. Les attributs d'un élément sont des paramètres que l'on peut définir pour modifier le comportement de la balise. Exemple :

<IMG src="http://thepoussin.free.fr/image.gif" alt="Une image">
Le contenu de la balise (délimité par < et >) contient : L'élément (ici IMG) ainsi que deux attributs (src et alt) qui permettent ici d'indiquer l'url de l'image à afficher et le texte de l'infobulle.

Certaines balises fonctionnent par paires : une balise ouvrante et une balise fermante. La balise fermante contient le nom de l'élément précédé de /.

<P align="center">Ceci est un exemple</P>

<P align="center"> est la balise ouvrante et contient les attributs.
</P> est la balise fermante.

Le HTML ne fait pas la différence entre majuscules et minuscules mais il est bon par soucis de clarté de mettre les noms des éléments en majuscules et de mettre toujours la même casse pour les attributs.
Certaines balises fermantes (et parfois même ouvrantes) sont optionnelles et peuvent être omises.

Structure d'un document HTML

Un document HTML comporte trois parties :
- une ligne contenant les informations de version HTML,
- l'en-tête du document délimitée par l'élément HEAD
- le corps, qui comporte le contenu proprement dit du document, délimitée par l'élément BODY ou FRAMESET.

L'en-tête et le corps sont encadrés par l'élément HTML Voici un exemple de page simple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Mon premier document HTML</TITLE>
</HEAD>
<BODY>
<P>Ceci est une page simple.
</BODY>
</HTML>

Informations de version HTML

Un document HTML doit déclarer la version HTML qui est utilisée dans le document dans la définition de type de document (DTD). Il y a trois DTD différentes suivant ce qu'ils gèrent :

DTD strict (ni éléments ou attributs déconseillés ni cadres) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DTD transitoire (DTD strict plus les éléments et attributs déconseillés) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DTD de jeu d'encadrement (DTD transitoire plus les cadres) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

En-tête du document

L'en tête d'un document peut contenir plusieurs balises :

<TITLE>Titre de la page</TITLE> : pour donner un titre à la page (celui qui s'affiche dans la barre de titre de la fenêtre et dans la barre des tâches).

<BASE href="url de base"> : indique quel est l'url de base utilisé pour les liens et les URL indiquées dans la page. Par exemple si l'url d'un fichier est http://www.domaine.com/dossier/truc/fichier.htm et que l'url de base est http://www.domaine.com/dossier/ on pourra accéder au fichier en mettant comme url dans une balise de lien truc/fichier.htm. Par défaut l'url de base est l'url du dossier qui contient la page. Noter que la balise BASE doit être placée dans la balise HEAD avant tout url.

Les balises META : elles permettent de donner des informations sur le document (auteur, mots-clés, langue...). Certains moteurs de recherche les utilisent pour répertorier et classer les pages Internet.
Les META ne sont pas indispensables mais certains sont tout de même bons à préciser, comme la langue ou le jeu de caractères utilisé (Windows, Unicode, ...). Elles n'affectent en rien l'apparence de la page.
Un META contient classiquement deux attributs : name ou http-equiv qui spécifie de quoi il s'agit et content qui indique quelle est la valeur pour l'élément spécifié par name ou http-equiv.

Voici quelques exemples de META et leur fonction. Le premier est indispensable, pour les autres ça ne sert pas à grand chose de les retenir :D :
<META http-equiv="Content-Type" content="text/html; charset=windows-1252"> : indique le jeu de caractères utilisé.
<META http-equiv="Content-Language" content="fr"> et <META name="Language" content="fr"> : indiquent que la page est en français.
<META name="Title" content="Titre de ma page"> : indique le titre de la page.
<META name="Author" content="Le poussin"> : indique l'auteur de la page.
<META name="Robots" content="index,follow"> : indique aux robots des moteurs de recherche de poursuivre pour indexer les pages.
<META name="Description" content="Quelques trucs"> : une description de la page.
<META name="Keywords" content="HTML,balises,META"> : des mots-clés concernant la page.

Les balises LINK : elles peuvent servir à trois choses distinctes dont deux vraiment pas utiles, je me demande même si certaines personnes en ont l'utilité. La troisième fonction en revanche est utile, elle permet d'intégrer un fichier CSS au document, mais étant en rapport avec le CSS nous en parlerons ultérieurement.

Les balises STYLE : elles permettent d'insérer du code CSS dans le document, on verra ça quand on traitera du CSS.

Corps du document

Le corps du document peut-être introduit de deux manières différentes :
- Par la balise BODY si le document ne comporte pas de frames
- Par la balise FRAMESET si le document comporte des frames

Comment marchent les frames

Le système des frames (ou cadres) permet de séparer la fenêtre en plusieurs parties, chaque partie affichant une page HTML différente. Ceci peut être utile par exemple pour faire une barre de navigation : une frame correspond à la barre de navigation et reste telle quelle, une autre frame affiche la page correspondant au lien cliqué dans la barre de navigation.

Avant de se lancer dans les frames il faut d'abord savoir en combien de lignes et/ou de colonnes la page sera séparée et déterminer la taille de ces lignes et/ou colonnes dans la balise FRAMESET.
L'attribut rows permet de déterminer le nombre de l'agencement des lignes.
L'attribut cols permet de déterminer le nombre de l'agencement des colonnes.

Dans les attributs rows et cols on précise les tailles des frames en les séparant par des virgules. La première taille correspond à la colonne de gauche ou la ligne du haut, les suivantes sont rangées dans l'ordre de la gauche vers la droite ou du haut vers le bas.
La taille peut être précisée de manière absolue (taille en pixels), par rapport au reste de la page non occuppé par les autres frames et en pourcentage de la largeur totale.

<FRAMESET rows="40%, 25%, 35%">

Il y aura trois lignes : celle du haut fera 40% de la hauteur totale, celle du milieu 25% et celle du bas 35%.

<FRAMESET cols="*,200px">

Il y aura deux colonnes, celle de droite fera 200 pixels de large et celle de gauche occuppera tout le reste.

<FRAMESET rows="50%,50%" cols="50%,50%">

La page sera séparé en quatre parties de même taille.

<FRAMESET cols="*,50px,30%,2*", >

Il y aura quatre colonnes. La deuxième fera 50 pixels de large, la troisième 30% de la largeur totale. La première et la dernière frame se partageront le reste, la quatrième frame ayant pour taille 2* elle sera deux fois plus grande que la première (qui a pour taille *).

Enfin, il est possible d'imbriquer plusieurs balises FRAMESET (mais l'utilité ne doit se faire sentir que très rarement, et encore...) :

<FRAMESET cols="33%, 33%, 34%">
... contenu de la première frame ... <FRAMESET rows="40%, 50%"> ... contenu de la deuxième frame, première ligne ... ... contenu de la deuxième frame, deuxième ligne ... </FRAMESET> ... contenu de la troisième frame ... </FRAMESET>

Maintenant que l'on a définit l'agencement des frames il faut préciser chaque frame à l'aide de balises FRAME (pas la peine de chercher loin pour le nom :D).

Une balise FRAME comporte les attributs suivants :
name : donne un nom à la frame qui sera utilisé pour les liens, pour savoir où la page d'un lien s'affichera (on verra ça plus en détails par la suite).
src : chaque frame chargeant une page différente, cet attribut spécifie quelle page est chargée dans la frame initialement.
noresize : s'il est mis cet attribut indique que la frame ne peux pas être redimensionnée.
scrolling : détermine l'affichage ou non de barres de défilement, peut prendre les valeurs suivantes :
- auto : le navigateur affiche des barres de défilement si nécessaire
- yes : le navigateur affiche des barres de défilement
- no : le navigateur n'affiche pas de barres de défilement
frameborder : si la valeur donnée est 1 (valeur par défaut) une bordure séparera la frame des frames voisines, si la valeur est 0 il n'y aura pas de bordure (sauf si une frame voisine les affiche)
marginwidth : valeur qui indique la taille des marges gauche et droite en pixels de la frame.
marginheight : valeur qui indique la taille des marges supérieure et inférieure en pixels de la frame.

<FRAMESET cols="200px,*">
<FRAME name="bidule" src="page.htm" noresize marginwidth="5">
<FRAME name="machin" src="dossier/truc.htm" scrolling="no">
</FRAMSET>

Cet exemple affichera deux frames. La première de 200 pixels de large, non redimensionnable, de nom "bidule", de marges latérales 5 pixels et dans laquelle sera chargée la page "page.htm". La seconde page occuppe le reste de la page, n'a pas de barre de défilement et charge la page "dossier/truc.htm".

Voilà tout pour le moment. La prochaine fois j'ajouterai la description des balises principales utilisées dans le corps du document (dans la balise BODY). Là y'a certains trucs c'est pas mal de blabla, dans la pratique soit on n'utilise pas, soit c'est toujours la même chose et y'a donc pas trop à réfléchir.

Principales balises du corps de document

Nous allons maintenant voir quelles sont les principales balises utilisées, leurs fonctions, leur principaux attributs. Il s'agit d'un tour d'ensemble, pour une présentation détaillée se référer à l'aide officielle.

Insérer un lien : la balise A

Cette balise balise sert principalement à insérer un lien hypertexte dans un document. On indique l'url du lien avec l'attribut href.

Lien vers <A href="http://thepoussin.free.fr">le site thepoussin</A>.

Ce code donnera ceci :

Lien vers le site thepoussin.

La balise A peut aussi être utilisée pour faire une ancre à l'aide de l'attribut name (cet attribut peut être placé dans une balise A qui contient déjà l'attribut href). Une ancre est un genre de signet qui permet d'accéder directement à une partie de la page.

Pour indiquer dans un lien d'accéder à une ancre on ajoute à l'url une dièse (#) suivie du nom de l'ancre (ou directement la dièse plus le nom de l'ancre si l'ancre est située dans la page courante).

<P><A name="ancre">Le lien amènera ici</A><BR>
<A href="#ancre">Lien vers la ligne du haut</A>

Ce code donnera ceci :

Le lien amènera ici.
Lien vers la ligne du haut

Une ancre peut également être créée avec l'attribut id accepté par la quasi-totalité des balises du corps du document (BODY). L'avantage d'id est de pouvoir servir pour les scripts javascript, mais il n'est pas reconnu par les navigateurs trop anciens et permet de mettre moins de noms que l'attribut name de la balise A.

<P><A name="ancre">Le lien amènera ici</A>. équivaut à <P id="ancre">Le lien amènera ici.

Un nom d'ancre doit commencer par une lettre (A-Z, a-z) qui peut être suivie de lettres, chiffres (0-9), tirets (-), traits de soulignement (_), deux-points (:) et points (.).

Afficher une image : la balise IMG

Une autre balise très utile puisqu'elle permet de mettre des images dans un document.

Les principaux attributs sont :

src : indique l'url de l'image à afficher

width et height : indique la largeur et la hauteur de la zone qui contient l'image. Ces attributs ne sont pas indispensables mais permettent dans le cas où les images sont longues à charger (ou risquent de ne pas s'afficher) de conserver la mise en page, le cadre qui contient l'image même si elle n'est pas affichée. Il permet aussi de forcer une image à s'afficher à la taille voulue.

alt : indique le texte de l'infobulle à afficher. Toute balise IMG DOIT contenir cet attribut. Si vous ne voulez pas mettre d'infobulle mettez alt="" (aucun texte).

Créer un tableau : les balises TABLE, TR et TD

En HTML un tableau est introduit par la balise TABLE. On insère une ligne avec TR et une cellule avec TD (les balises fermantes de ces deux éléments ne sont pas obligatoires). U

La struture classique d'un tableau est la suivante :

<TABLE>
 <TR>
  <TD>1re colonne, 1re rangée
  <TD>2e colonne, 1re rangée
  <TD>3e colonne, 1re rangée
 <TR>
  <TD>1re colonne, 2e rangée
  <TD>2e colonne, 2e rangée
  <TD>3e colonne, 2e rangée
</TABLE>

Principaux attributs de la balise TABLE :
width : indique la largeur du tableau en pourcentage de la largeur de la page ou en pixels.
border : indique la largeur de la bordure en pixels (vous pouvez préciser quelles bordures afficher ou non avec les attributs frame et rules, tout est expliqué ici).
cellspacing : indique l'espace entre les cellules ainsi que l'espace entre les cellules et le bord du tableau.
cellpadding : indique l'espace entre le contenu de la cellule et la bordure de la cellule.

Petit schéma explicatif

Principaux attributs de la balise TR :
align : indique l'alignement horizontal du texte dans la cellule : left à gauche, center centré (valeur par défaut), right à droite, justify justifié.
valign : indique l'alignement vertical du texte dans la cellule : top en haut, middle, au milieu (valeur par défaut), bottom en bas, baseline la première ligne de toutes les cellules qui ont cette valeur et qui appartiennent à la même rangée auront le même alignement (ne sert pas vraiment à grand chose).

Principaux attributs de la balise TD :
align et valign : identique à la balise TR.
rowspan : indique le nombre de lignes que couvre la cellule. La valeur par défaut est 1. La valeur 0 signifie que la cellule s'étale de la ligne courante à la dernière ligne.
colspan : indique le nombre de colonnes que couvre la cellule. La valeur par défaut est 1. La valeur 0 signifie que la cellule s'étale de la colonne courante à la dernière colonne.

Il existe d'autres balises relatives aux tableaux pour permettre de faire des groupes de colonnes, des sections, des en-têtes et autres mais c'est moins important car peu ou pas utile dans la majorité des cas.

Placer une liste, ordonnée ou non :

Il existe trois types de listes différentes :

  1. ceci est
  2. une liste
  3. ordonnée
Liste non-ordonnée
On utilise la balise UL
Chaque élément est introduit par la balise LI
Liste ordonnée
On utilise la balise OL
Chaque élément est introduit par la balise LI
Liste de définition
On utilise la balise DL
Chaque terme est introduit par la balise DT
Chaque définition est introduite par la balise DD
Cette liste est une liste de définitions

Voici dans l'ordre, une liste non-ordonnée, une liste ordonnée, une liste de définitions. Ci-dessous, le code qui a servi à faire ces trois listes :

<UL>
<LI>ceci est
<LI>une liste
<LI>non-ordonnée
</UL>

<OL>
<LI>ceci est
<LI>une liste
<LI>ordonnée
</OL>

<DL>
<DT>Liste non-ordonnée
<DD>On utilise la balise <CODE>UL</CODE>
<DD>Chaque élément est introduit par la balise <CODE>LI</CODE>
<DT>Liste ordonnée
<DD>On utilise la balise <CODE>OL</CODE>
<DD>Chaque élément est introduit par la balise <CODE>LI</CODE>
<DT>Liste de définition
<DD>On utilise la balise <CODE>DL</CODE>
<DD>Chaque terme est introduit par la balise <CODE>DT</CODE>
<DD>Chaque définition est introduite par la balise <CODE>DD</CODE>
<DD>Cette liste est une liste de définitions
</DL>

Pour UL, OL et DL les balises fermantes sont obligatoires. Pour LI, DT et DD elles sont facultatives. Enfin il est possible d'imbriquer des listes, par exemple :

<UL>
 <LI>Voici
  <OL>
   <LI>un exemple de
   <LI>listes ordonnées
  </OL>
 <LI>qui sont
  <OL>
   <LI>imbriquées dans une
   <LI>liste non-ordonnée
  </OL>
</UL>

Qui donnera ceci :

L'ensemble de ces balises acceptent des attributs qui sont tous déconseillés (exceptés quelques attributs communs à presque toutes les balises HTML), donc ne rentrent pas dans le cadre de l'HTML strict. Le CSS c'est substitué à ces attributs en proposant plus de possibilités.

Les principales balises de mise en forme

Les balises que nous avons vues jusqu'à maintenant ont une fonction bien précise (insérer un lien, créer un tableau, ...). Il existe un autre type de balises qui se contente d'appliquer une mise en forme au texte.

Commençons par celles qui sont le plus utilisées :
La balise I permet de mettre en italique.
La balise B permet de mettre en gras.

Du texte <I>en italique</I> et du texte <B>en gras</B>

Cet exemple donnera ceci : Du texte en italique et du texte en gras

Les balises H1, H2, H3, H4, H5 et H6 permettent de mettre de des titres de niveau 1 à 6.

<H1>Titre de niveau 1</H1>
<H2>Titre de niveau 2</H2>
<H3>Titre de niveau 3</H3>

Cet exemple donnera ceci :

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Par défaut les différents niveaux de titres ont une mise en forme particulière assez simple et basique mais il est possible de la modifier grâce au CSS comme nous le verrons par la suite.

Pour mettre en indice ou en exposant une partie de texte utilisez
la balise SUB pour mettre en indice,
la balise SUP pour mettre en exposant (utile pour écrire 1er en abrégé par exemple).

Voici du texte en <SUB>indice</SUB> et du texte en <SUP>exposant</SUP>.

Cet exemple donnera ceci : Voici du texte en indice et du texte en exposant.

Il existe d'autres balises pour mettre en forme un texte parfois en fonction du type de texte (pour une citation, un bout de code informatique ou encore, ...). Mais elles ne sont quasiment jamais utilisées et n'ont leur utilité que dans des cas assez spécifiques, c'est pourquoi nous en ferons l'économie.

Les feuilles de style : le CSS

Le CSS offre de nombreuses possibilités pour modifier l'apparence un document de manière efficace (mise en forme, mise en page, ...) en proposant un grand nombre de propriétés que l'on peut spécifier à volonté.

Les éléments du CSS

Un fragment de code CSS est constitué de deux parties principales : les sélecteurs et les déclarations. La déclaration se décompose elle-même en deux parties : la propriété et la valeur.
Les sélecteurs indiquent sur quoi portent les déclarations et la valeur spécifie une valeur pour la propriété.

H1 { color: blue }
Dans cet exemple H1 est le sélecteur et color: blue est la déclaration. Dans la déclaration, color est la propriété et blue la valeur.

Les accolades ({ et }) délimite un "bloc de déclaration" qui permet de regrouper plusieurs déclarations. Ainsi

H1 { color: blue }
H1 { font-size: 15pt }
H1 { font-weight: bold }

peut avantageusement être remplacé par :

H1 {
  color: blue;
  font-size: 15pt;
  font-weight: bold
}

Les blancs ne sont là que pour améliorer la lisibilité, il est possible de toute mettre sur la même ligne. En revanche les points-virgules sont indispensables pour séparer chaque déclaration.

Chaque propriété accepte une variable d'un certain type, par exemple on ne peut pas mettre une taille en pixels ou un nom de police pour la propriété color (qui demande une couleur). Il existe également des mots-clés qui correspondent à une valeur particulière. Par exemple red désigne la couleur rouge, none peut-être utilisé dans plusieurs contextes pour désigner qu'il ne faut rien mettre, ... Les mots clés ne doivent jamais être encadrés par des guillemets. Si un élément voit une de ses propriété se faire affectée plusieurs fois c'est la dernière valeur qui est retenue.

Certaines propriétés acceptent plusieurs valeurs simultanéments. Par exemple pour déterminer les marges vous pouvez soit spécifier chaque marge une par une ou tout mettre dans la même propriété :

P {
  margin-top: 10pt;
  margin-right: 20pt;
  margin-bottom: 10pt;
  margin-left: 20pt;
}

équivaut à :

P { margin: 10pt 20pt 10pt 20pt }

(et en simplifiant encore plus à : P { margin: 10pt 20pt }).

Les principaux types de valeurs

Les longueurs

Une longeur est composée d'un nombre et d'une unité collée au nombre. L'unité est importante, sans elle le navigateur ne pourra pas savoir s'il s'agit de pixels, de points ou d'une autre unité. Il peut aussi bien s'agit de longueur horizontales que verticales. Il est possible de mettre des valeurs décimales (1.2, 1.6, ...).

Voici les unités :
px : à utiliser pour indiquer une valeur en pixels.
pt : point -- le point de CSS2 est égal à 1/72 de pouce.
em : la valeur de l'em est fixée par la taille de la police. Si le texte est en 13pt on aura 1em = 13pt, 2em = 26pt, etc.
ex : là encore la valeur est fixée par la taille de la police. 1ex correspond à la hauteur des lettres (sans compter les accents et ce que dépasse de la ligne par le bas), c'est à dire la hauteur d'un x minuscule.

Il existe aussi quatres unités quasiment jamais utilisées :
cm : centimètre.
mm : millimètre.
pc : pica. Un pica est égal à 12 points.
in : pouce (inch). Un pouce est égal à 2,54 cm.

Et maintenant quelques exemples pour illustrer tout ça :

P  { font-size: 15px }
H4 { font-size: 12pt }
H1 { margin: 0.5em }
H2 { margin: 1ex }

Les pourcentages

La syntaxe est simple : un nombre suivit du symbole %. Un pourcentage est toujours relatif à une autre valeur (une longueur par exemple), la valeur qui sert de référence dépend de la propriété. Par exemple dans l'exemple ci-dessous la propriété line-height a pour valeur 120% de la valeur affectée à font-size, c'est-à-dire 120% * 10pt = 12pt.

P { font-size: 10pt }
P { line-height: 120% }

Les URLs

Pour indiquer un URL on utilise url() comme dans l'exemple ci-dessous (les guillemets sont facultatifs) :

BODY { background: url("http://www.site.com/fond.jpg") }

On peut également utliser un URL relatif :

BODY { background: url("fond.jpg") }
L'URL désigne :
http://www.site.com/style/fond.jpg si le code CSS est placé dans le fichier css http://www.site.com/style/essai.css
http://www.site.com/images/fond.jpg si le code CSS est placé dans la page HTML dont la base URL est http://www.site.com/images/

Les couleurs

Il y a deux manières d'indiquer une couleur : par un mot clé ou par une valeur numérique RGB.

Les 16 mots-clés de couleurs correspondent à 16 couleurs "classiques" : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow

La valeur numérique RGB peut s'indiquer de trois manières différentes :
#rrggbb : rr, gg et bb sont les valeurs héxadécimales des niveaux de rouge de vert et de bleu.
#rgb : équivaut à #rrggbb (par exemple #50f équivaut à #5500ff).
rgb(rouge,vert,bleu) : rouge vert et bleu désignent la quantité de chaque couleur en décimal (exemple : rgb(255,128,255)) ou en pourcentage (exemple : rgb(100%,50%,100%)).
(Les valeurs décimales vont de 0 à 255 et les valeurs héxadécimales de 00 à ff.)

Exemples :

H2 { color: olive }
EM { color: #ff0000 }
EM { color: rgb(100%, 0%, 0%) }

Les sélecteurs

Les sélecteurs ont pour objectif de déterminer les éléments qui seront affectés par les déclarations contenues dans le bloc. Avant de se lancer dedans il faut d'abord voir que l'imbriquement des éléments dans une page HTML permet de d'établir une arborescence entre les balises.

Voici un exemple de document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>   
  <TITLE>Une page</TITLE>
  <BODY>
    <H1>Une page</H1>
    <P>Ce qu'il y a sur cette page :
    <UL>
      <LI>Rien
      <LI>Toujours rien
      <LI>Jamais rien
    </UL>
  </BODY>
</HTML>

Et maintenant voici son "arbre" qui permet de se rendre compte de la hiérarchisation des éléments :

Comme pour un arbre généalogique on utilise les termes de parent, enfant, frère, ancêtre et descendant (on remarque que chaque élément n'a qu'un seul parent).
Exemples : BODY est le parent de H1, TITLE est un enfant de HEAD, P et H1 sont frères (on dit même que H1 est le frère précédent de P car il apparaît avant lui), HTML est l'ancêtre de tout le monde et chaque LI est descendant de BODY.

Maintenant que les présentations sont faites voyons comment les principales manières d'associer des sélecteurs. Ces méthodes sont bien entendu combinables.

Les sélecteurs de types correspondent au nom d'un type d'élément HTML :
H1 { color: red } indique que tous les éléments H1 (titres de niveau 1) seront en rouge.

On regroupe des sélecteurs avec des virgules, tous les sélecteurs se verront affecter les déclarations.

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

équivaut à :

H1, H2, H3 { font-family: sans-serif }

Les sélecteurs descendants permettent d'affecter les déclarations aux descendants d'un certain d'un certain type. Pour cela on place l'élément ancêtre suivit de l'élément descendant à modifier (séparés par un espace).

On a ce code HTML :

<H1>Un <EM>titre</EM> inutile</H1>
<P>Un <EM>paragraphe</EM> bidon

et on applique ce code CSS :

H1 EM { color: red }

Alors "titre" sera écrit en rouge car l'élément EM qui l'encadre est dans un élément H1. Par contre "paragraphe" ne sera pas affecté car il n'est pas dans un élément H1.

Le sélecteur universel * désigne tous les éléments. (Les blancs encadrant * sont facultatifs.)

H1 * { color: red }

aura pour effet de mettre en rouge tous les descendants des balises H1 (mais pas la balise H1 elle même).

Les sélecteurs de classe permettent d'affecter tout élément dont l'attribut class contient le nom de classe spécifié. Le nom de classe doit être précédé d'un point. On peut affecter plusieurs classes à un élément en mettant plusieurs noms séparés par des espaces (class="classe1 classe2 ...").

H1.essai { color: red }
affectera <H1 class="essai">Titre</H1>
et <H1 class="machin essai">Titre</H1>
mais pas <H1 class="bidule">Titre</H1>.

.essai { color: red }
affectera tous les éléments dont l'attribut class contient "essai", quelque soit le type de balise.

H1.essai.bidule { color: red }
affectera <H1 class="essai bidule">Titre</H1>
mais pas <H1 class="bidule">Titre</H1>.

Les pseudo-éléments et les pseudo-classes permettent d'attribuer des propriétés à un élément selon des critères intéressants.

Ces deux pseudo-classes n'existent que pour l'élément A :
:link désigne le lien dans son état normal (rien de particulier),
:visited désigne le lien sur lequel on a déjà cliqué.

Les pseudo-classes suivantes existent pour plusieurs éléments (en particulier l'élément A :
:hover désigne un élément quand le curseur de la souris est dessus,
:active désigne un élément qui a été activé (par exemple un lien sur lequel on vient de cliquer),
:focus désigne l'élément qui reçoit les événements du claviers (par exemple la zone de texte qui va se remplir si on tappe quelque chose).

Les deux pseudo-éméments suivant ne sont utilisables quasiment qu'avec l'élément P
:first-line produit un style particulier sur la première ligne du paragraphe
:first-letter produit un style particulier sur la première lettre du paragraphe (pour faire une lettrine par exemple).

P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
				font-weight: bold; float: left }
SPAN           { text-transform: uppercase }

Pourrait apparaître de cette manière :

Certaines pseudo-classes sont combinables (exemple : A:focus:hover { background: white }).
Il est possible d'utiliser les classes conjointement aux pseudo-classes et pseudo-éléments. Dans ce cas on place la classe avant :
A.lien:visited { color: blue }.

Introduire du CSS dans un document HTML

Il ne reste maintenant plus qu'à savoir où et comment insérer le CSS dans le document HTML. Il existe trois manières différentes, ces méthodes sont complémentaires et s'utilisent à différents niveaux.

En plaçant le CSS directement dans les balises voulues.
En utilisant l'élément STYLE dans l'en-tête du document.
En incluant un fichier CSS indépendant du fichier HTML.

Le CSS dans les balises

Le CSS s'utilise directement dans le corps de la page grâce à deux attributs acceptés par la quasi-totalité des balises.

L'attribut style permet de faire une liste de déclarations CSS (taille de la police, couleur du fond, épaisseur d'une bordure, ...), le contenu de l'attribut style correspond à ce qui est placé entre les accolades.

<P style="font-size: 12pt; color: red">Voici un exemple.

Ce code affichera ceci :

Voici un exemple.

L'attribut class permet d'affecter au contenu de la balise la mise en forme d'une classe comme nous l'avons vu plus haut.

Il est également possible d'attribuer une mise en forme à un groupe de balises ou a une portion de texte à l'aide de :
la balise DIV pour affecter un bloc (plusieurs paragraphes par exemple),
la balise SPAN pour n'affecter qu'une partie de texte à l'intérieur d'une balise (contenu dit en-ligne).

(DIV s'utilise à un niveau plus élevé dans l'arbre que SPAN.)

<DIV style="font-face: Comic Sans MS">
<P>Cet exemple utilise <SPAN style="font-weight: bold">la balise SPAN</SPAN>
<UL>
<LI>Mais aussi
<LI>la <SPAN style="color: red">la balise DIV</SPAN>
</UL>
</DIV>

Cet exemple donnera ceci :

Cet exemple utilise la balise SPAN

Le CSS dans l'en-tête du document

On a souvent besoin que toutes les balises du même élement (toutes les balises A ou toutes les balises P par exemple) aient la même mise en forme. Il serait long et fastidieux de devoir spécifier la mise en forme dans chacune des balises, c'est pourquoi le CSS permet de spécifier une mise en forme pour des groupes d'élément répondant à certains critères communs.

Pour cela on utilise la balise STYLE de la manière suivante :

<STYLE type="text/css">
code CSS
</STYLE>

Le code CSS à placer doit contenir des sélecteurs et des blocs de déclarations. Par exemple :

BODY, H1 { font-family: Arial }

BODY {
	background: white;
	margin-left: 10px
}

P {
	margin-top: 0
	margin-bottom: 6pt;
}

H1 {
	color: black;
	font-size: 22pt;
	text-align: center;
	font-weight: bold;
}

Le CSS dans un fichier séparé

Il est possible de placer le code CSS de la balise STYLE dans un fichier CSS (extension .css) puis de l'inclure au document HTML en utilisant l'élément LINK qui se place dans l'en-tête (balise HEAD).

La syntaxe est la suivante : <LINK rel="stylesheet" type="text/css" href="url du fichier CSS">

Par exemple la balise HEAD de ce tutoriel inclut le fichier global.css grâce à cette ligne :
<LINK rel="stylesheet" type="text/css" href="global.css">

Un fichier CSS peut également être chargé à partir d'un autre fichier CSS où dans une balise STYLE en plaçant ce code :
@import "url du fichier CSS";

Combiner efficacement les trois manières d'inclure le CSS

Utiliser des fichiers séparés présente plusieurs avantages :

Les deux autres méthodes ne sont pas pour autant à proscrire. La balise SCRIPT est utile si le code CSS ne sert que pour la page dans laquelle elle est placée. Le CSS directement dans les balises au moyen de l'attribut style est très pratique si une certaine mise en forme n'est utilisée que localement où à très peu d'endroits.

Ainsi en combinant les trois méthodes il est possible de créer une interface claire, facilement modifiable et rapidement accessible.

Voilà tout pour l'instant. La suite du tutoriel présentera les propriétés CSS les plus utilisées.