Vous êtes sur la page 1sur 98

Partie 1 : Passer du HTML au XHTML

Partie 2 : Les feuilles de styles CSS

● Leçon 1 : Qu'est-ce que CSS ?


● Leçon 2 : Comment CSS fonctionne-t-il ?
● Leçon 3 : Les couleurs et les arrières-plans
● Leçon 4 : Les polices
● Leçon 5 : Le texte
● Leçon 6 : L'identification et le regroupement d'éléments (class et id)
● Leçon 7 : Les liens
● Leçon 8 : Le regroupement d'éléments (span et div)
● Leçon 9 : Margin et padding
● Leçon 10 : Les bordures
● Leçon 11 : Mise en boîte
● Leçon 12 : Une couche sur une couche avec z-index (les couches)
● Leçon 13 : Les standards du Web et la validation
● Leçon 14 : Les tableaux
● Leçon 15 : Les formulaires
● Travaux pratiques : Design d'une page CSS

Annexe 1 : Les DTD HTML4.01 et XHTML1.0 : comment choisir ?

Annexe 2 : Liste des propriétés CSS


Partie 1 : Passer du HTML au XHTML
Les règles à suivre pour passer de la syntaxe HTML à la norme XHTML.

Introduction

Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des
documents Web. Que vos pages existantes soient actuellement conformes ou non aux différentes versions du HTML
importe peu. Vous allez rapidement constater que les convertir en XHTML n'est pas sorcier du tout. En effet, puisque
le XHTML n'est rien de plus que du HTML reformulé de façon à respecter les règles strictes du XML, il ne vous suffit
que d'apprendre quelques règles syntaxiques propres à XML pour commencer à coder selon les normes du W3C.

Tout ce qui vous sépare de votre but, c'est un peu moins d'une dizaine de petites lois et quelques principes
d'application. Issues de la spécification XML, ces lois permettent une séparation logique entre les aspects de
structure et de présentation dans un document Web. Car voilà réellement ce qu'est le XHTML : un pont entre le
HTML (le langage d'hier) et le XML (le langage de demain).

Chaque balise nécessite une fermeture

Dans les premières heures du HTML, on pouvait se permettre d'être relativement brouillon dans la façon d'organiser
son code. Maintenant, selon les règles plus strictes du XML, il n'y a plus de place pour une telle permissivité ; ainsi,
toutes les balises présentes dans un document Web doivent dorénavant être correctement fermées : il ne faut jamais
oublier d'ajouter la balise de fermeture d'un élément quand celle-ci existe :

Invalide :

<p>Lorem ipsum dolor sit amet. Praesent vel justo.

Valide :

<p>Lorem ipsum dolor sit amet. Praesent vel justo.</p>

Même celles qui n'en ont pas

En revanche, comment peut-on fermer ces autres éléments ne possèdant pas de balise de fin, comme les br et img ?
En leur inventant une balise de fermeture ? . Vous pourriez effectivement vous mettre à coder des <br></br> ou
des <img></img>, mais une telle pratique est déconseillée puisqu'il est possible que cela produise des résultats
inattendus dans certains navigateurs. Ce serait aussi un peu inutile puisque selon la syntaxe XML, il est possible de
simplement fermer un élément en lui attribuant une barre oblique (un slash) en fin de balise, comme ceci : <br />,
ou encore <img />. Cependant, si vous optez pour la seconde méthode, il ne faut pas oublier d'inclure un espace
entre le contenu de l'élément et la barre oblique, car autrement, les anciens navigateurs, en particulier Netscape 4.
x, ne pourront l'interpréter et l'ignoreront tout bonnement :

Incorrect :
<br>

Correct :

<br />

Imbriquer correctement les éléments

Quand on ouvre une série de balises en cascades, (les unes à l'intérieur de l'espace de définition des autres), il faut
obligatoirement les refermer dans l'ordre inverse de l'ordre d'ouverture pour respecter la structure logique interne
du document. Il faut toujours voir une balise HTML comme étant incluse dans une autre balise qui lui sert de parent.
Ainsi, dans l'exemple ci-dessous, l'élément strong, qui est un enfant direct de l'élément p, doit impérativement se
refermer à l'intérieur de l'élément qui le contient :

Invalide :

<p>Paragraphe avec texte en <strong>gras</p></strong>

Valide :

<p>Paragraphe avec texte en <strong>gras</strong></p>

Utiliser des minuscules dans les balises et leurs attributs

En HTML, on pouvait à loisir utiliser des majuscules ou des minuscules pour baliser nos documents. Certains voyaient
même en l'utilisation des majuscules un moyen efficace pour repérer le code HTML du contenu dans un document.
Avec XHTML, ce n'est plus possible ; puisque XML est sensible à la casse, toutes les balises et tous leurs attributs
doivent obligatoirement être écrits en lettres minuscules. C'est donc dire que les balises LI et li ne sont plus
identiques en XHTML, alors que c'était le cas en HTML. Les valeurs d'attributs, par contre, peuvent toujours être
écrites en majuscules :

Invalide :

<TEXTAREA ID="monTexte"></TEXTAREA>

Valide :

<textarea id="monTexte"></textarea>

Chaque valeur d'attribut doit être entre guillemets

Avec les versions antécédentes de HTML, le recours aux guillemets pour encadrer les valeurs d'attributs était
conseillé, mais pas obligatoire. Toujours selon les règles de XML, l'utilisation des guillemets n'est plus une
proposition, mais bien une obligation. De plus, il ne peut plus y avoir de saut de ligne dans la définition d'une valeur
donnée. Les caractères d'espacement (comme les espaces, les bris de lignes et les retours de chariots) sont
interprétés différemment de navigateurs en navigateurs. Lorsque des caractères d'espacement sont insérés dans les
valeurs d'attributs, les navigateurs tronquent ces espaces et les transposent en code ASCII, d'où parfois des résultats
imprévisibles. Afin d'éviter ces tracas, prenez simplement la bonne habitude de ne pas laisser d'espace dans vos
valeurs d'attributs :

Invalide :

<div id=monMenu></div>

Valide :

<div id="monMenu"></div>

Les formes abrégées d'attributs sont interdites

Certaines balises en HTML possédaient des attributs autonomes qui pouvaient être utilisés sans valeurs associées,
comme c'était par exemple le cas pour la balise input avec laquelle on pouvait utiliser les attributs "checked",
"disabled" et "readonly". Une pratique courante en HTML consistait donc à les déclarer de manière abrégée,
afin d'économiser le nombre de caractères, en spécifiant directement un attribut sans valeur associée dans une
balise HTML. En XHTML, cette pratique est révolue. Dorénavant, afin de rendre votre code valide, il vous faut
l'inscrire de manière complète, c'est-à-dire en spécifiant l'attribut et sa valeur associée, même si cela représente
une répétition :

Invalide :

<option value="page.html" selected></option>

Valide :

<option value="page.html" selected="selected"></option>

L'attribut "name" est remplacé par l'attribut "id"

L'attribut "name", utilisé en HTML pour nommer les ancres, les images ou tout autre objet dans un document Web
est remplacé par l'attribut "id" en XHTML. En effet, puisque le principe de nommer un objet revient à l'identifier et
que par définition, cet identifiant se doit d'être unique, le recours à l'attribut "id" permet de s'assurer que la
communication par le DOM avec un objet dans un document donné se fera individuellement. Malheureusement, le
support pour l'attribut "id" étant faible ou inexistant dans les anciens navigateurs, il importe (en XHTML 1.0) de
continuer à utiliser à la fois les attributs "name" et "id" pour désigner un même objet dans ces navigateurs, en leur
attribuant des valeurs identiques, de sorte que les navigateurs de nouvelle génération puissent y trouver leur compte
conformément aux règles de XML, tout en assurant une rétro-compatibilité avec les anciens navigateurs :

Invalide :
<h1 name="titre">…</h1>

Valide :

<h1 name="titre" id="titre">…</h1>

Ajoutons que l'attribut "name" des éléments a, applet, form, frame, iframe, img, et map est déprécié et ne
peut plus être employé en XHTML.

Conformité et type de document

Afin d'être conforme aux normes XHTML, outre les spécificités de syntaxe XML décrites précédemment, un document
doit respecter les règles suivantes :

Utilisation de la déclaration de type de document

Le document doit respecter les normes de validation d'une des trois DTD XHTML : strict, transitional ou
frameset. Une déclaration de type de document doit apparaître dans le document juste avant l'élément html (qui
est l'élément racine de tout document XHTML).

● La DTD stricte n'autorise pas l'utilisation des anciens éléments de présentation (s, u, etc.) mais elle a
l'avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de
maintenance que cela apporte.
● La DTD transitionnelle est plus permissive et plus proche des anciennes habitudes liées à HTML 3.2. Les balises
dépréciées en XHTML strict y sont autorisées : le recours à cette DTD est donc plus facile dans un premier
temps, mais avec le défaut de mêler encore partiellement structure et présentation.
● Enfin, la DTD frameset permet l'utilisation des cadres. Ceux-ci tombent en désuétude, mais peuvent se
réveler encore utiles dans certains cas très exceptionnels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

html, l'élément racine du document XHTML

L'élément racine d'un document doit impérativement être l'élément html et celui-ci se doit d'avoir un espace de
nom (namespace) utilisant l'attribut "xmlns" et une déclaration de la langue utilisée principalement dans le
document. Par exemple :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">


Gabarits prêts à l'emploi

Gabarit XHTML strict

Encodage ISO-8859-1 :

<?xml version="1.0" encoding="iso-8859-1"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Votre titre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

</head>
<body>
…votre code…
</body>
</html>

Encodage UTF-8 ou UTF-16 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Votre titre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />

</head>
<body>
…votre code…
</body>
</html>

Gabarit XHTML transitional

Encodage ISO-8859-1 :

<?xml version="1.0" encoding="iso-8859-1"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Votre titre</title>

<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />


</head>
<body>
…votre code…
</body>
</html>

Encodage UTF-8 ou UTF-16 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Votre titre</title>

<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />


</head>
<body>
…votre code…
</body>
</html>

Conclusion

Comme vous pouvez le constater, faire la transition vers le XHTML ne demande pas un grand effort d'adaptation et
vous ouvre les portes de la technologie XML. En y conformant vos documents dès aujourd'hui, vous assurerez la
pérennité de vos pages Web et commencerez dès lors à profiter des avantages induits par l'applications des standards
Web.
Partie 2 : Les feuilles de styles CSS

Leçon 1 : Qu'est-ce que CSS ?


CSS est l'abréviation de « Cascading Style Sheets ».

Qu'est-ce qu'on peut faire avec CSS ?


CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices,
les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évoluées
et bien d'autres choses.

HTML peut être (mal)utilisé pour la présentation des sites Web. Mais CSS offre plus d'options et se montre plus
précis et sophistiqué. CSS est pris en charge par tous les navigateurs actuels.

Quelle est la différence entre CSS et HTML ?


HTML sert à structurer le contenu, CSS sert à formater un contenu structuré.

La popularité du Web croissant, les concepteurs se mirent à rechercher des moyens pour ajouter de la
présentation aux documents en ligne. Pour satisfaire à cette demande, les éditeurs de navigateurs (en ce temps-
là, Netscape et Microsoft) inventèrent de nouvelles balises HTML, comme par exemple <font>, qui différaient
des éléments originaux en cela qu'ils définissaient une présentation et non une structure.

Cela conduisit aussi à une situation où les balises de structure originales, telle que <table>, étaient de plus en
plus utilisées à tort pour présenter les pages et non pour ajouter une structure au texte. Beaucoup de nouvelles
balises de présentation, telle que <blink>, n'étaient reconnues que par un type de navigateur. "Vous devez utiliser
le navigateur X pour voir cette page" devint un avertissement courant sur les sites Web.

CSS fut inventé pour remédier à cette situation en offrant aux concepteurs Web des possibilités de présentations
sophistiquées, gérées par tous les navigateurs. En même temps, séparer le style de présentation des documents
de leur contenu rend leur entretien beaucoup plus facile.

Quels sont les avantages de CSS ?


CSS fut une révolution dans l'univers de la conception Web et sont donc devenus l’outil de présentation des pages
Web standards. Les avantages concrets de CSS sont les suivants :

● Le contrôle de la présentation de plusieurs documents par une seule feuille de style donc une gestion
simplifiée de la présentation d’un site pour toutes les pages, aisément modifiable;
● allègement du code-source des pages Web : une feuille de style n’est chargée qu’une fois par un
navigateur ;
● Un contrôle plus précis de la présentation ;
● Des présentations différentes appliquées à des types de médias différents (à l'écran, à l'impression, etc.)
Les feuilles de style print permettent une impression immédiate d’une page depuis le navigateur, et
dispensent d’avoir à créer une version imprimable du document HTML ;
● Possibilité de doter une page de présentations alternatives au choix de l’utilisateur ;
● De nombreuses techniques évoluées et sophistiquées.
● Meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.
Leçon 2 : Comment CSS fonctionne-t-il ?
La syntaxe CSS de base
Supposons que nous voulions que le fond d'une page Web soit d'un beau rouge :

Avec HTML, nous l'aurions fait comme ceci :

<body bgcolor="#FF0000">

Avec CSS, on peut obtenir le même résultat comme cela :

body {background-color: #FF0000;}

Comme vous l'aurez remarqué, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple illustre également le modèle
fondamental de CSS :

La syntaxe d'un style est très simple. Elle se compose de :

● Un sélecteur de balise (qui définit sur quelle(s) balise(s), classe(s) ou id(s) agit le style)
● Deux accolades qui encadrent les propriétés et valeurs
● Des propriétés séparées entre-elles par des point-virgules et séparées de leur valeur par des doubles points.

Exemple pour un style appliqué à l'ensemble des balises (le sélecteur universel * intervient) :

*{
color:#000000;
text-align:left;
}

Exemple d'un style s'appliquant uniquement à la balise <p> :

p{
color:#000000;
text-align:left;
}

Exemple d'un style s'appliquant uniquement aux balises <p> et <div> :


p,div{
color:#000000;
text-align:left;
}

les sélecteurs de style


Un sélecteur contextuel possède une syntaxe très proche de celle d'un sélecteur classique. La seule différence est que le style prend effet
sur une balise contenue dans une autre (qu'elle soit directement contenue ou non).

Exemple pour un style appliqué à la balise <span> contenue dans la balise <li> :

li span{
color:#000000;
text-align:left;
}

Un sélecteur descendant revient sensiblement au même, il permet d'appliquer un style sur une balise située à l'intérieur d'une autre, mais
directement. Ainsi l'exemple suivant fonctionnera pour ce code :

<li><span>test</span></li> mais pas pour celui-ci : <li><p><span>test</span></p></li> car la balise <span> n'est pas directement
située dans la balise <li>.

Exemple pour un style appliqué à la balise <span> contenue directement dans la balise <li> :

li > span{
color:#000000;
text-align:left;
}

Un sélecteur adjacent permet d'appliquer un style sur une balise située immédiatement après une autre. Dans notre exemple nous allons
appliquer un effet sur la balise <h1>

Exemple pour un style appliqué à la balise <h1> contenue dans le document et située juste après la balise <p> :

p + h1{
color:#000000;
text-align:left;
}

Les sélecteurs d'attributs permettent d'appliquer un style sur une balise contenant des attributs précis ou imprécis.

Exemple pour un style appliqué à la balise <p> contenant l'attribut align (avec ou sans valeur) :

p[align]{
color:#000000;
text-align:center;
}

Exemple pour un style appliqué à la balise <p> contenant l'attribut align dont la valeur doit être égale à center :

p[align="center"]{
color:#000000;
text-align:center;
}

Exemple pour un style appliqué à la balise <p> contenant l'attribut align dont la valeur doit s'approcher de center :

p[align~="center"]{
color:#000000;
text-align:center;
}

Exemple pour un style appliqué à la balise <p> contenant l'attribut align dont la valeur doit commencer par left :

p[align|="left"]{
color:#000000;
text-align:center;
}

Mais où place-t-on le code CSS ?

Appliquer CSS à un document HTML


Il y a trois façons d'appliquer le style CSS à un document HTML. Nous vous recommandons d'examiner la troisième méthode, c'est-à-dire
celle externe.

Méthode 1 : Dans la ligne (l'attribut style)


Une façon d'appliquer du style CSS à HTML est celle avec l'attribut HTML style. En reprenant l'exemple précédent avec l'arrière-plan
rouge, on peut l'appliquer ainsi :

<html>
<head>
<title>Exemple</title>
</head>
<body style="background-color: #FF0000;">
<p>Cette page est rouge</p>
</body>
</html>

Méthode 2 : Interne (l'élément style)


Une autre méthode consiste à inclure le code CSS avec la balise HTML <style>. Par exemple, comme ceci :

<html>
<head>
<title>Exemple</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Cette page est rouge</p>
</body>
</html>

Méthode 3 : Externe (un lien vers une feuille de style)


La méthode recommandée est celle avec un lien vers ladite feuille de style externe.

Une feuille de style externe est simplement un fichier texte ayant l'extension « .css ». Comme n'importe quel fichier, la feuille de style peut
être rangée sur un serveur Web ou sur un disque dur.

Par exemple, disons que votre feuille de style se nomme « style.css » et se trouve dans un dossier appelé « style ». On peut illustrer
cette situation comme ceci :
L'opération consiste à créer un lien depuis le document HTML (default.htm) vers la feuille de style (style.css). Ce lien peut être créé en une
ligne de code HTML :

<link rel="stylesheet" type="text/css" href="style/style.css " media="screen" />

Remarquez comment on indique le chemin de la feuille de style avec l'attribut href.

La balise permettant d'ajouter une feuille de style est la balise <link />. On la place toujours entre les balises <head> et </head> et
on lui ajoute toujours l'attribut rel qui prend ici la valeur stylesheet pour dire que l'on ajoute un lien vers une feuille de style. On ajoute
ensuite l'attribut type portant la valeur text/css. Tout ceci sera toujours pareil quelle que soit la feuille de style que vous ajouterez.

<html>
<head>
<title>Mon document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
</head>
<body>
...

Le reste est plus intéressant puisqu'il va permettre de créer différents styles en fonction de l'utilisateur qui consulte votre site. Vous allez
pouvoir créer un style différent pour l'impression de votre page Web, un style différent pour l'affichage sur un PDA ou encore sur un
téléphone portable. Le tout sans changer le code XHTML de vos pages !.

Voici les différentes valeurs que peut prendre l'attribut media :

● all : On applique le style pour tout le monde et pour tous les périphériques !
● screen : On applique le style sur le moniteur (pas sur l'imprimante ni sur le reste)
● tty : Pour les médias de type TV ayant une basse résolution
● projection : Si vous affichez votre site sur un vidéo projecteur (la classe )
● handheld : Pour l'affichage sur un pocket PC
● print : Pour l'impression de vos pages web (pour consulter le résultat, un aperçu avant impression dans votre navigateur vous
montrera ce que ça donne)
● embossed : Documents imprimés en braille
● tv : Télévision
● braille : Appareils représentant la page en braille
● aural : Synthétiseurs vocaux

Ce lien instruit le navigateur d'utiliser la présentation du fichier CSS pour afficher le fichier HTML.
Plusieurs documents HTML peuvent être reliés à la même feuille de style. En d'autres termes, on peut utiliser un seul fichier CSS pour
contrôler la présentation de plusieurs documents HTML.
Cette technique permet d'économiser beaucoup d'efforts.

Essayez vous-même
Lancez Bloc-notes (ou votre éditeur de texte habituel) et créez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus suivants :

default.htm

<html>
<head>
<title>Mon document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Ma première feuille de style</h1>
</body>
</html>

style.css

body {
background-color: #FF0000;
}

Placez maintenant les deux fichiers dans le même dossier. sauvegardez les fichiers avec les bonnes extensions (respectivement « .htm » et
« .css »)

Priorité d'affichage
Lorsque vous définissez un style à un document ou une balise vous pouvez le faire de différentes manières. Si vous le faites de deux (ou
plus) manières différentes, il faut bien que le navigateur choisisse le style qu'il devra utiliser pour afficher correctement l'élément en cause.
Il existe donc des priorités d'affichage. Voici les priorités d'affichage par ordre décroissant :

● Le style en ligne : <p style="text-align:center"></p>


● Le style dans le document : <style type="text/css">p{text-align:center}</style>
● Le style importé : <style type="text/css">@import url('mon-style.css');</style>
● Le style externe : <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
Leçon 3 : Les couleurs et les arrières-plans
Dans cette leçon, vous apprendrez comment appliquer des couleurs et des couleurs d'arrière-plan à vos sites Web.
Nous étudierons également des méthodes évoluées pour positionner et contrôler les images d'arrière-plan. Les
propriétés CSS suivantes seront expliquées :

● color
● background-color
● background-image
● background-repeat
● background-attachment
● background-position
● background

La couleur d'avant-plan : la propriété 'color'


La propriété color décrit la couleur d'avant-plan d'un élément.

Par exemple, supposons que nous voulions tous les titres du document en rouge foncé. Les titres sont tous balisés avec
l'élément HTML <h1>. Le code suivant donne aux éléments <h1> une couleur rouge.

h1 {
color: #ff0000;
}

On peut définir les couleurs avec des valeurs hexadécimales comme dans l'exemple précédent (#ff0000), ou avec les
noms des couleurs ("red"), ou avec des valeurs RGB (rgb(255,0,0)).

La propriété 'background-color'
La propriété background-color décrit la couleur d'arrière-plan des éléments.

Pour changer la couleur d'arrière-plan d'une page entière, il faudrait donc appliquer la propriété 'background-color' à
l'élément <body>.

On peut aussi appliquer une couleur d'arrière-plan à d'autres éléments y compris les titres et le texte. Dans l'exemple ci-
dessous, Des couleurs d'arrière-plan différentes sont appliquées aux éléments <body> et <h1>.

body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Remarquez que nous avons appliqué deux propriétés à <h1> en les séparant par un point-virgule.

Les images d'arrière-plan [background-image]


La propriété CSS background-image sert à insérer une image d'arrière-plan.

Pour insérer l'image en arrière-plan d'une page Web, appliquez simplement la propriété background-image à l'élément
<body> et indiquez le chemin de l'image.

body {
background-color: #FFCC66;
background-image: url("image.gif");
}

h1 {
color: #990000;
background-color: #FC9804;
}

Remarquez la façon dont nous avons indiqué le chemin de l'image avec url("(image.gif"). Cela signifie que
l'image se trouve dnas le même dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers
avec url("../images/(image.gif"), ou même sur Internet en donnant l'adresse complète du fichier : url
("http://www.site.net/(image.gif").

Répéter l'image d'arrière-plan [background-repeat]


Dans l'exemple précédent, l'image était répété par défaut horizontalement et verticalement pour couvrir la totalité de
l'écran ? Ce comportement est contrôlé par la propriété background-repeat.

Le tableau suivant décrit les quatre valeurs différentes de background-repeat.

Valeur Description
Background-repeat: repeat-x L'image se répète horizontalement
background-repeat: repeat-y L'image se répète verticalement
L'image se répète horizontalement et
background-repeat: repeat
verticalement
background-repeat: no-repeat L'image ne se répète pas

Par exemple, pour éviter la répétition d'une image d'arrière-plan, le code devrait ressembler à ceci :
body {
background-color: #FFCC66;
background-image: url("image.gif");
background-repeat: no-repeat;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Bloquer l'image d'arrière-plan [background-attachment]


La propriété background-attachment définit si l'image d'arrière-plan est fixe ou bien défile avec l'élément
conteneur.

Une image d'arrière-plan bloquée ne bougera pas avec le texte lorsque le lecteur fait défiler la page, au contraire d'une
image d'arrière-plan non bloquée qui défilera avec le texte de la page Web.

Le tableau suivant décrit les deux valeurs différentes de background-attachment. Cliquez sur les exemples
pour voir la différence entre défiler et fixé.

Valeur Description
Background-attachment: scroll L'image défile avec la page (non bloquée)
Background-attachment: fixed L'image est bloquée

Par exemple, le code suivant bloquera l'image d'arrière-plan.

body {
background-color: #FFCC66;
background-image: url("image.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Positionner une image d'arrière-plan [background-position]


Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de l'écran. La propriété
background-position permet de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe
où à l'écran.

Il y a plusieurs méthodes pour fixer la valeur de background-position. Par contre, elles se présentent toutes
sous la forme d'un jeu de coordonnées. Par exemple, la valeur'100px 200px' positionne l'image d'arrière-plan à 100px
depuis la gauche et à 200px depuis le haut de la fenêtre du navigateur.

Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en unités fixes (pixels, centimètres,
etc.), ou on peut utiliser les mots-clés "top", "bottom", "center", "left" ou "right". Le modèle suivant illustre ce système :

Le tableau suivant fournit quelques exemples.

Valeur Description
L'image est positionnée à 2 cm de la
background-position: 2cm 2cm
gauche et à 2 cm du haut de la page
L'image est positionnée au centre et à un
background-position: 50% 25%
quart de la page vers le bas

background-position: top right L'image est positionnée au coin supérieur


droit de la page
L'exemple de code à suivre positionne l'image d'arrière-plan dans le coin inférieur droit de la page :

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Concision [background]
La propriété background est un raccourci pour toutes les propriétés listées dans cette leçon.

Avec background, on peut comprimer plusieurs propriétés et donc écrire une feuille de style plus courte, ce qui en
facilite la lecture.

Par exemple, les cinq lignes suivantes :

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

On peut obtenir le même résultat avec background en une seule ligne de code :

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

La liste de commande est la suivante :

[background-color] | [background-image] | [background-repeat] | [background-


attachment] | [background-position]

Si une propriété manque, elle prend automatiquement sa valeur par défaut. Par exemple, si on supprime
background-attachment et background-position de l'exemple :

background: #FFCC66 url("butterfly.gif") no-repeat;

Ces deux propriété non définies prendront tout simplement leurs valeurs par défaut, qui sont comme chacun sait
"scroll" et "top left".
Leçon 4 : Les polices
Les propriétés CSS suivantes seront décrites :

● font-family
● font-style
● font-variant
● font-weight
● font-size
● font

La famille de polices [font-family]


La propriété font-family sert à indiquer la liste prioritaire des polices à utiliser pour l'affichage d'un élément
donné ou d'une page Web. Si la première police de la liste n'est pas disponible sur l'ordinateur utilisé pour accéder
au site, la police suivante est essayée et ainsi de suite jusqu'à ce qu'il y en ait une qui convienne.

Il y a deux types de noms pour catégoriser les polices : les noms de familles et les familles génériques. Les deux
termes sont expliqués ci-dessous.

Le nom de famille
Comme exemples de noms de familles (souvent appelées « polices »), on trouve "Arial", "Times New
Roman" ou "Tahoma".
La famille générique
On peut décrire les familles génériques comme des groupes de noms de familles ayant des aspects
uniformes. Un exemple est celui de la famille sans sérif, qui est un ensemble de polices sans
« empattement ».

On peut illustrer cette différence comme ceci :


Lorsqu'on liste des polices pour un site Web, on commence naturellement par la police préférée suivie par des
polices de remplacement. Il est recommandé de terminer la liste par une famille générique. Ainsi, la page
s'affichera au moins avec une police de la même famille si aucune des polices indiquées n'était disponible.

Un exemple de liste prioritaire de polices ressemblerait à ceci :

h1 {font-family: arial, verdana, sans-serif;}


h2 {font-family: "Times New Roman", serif;}

Les titres marqués par des éléments <h1> s'afficheront dans la police "Arial". Si elle n'est pas installée dans
l'ordinateur de l'utilisateur, la police "Verdana" sera utilisée à la place. Si ces deux polices sont indisponibles, les
titres s'afficheront dans une police de la famille sans-serif.

Remarquez que le nom de la police "Times New Roman" contient des espaces, et elle est donc listée entre des
guillemets.

Le style des polices [font-style]


La propriété font-style définit le style de la police concernée être normal, italic ou oblique. Dans
l'exemple à suivre, tous les titres balisés par des éléments <h2> s'afficheront en italiques.

h1 {font-family: arial, verdana, sans-serif;}


h2 {font-family: "Times New Roman", serif; font-style: italic;}

Les variantes de polices [font-variant]


La propriété font-variant sert à choisir entre les variantes normal ou small-caps (N.d.T. petites
capitales) d'une police. Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres
en minuscules?

Si la propriété font-variant vaut small-caps et qu'aucune police en petites capitales n'est disponible, le
navigateur affichera très probablement le texte en capitales à la place.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

La graisse des polices [font-weight]


La propriété font-weight décrit avec quel degré de graisse (ou de « noir ») présenter la police. Elle peut
avoir une graisse normale ou bold (N.d.T. caractères gras). Certains navigateurs permettent même d'utiliser des
nombres entre 100 et 900 (les centaines) pour décrire la graisse de la police.

p {font-family: arial, verdana, sans-serif;}


td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Le corps des polices [font-size]


Le corps d'une police se règle par la propriété font-size.

Beaucoup d'unités différentes (par exemple, pixels et pourcentages) existent pour décrire les corps des polices.
Voici les unités les plus courantes et appropriées :

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Il existe une différence essentielle entre les quatre unités précédentes. Les unités « px » et « pt » font que le
corps de la police est absolu, tandis que « % » et « em » permettent à l'utilisateur de l'ajuster si nécessaire.
Beaucoup d'utilisateurs ont des handicaps, sont âgées ou simplement pâtissent d'une mauvaise vue ou de la piètre
qualité de leur moniteur. Pour rendre votre site Web accessible à tous, vous devriez utiliser des unités
ajustables telles que « % » ou « em ».
Il existe une autre méthode en donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros",
"petit", "minuscule". Mais bien sûr, comme tout c'est en anglais :p. Voici la liste des différentes valeurs que vous
pouvez mettre ainsi que leur signification :

● xx-small : minuscule
● x-small : très petit
● small : petit
● medium : moyen
● large : grand
● x-large : très grand
● xx-large : euh... gigantesque

Concision [font]
Avec la propriété raccourcie font, il est possible de couvrir toutes les différentes propriétés de police en un coup.

Par exemple, prenons ces quatre lignes de code servant à décrire les propriétés de police de <p> :

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Avec la propriété raccourcie, on peut simplifier le code :

p {
font: italic bold 30px arial, sans-serif;
}

L'ordre des valeurs de la propriété font est le suivant :

font-style | font-variant | font-weight | font-size | font-family


Leçon 5 : Le texte
Formater et ajouter du style au texte est primordial pour tout concepteur Web. Cette leçon vous introduira aux
possibilités offertes par CSS pour la présentation du texte. Les propriétés suivantes seront décrites :

● text-indent
● text-align
● text-decoration
● letter-spacing
● text-transform

L'indentation du texte [text-indent]


La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en appliquant
une indentation à la première ligne du paragraphe. Dans l'exemple suivant, un alinéa de 30px est appliqué à tous
les paragraphes balisés par un élément <p> :

p {
text-indent: 30px;
}

L'alignement du texte [text-align]


La propriété CSS text-align correspond à l'attribut align utilisé dans les versions anciennes de HTML. Le
texte peut être aligné à gauche (left), à droite (right) ou centré (center). Outre cela, la valeur justify étirera
chaque ligne de sorte que les marges à gauche et à droite soient droites toutes les deux. Cette mise en page est
courante, par exemple, dans les journaux et les magazines.

Dans l'exemple suivant, le texte des titres du tableau <th> est aligné à droite, tandis que les données du tableau
<td> sont centrées. Enfin, les paragraphes de texte normaux sont justifiés :

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}
La décoration du texte [text-decoration]
La propriété text-decoration permet d'ajouter des « décorations » ou « effets » différents au texte. Par
exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc. Dans l'exemple suivant, les
éléments <h1> sont des titres soulignés, les éléments <h2> sont des titres avec un trait au-dessus et les
éléments <h3> des titres barrés.

h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

L'espacement des lettres [letter-spacing]


L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La valeur de
la propriété est simplement celle de l'espacement désiré. Par exemple, si vous voulez un espacement de 3px
entre les lettres d'un paragraphe de texte <p>, et de 6px entre les lettres des titres <h1>, voici le code à
utiliser :

h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}

La transformation du texte [text-transform]


La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation
initiale, une mise en majuscules ou une mise en minuscules, indépendamment de l'aspect du texte original
dans le code HTML.

Voici un exemple avec le mot « titre » que l'on peut présenter à l'utilisateur comme « TITRE » ou « Titre ». La
propriété text-transform admet quatre valeurs possibles :
capitalize
Elle capitalise la première lettre de chaque mot. Par exemple, « marcel dupond » deviendra « Marcel
Dupond ».
uppercase
Elle convertit toutes les lettres en majuscules. Par exemple, « marcel dupond » deviendra « MARCEL
DUPOND ».
lowercase
Elle convertit toutes les lettres en minuscules. Par exemple, « MARCEL DUPOND » deviendra « marcel
dupond ».
none
Aucune transformation, et le texte se présente tel qu'il apparaît dans le code HTML.

Pour exemple, nous utiliserons une liste de noms, balisés avec des éléments <li> (list-item). Disons que nous
voulons que les noms soient capitalisés et les titres soient en lettres majuscules.

Examinez le code HTML de cet exemple et vous constaterez que le texte est en fait en minuscules.

h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}
Leçon 6 : L'identification et le regroupement d'éléments (class et id)
Parfois, on veut appliquer un style spécial à un élément ou à un groupe d'éléments particuliers. Dans cette leçon,
nous étudierons comment utiliser les attributs class et id pour définir les propriétés d'éléments sélectionnés.

Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment
regrouper les liens en différentes catégories et donner à chacune un style spécial ?

Le regroupement d'éléments dans une classe


On utilise le point (.) suivi de la valeur de l'attribut class pour désigner une classe. Si vous attribuez deux fois la
même classe à deux balises différentes, il vous faudra faire précéder le point du nom de la balise.

Essayons de définir quelques classes pour l'exemple :

<body>
<h1>Titre du site ici</h1>
<p class="rouge">Premier paragraphe</p>
<p class="gris">Deuxième paragraphe</p>
<p>Troisième <span class="gris">paragraphe</span></p>
</body>

Et le code CSS correspondant à notre exemple :

h1{ /*Votre code pour la balise h1 ici */ }

span.gris{ /*Votre code pour les <span> gris ici */ }

p.gris{ /*Votre code pour les paragraphes gris ici */ }

.rouge{ /*Votre code pour le paragraphe rouge ici */ }

Comme affiché dans l'exemple, on peut définir les propriétés des éléments appartenant à une certaine classe en
utilisant .le_nom_de_ladite_classe dans la feuille de style du document.

L'identification d'un élément avec id


Outre le regroupement d'éléments, on peut avoir besoin d'identifier un élément unique. Pour cela, on utilise
l'attribut id.

L'attribut id a ceci de spécial qu'il ne peut pas y avoir deux éléments avec le même id dans le document.
Chaque id doit être unique. Dans le cas contraire, il faudrait utiliser l'attribut class à la place. Voyons
maintenant un exemple d'utilisation possible de id :

<h1>Chapitre 1</h1>
....
<h2>Chapitre 1.1</h2>
....
<h2>Chapitre 1.2</h2>
....
<h1>Chapitre 2</h1>
....
<h2>Chapitre 2.1</h2>
....
<h3>Chapitre 2.1.2</h3>
....

Il pourrait s'agir des titres d'un document partagé en chapitres ou en paragraphes. Il semble naturel d'assigner un
id à chaque chapitre comme ceci :

<h1 id="c1">Chapitre 1</h1>


....
<h2 id="c1-1">Chapitre 1.1</h2>
....
<h2 id="c1-2">Chapitre 1.2</h2>
....
<h1 id="c2">Chapitre 2</h1>
....
<h2 id="c2-1">Chapitre 2.1</h2>
....
<h3 id="c2-1-2">Chapitre 2.1.2</h3>
....

Disons que le titre du chapitre 1.2 doive apparaître en rouge. Avec CSS, cela donne :

#c1-2 {
color: red;
}

Comme affiché dans l'exemple précédent, on peut définir les propriétés d'un élément spécifique en utilisant
#le_nom_dudit_id dans la feuille de style du document.
Leçon 7 : Les liens
Vous pouvez appliquer aux liens ce que vous avez déjà vu dans les leçons précédentes (c'est-à-dire à changer les couleurs et les polices, les soulignés, etc.).Aussi, c'est que CSS permet de
définir ces propriétés différemment, selon que le lien est visité, non visité, activé, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles. Pour contrôler ces effets, on
utilise ce qu'on appelle des pseudo-classes.

Qu'est-ce qu'une pseudo-classe ?


Les pseudo-classes se différencient des autres classes par leur syntaxe légèrement différente. Le point est remplacé par deux points. Elles permettent de gérer le focus, le pointage et le
clic :

Voici les pseudo-classes :

Pour les liens :

● :link : il s'agit d'un lien.


● :visited : un lien qui a déjà été visité par l'internaute.

Pour toutes les balises :

● :hover : Modifie le style lors d'un survol de la zone concernée


● :active : Modifie le style lors d'un clic de souris
● :focus : Modifie le style lors de la prise de focus (via la touche Tabulation ou la souris).

Voyons un exemple. Comme vous le savez, les liens sont définis en HTML avec des balises <a>. On peut donc utiliser a comme sélecteur dans CSS :

a {
color: blue;
}

Un lien est susceptible d'avoir plusieurs états. Par exemple, il peut être visité ou non. Vous pouvez utiliser des pseudo-classes pour assigner des styles différents aux liens visités et non
visités.

a:link {
color: blue;
}

a:visited {
color: red;
}

Utilisez respectivement a:link et a:visited pour les liens non visités et pour ceux visités. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover
intervient lorsque le curseur survole le lien.
Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des explications supplémentaires.

La pseudo-classe :link
La pseudo-classe :link est utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées.

Dans le code suivant, les liens non visités seront en bleu clair.

a:link {
color: #6699CC;
}

La pseudo-classe :visited
La pseudo-classe :visited est utilisée pour les liens menant aux pages que l'utilisateur a visitées. Par exemple, le code suivant donnera la couleur mauve foncé à tous les liens visités :

a:visited {
color: #660099;
}

La pseudo-classe :active
La pseudo-classe :active est utilisée pour les liens qui sont activés.

Cet exemple montre des liens activés dont la couleur d'arrière-plan est jaune :

a:active {
background-color: #FFFF00;
}

La pseudo-classe :hover
La pseudo-classe :hover est utilisée lorsque le pointeur de la souris survole un lien.

On peut s'en servir pour créer des effets intéressants. Par exemple, si nous voulons que nos liens soient orange et en italiques au survol du pointeur, le code CSS devrait être le suivant :

a:hover {
color: orange;
font-style: italic;
}
Exemple 1 : Effet au survol du lien par le curseur
Créer des effets différents pour le survol du pointeur sur les liens est très populaire. Nous examinerons donc quelques exemples de plus pour la pseudo-classe :hover.

Example 1a : Espacement des lettres


On peut ajuster l'espacement entre les lettres avec la propriété letter-spacing. Cela s'applique aux liens pour un effet spécial :

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Exemple 1b : MAJUSCULES et minuscules


Nous avons vu la propriété text-transform qui permet de basculer entre des lettres majuscules et minuscules. Elle peut aussi servir pour créer un effet sur les liens :

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

Les deux exemples donnent un apperçu des possibilités de combinaison des différentes propriétés presque illimitées.

Exemple 2 : Supprimer le trait sous les liens


On pose souvent la question : « Comment supprimer le trait sous les liens ? »

Vous devriez évaluer soigneusement s'il est nécessaire de supprimer le souligné car cela pourrait réduire considérablement la convivialité de votre site Web. Le public
est habitué aux liens bleus soulignés des pages Web et sait qu'on peut cliquer dessus.

Ceci dit, il est très facile de supprimer le souligné des liens. On peut utiliser la propriété text-decoration pour indiquer de souligner le texte ou non. Pour supprimer le souligné, il
suffit de lui donner la valeur none.

a {
text-decoration:none;
}

Autrement, vous pouvez fixer la valeur de text-decoration en même temps que celles d'autres propriétés pour les quatre pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

Première lettre et première ligne

En CSS, il est possible de modifier automatiquement l'apparence de la première lettre et de la première ligne du texte contenu dans une balise.
Il s'agit là encore de pseudo-formats.

La première lettre

Pour modifier l'apparence de la première lettre, vous devez utiliser le pseudo-format :first-letter

On peut s'en servir pour écrire en gras et en plus gros la première lettre de tous les paragraphes de votre page.
Si en plus vous indentez votre texte avec text-indent, on va finir par se croire dans un roman ou un article de journal

La première ligne

Un autre pseudo-format intéressant permet de modifier cette fois la première ligne. Il s'agit de :first-line.
Appliqué aux paragraphes, il permet d'inciter à la lecture du texte. Par exemple, vous pourriez automatiquement écrire en petites capitales la première ligne de chaque paragraphe, afin de
les rendre plus attrayants :

Avant / Après

Les pseudo-formats que nous allons voir maintenant sont très intéressants et changent un peu de ce qu'on a l'habitude de faire en CSS.
Ils donnent la possibilité d'ajouter automatiquement du texte au début et à la fin de certains paragraphes, afin de diminuer la quantité de texte à écrire.

Par exemple, supposons que je pose beaucoup de questions dans ma page web. En temps normal, j'écrirai ceci en XHTML pour indiquer qu'une personne pose une question :

Voici le code XHTML qui va permettre de comprendre le fonctionnement :

Utilisons maintenant les pseudo-formats suivants :

● :before : qui signifie "avant"


● :after : qui signifie "après"

On va utiliser une propriété CSS nouvelle et un peu particulière qui nous permettra d'insérer du texte : content
content est donc une propriété CSS vraiment particulière, vu qu'elle permet d'indiquer le texte que l'on veut mettre "Avant" (before) ou "Après" (after). Vous n'êtes pas obligés de mettre
uniquement la propriété content avec un :before ou :after, vous pouvez aussi utiliser tous les styles CSS que vous connaissez. Ces styles s'appliqueront au texte rajouté par le :before ou :
after.

Une image au lieu du texte ?


Il est aussi possible d'indiquer une image à la place du texte avec le :before et le :after.
On utilise toujours la propriété content, mais au lieu de taper du texte entre guillemets, on va mettre une valeur "url" comme ceci :
Leçon 8 : Le regroupement d'éléments (span et div)
Les éléments <span> et <div> servent à regrouper et structurer un document et seront souvent utilisés avec les
attributs class et id.

Dans cette leçon, nous verrons de plus près l'utilisation des deux éléments <span> et <div>, et leur importance
centrale pour CSS.

● Le regroupement avec <span>


● Le regroupement avec <div>

Le regroupement avec <span>


L'élément <span> est ce qu'on pourrait appeler un élément neutre, qui n'ajoute rien au document en lui-même.
Mais CSS peut utiliser l'élément <span> pour ajouter des caractéristiques visuelles à des parties spécifiques du
texte des documents.

Cette citation de Benjamin Franklin en constitue un exemple :

<p>Tôt couché et tôt levé


fortifie, enrichit et rend avisé.</p>

Supposons que les avantages aux yeux de M. Franklin de ne pas gaspiller son sommeil soient accentués en rouge.
Dans ce but, nous pouvons baliser les avantages avec des éléments <span>. Chaque span reçoit alors un
attribut class défini ainsi dans la feuille de style :

<p>Tôt couché et tôt levé


<span class="benefit">fortifie</span>,

<span class="benefit">enrichit</span>
et <span class="benefit">rend avisé</span>.</p>

Le code CSS associé :

span.benefit {
color:red;
}
Bien sûr, vous pouvez aussi utiliser l'attribut id pour ajouter du style aux éléments <span>, tant que vous
appliquez un id unique à chacun des trois éléments <span>, comme appris dans la leçon précédente.

Le regroupement avec <div>


Alors que <span> s'utilise dans un élément de type bloc comme vu précédemment, <div> sert à regrouper un
ou plusieurs éléments de type bloc.

Hormis cette différence, le regroupement avec <div> fonctionne plus ou moins de la même façon. Voyons un
exemple avec deux listes de présidents des États-Unis répartis selon leur affiliation politique :

<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

Dans notre feuille de style, nous pouvons utiliser le regroupement exactement de la même façon que
précédemment :

#democrats {
background:blue;
}

#republicans {
background:red;
}
Leçon 9 : Margin et padding
Dans la leçon précédente, nous introduisions le modèle des boîtes. Dans cette leçon, nous verrons comment
changer la présentation des éléments avec les propriétés margin et padding.

● Fixer la marge d'un élément


● Fixer l'espacement dans un élément

Fixer la marge d'un élément


Un élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom"). La marge est
la distance entre chaque côté et l'élément avoisinant (ou les bordures du document).

Comme premier exemple, nous allons voir comment définir les marges du document même, c'est-à-dire de
l'élément <body>. L'illustration suivante montre les marges voulues pour les pages.

Le code CSS serait le suivant :

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Ou bien plus élégant et concis :

body {
margin: 100px 40px 10px 70px;
}

Vous pouvez fixer pareillement les marges sur presque tous les éléments. Par exemple, on peut choisir de définir
les marges de tous les paragraphes de texte balisés avec <p> :

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}

Fixer l'espacement dans un élément


L'espacement peut aussi être assimilé à un « remplissage ». Cela peut se comprendre dans la mesure où
l'espacement n'affecte pas la distance de l'élément aux autres éléments mais définit seulement la distance interne
entre la bordure et le contenu de l'élément.

L'utilisation de l'espacement peut être illustrée par ce simple exemple où tous les titres ont des couleurs d'arrière-
plan :

h1 {
background: yellow;
}

h2 {
background: orange;
}
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}
Leçon 10 : Les bordures
On peut utiliser des bordures pour beaucoup de choses, par exemple comme élément décoratif ou pour souligner
la séparation de deux choses. CSS offre des options intéressantes pour l'utilisation des bordures dans vos pages.

● border-width
● border-color
● border-style
● Exemples de définitions de bordures
● border

L'épaisseur des bordures [border-width]


L'épaisseur des bordures est définie par la propriété border-width, dont les valeurs peuvent être "thin",
"medium" et "thick", ou une valeur numérique en pixels. La figure ci-dessous illustre le système :

La couleur des bordures [border-color]

La propriété border-color définit la couleur d'une bordure. Des valeurs de couleur normales sont, par
exemple, "#123456", "rgb(123,123,123)" ou "yellow" .

Les types de bordures [border-style]


On peut choisir parmi plusieurs types de bordures. Voici huit types de bordures différentes tels qu'Internet
Explorer 5.5 les interprète. Toutes les bordures ont la couleur "gold" et une épaisseur valant "thick" mais elles
peuvent naturellement s'afficher dans d'autres couleurs et épaisseurs.

On peut utiliser les valeurs "none" ou "hidden" si on ne veut aucune bordure.


Exemples de définitions de bordures
Les trois propriétés décrites précédemment peuvent être réunies pour chaque élément et donc produire des
bordures différentes. Pour illustrer cela, voyons un document où nous définissons des bordures différentes pour
<h1>, <h2>, <ul> et <p>. Le résultant n'est peut-être pas très beau mais il montre quelques unes des
nombreuses possibilités :

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

Il est également possible de déclarer des propriétés spéciales pour les bordures supérieures, inférieures, gauches
ou droites. L'exemle suivant montre comment le faire :

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

Concision [border]
Comme pour beaucoup d'autres propriétés, on peut concentrer plusieurs propriétés en une seule avec border.
Voici un exemple :

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

Il peut se concentrer en :

p {
border: 1px solid blue;
}
Leçon 11 : Mise en boîte
Balises Block et Inline
● block : une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web
sera en fait constituée d'une série de blocks à la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un block à l'intérieur d'un autre, ce qui va
augmenter considérablement nos possibilités pour créer le design de notre site !
● inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à
l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise "en ligne").

Voici un petit tableau listant quelques balises inline et block courantes :

Les balises universelles

Ce sont des balises qui n'ont aucun sens particulier (contrairement à <p> qui veut dire "paragraphe", <strong> "important" etc...). Le principal intérêt de ces balises c'est de pouvoir
appliquer une class (ou un id) pour le css quand aucune autre balise ne convient.

Il existe 2 balises génériques, et la seule différence entre les deux c'est que l'une d'elle est inline, l'autre est block :

● <span></span> (inline)
Code : HTML
<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</
p>

● <div></div> (block) : c'est aussi une balise qui n'a aucun sens, comme span, sauf que celle-là est de type block.

Respectons la sémantique !
Les balises universelles sont "pratiques" dans certains cas, certes, mais attention à ne pas en abuser. Beaucoup de webmasters mettent des <div> et des <span> trop souvent, et
oublient que d'autres balises plus adaptées existent.

Voici 2 exemples :

● Exemple d'un span inutile :


Je ne devrais jamais voir dans un de vos codes :
<span class="important">
... alors qu'il existe la balise <strong> qui sert à ça !
● Exemple d'un div inutile :
De la même manière, ceci est complètement absurde :
<div class="titre">
... puisqu'il existe des balises faites spécialement pour les titres (<h1><h2><h3>...)

Au final le résultat (visuel) est le même. Mais, tandis que les balises span et div ne signifient rien de particulier, les balises strong et h1 veulent dire quelque chose ! Strong signifie
"important" et h1 signifie "titre principal".

En XHTML, il faut utiliser tant que possible des balises qui ont un sens : on appelle ça respecter la sémantique

La taille
Contrairement à un inline, un block a des dimensions précises. Il a une largeur et une hauteur. Ce qui fait, qu'on dispose de 2 propriétés CSS :

● width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%).


● height : c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%).

Par défaut, et c'est très important à savoir, un block prend 100% de la largeur disponible. Regardez par exemple ce code XHTML qui n'utilise aucune propriété CSS :

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac
libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec,
tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in,
dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare
felis tellus sed purus. Phasellus orci.</p>

"Couper" un block avec un overflow

Supposons que vous ayez un long paragraphe et que vous vouliez qu'il fasse 250px de large et 100px de haut.
Le texte n'a pas assez de place, le block va s'agrandir de manière à ce que tout soit visible. Si vous voulez "couper" votre paragraphe pour qu'il soit d'une dimension exacte de
250x100, vous allez devoir utiliser la propriété CSS overflow.
Les valeurs que peut prendre overflow sont les suivantes :

● visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de manière à ce que tout soit visible. C'est ce que nous venons de constater.
● hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
● scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte.
C'est un peu comme un cadre à l'intérieur de la page.
● auto : mode "pilote automatique" :p. En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il en mettra si c'est nécessaire).

Il existe une ancienne balise HTML, <iframe>, qui donne à peu près le même résultat. Toutefois, cette balise n'existe plus en XHTML (elle
est dépassée). Il vous faudra donc utiliser un overflow à la place.

Les bordures

Pour border on peut utiliser jusqu'à 3 valeurs pour modifier l'apparence de la bordure :

● La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px), ou utilisez un des mots-clé suivants :
❍ thin : bordure fine

❍ medium : bordure moyenne

❍ thick : bordure épaisse


C'est le navigateur qui choisit le nombre de pixels qui correspond à thin, medium et thick. En général, c'est à peu près pareil sur tous les navigateurs.
● La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ("black", "red"...), soit une valeur hexadécimale (#FF0000), soit une
valeur rgb (rgb(198, 212, 37))
● Le type de bordure : La bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc... Voici les différentes valeurs disponibles :
❍ none : pas de bordure (par défaut)

❍ solid : un trait simple.

❍ dotted : pointillés.

❍ dashed : tirets.

❍ double : bordure double.

❍ groove : en relief.

❍ ridge : effet 3D.

❍ inset : autre effet 3D (on a l'impression que le block forme un creux).

❍ outset : encore un autre effet 3D (on a l'impression que le block est surélevé).

Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite). Dans ce cas, vous devrez utiliser ces 4 propriétés

● border-top : bordure en haut.


● border-bottom : bordure en bas.
● border-left : bordure à gauche.
● border-right : bordure à droite.

Ce sont aussi des méga-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté.
Rq : On peut utiliser border sur des balises inline. Il y a une balise inline sur laquelle on utilise fréquemment border : c'est <img /> (pour les images). En effet, vous vous souvenez
que si vous transformez une image en lien, elle se voit dotée d'une immonde bordure bleue :

"a img", signifie "Toutes les balises <img> contenues dans un lien <a>"...c'est exactement ce qu'on veut : enlever la bordure qui apparaît autour des images qui sont contenues dans
des liens.

Les marges
Tous les blocks possèdent des marges. Ce qui est important, c'est de savoir qu'il existe 2 types de marges :

● L'espace entre le texte et la bordure est la marge intérieure (en vert).


● L'espace entre la bordure et le prochain block est la marge extérieure appelé aussi remplissage (en rouge).
En CSS, on peut modifier la taille des marges avec les 2 propriétés suivantes :

● padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).


● margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

Si vous voulez indiquer une marge en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises.
la liste pour margin : la liste pour padding :

● margin-top : marge extérieure en haut. ● padding-top : marge intérieure en haut.


● margin-bottom : marge extérieure en bas. ● padding-bottom : marge intérieure en bas.
● margin-left : marge extérieure à gauche. ● padding-left : marge intérieure à gauche.
● margin-right : marge extérieure à droite ● padding-right : marge intérieure à droite.

Centrer des blocks

Il est tout à fait possible de centrer des blocks, c'est même très pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur.

Toutefois, et c'est très important, cela ne fonctionne que si vous avez indiqué une largeur précise (width) au block. Si vous n'avez pas indiqué de largeur, le block ne sera pas
centré !

Transformer un inline en block (et vice-versa)


Les images ( <img /> ) sont des balises de type inline, et vous préféreriez que ce soient des blocks ? Pas de problème !
Les titres ( <h1> ) sont de type block, et vous préféreriez que ça soient des balises inline ? Aucun problème !
Il existe la propriété CSS display. Cette propriété peut prendre les valeurs suivantes :

● block : la balise concernée deviendra de type block.


● inline : la balise concernée deviendra de type inline.

Pour transformer une balise inline en balise de type block, vous allez devoir taper : display:block et vice-versa

Les flottants
Cela permet d'"entourer" un élément (par exemple une image) par du texte. La propriété float peut prendre 2
valeurs :

● left : l'élément flottera à gauche.


● right : l'élément flottera... à droite ! Oui bravo

On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline.

le flottant doit être avant le texte, qu'il flotte à droite ou qu'il flotte à gauche c'est pareil.
Faire flotter une image

Créer une lettrine (exercice)

Stopper un flottant

Comment faire si vous voulez qu'au bout d'un moment le texte continue en-dessous du flottant ? On pourrait faire plusieurs <br /> à la suite, mais ça serait pas pratique ni très
propre...

C'est la propriété css clear qui peut prendre 3 valeurs :

● left : le texte se poursuit en-dessous après un float:left;


● right : le texte se poursuit en-dessous après un float:right;
● both : le texte se poursuit en-dessous, que ce soit après un float:left; ou après un float:right;
Positionnement absolu, fixe et relatif
Hormis les flottants, il existe 3 façons de positionner un block en CSS :

● Le positionnement absolu : il nous permet de placer un block n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre etc...)
● Le positionnement fixe : c'est pareil que le positionnement absolu, mais cette fois le block reste toujours visible, même si on descend plus bas dans la page. C'est un
peu comme le background-attachment:fixed;
● Le positionnement relatif : c'est le plus compliqué des trois. En gros, ça nous permet de déplacer un block par rapport à sa position normale.

Pour cela, on utilise la propriété CSS position à laquelle on donne une de ces valeurs :

● absolute : positionnement absolu.


● fixed : positionnement fixe.
● relative : positionnement relatif

Le positionnement absolu
Pour effectuer un positionnement absolu, il faut taper : position:absolute;

Mais ça ne suffit pas !


On a dit qu'on voulait un positionnement absolu, mais encore faut-il dire où on veut que le block soit positionné sur la page.
Pour faire cela, on va réutiliser 4 propriétés CSS :

● left : position par rapport à la gauche de la page.


● right : position par rapport à la droite de la page.
● top : position par rapport au haut de la page.
● bottom : position par rapport au bas de la page.

On peut leur donner une valeur en pixels, comme "100px", ou bien une valeur en pourcentage, comme "50%".

Comme nous pouvons le constater, le block peut se mettre au-dessus du paragraphe. Il le masque. Ca, c'est un des grands avantages et défauts du positionnement absolu : il n'y a
aucun contrôle, vous pouvez mettre votre block vraiment où vous voulez sur la page.

Remarque : si vous positionnez un block A en absolu, et qu'à l'intérieur de ce block vous positionnez un autre block B en absolu, ce positionnement-là ne se fera plus par rapport
au coin en haut à gauche de la fenêtre mais par rapport au coin en haut à gauche du block A.

Le positionnement fixe

Le fonctionnement est exactement le même que pour le positionnement absolu, sauf que cette fois le block reste fixe, même si on descend plus bas dans la page.
Le positionnement fixe fonctionne sur tous les navigateurs, sauf sur Internet Explorer 6 et les versions antérieures. Hélas, sur ce navigateur le block ne sera tout simplement pas
positionné...

Au lieu de faire position:absolute;, on va taper position:fixed; dans notre CSS. Comme tout à l'heure, on s'aide de top, left, right et bottom pour placer notre block où on veut sur la
page.

Le position:fixed; est particulièrement utile pour faire un menu qui reste toujours visible

Le positionnement relatif

Plus délicat, le positionnement relatif sert généralement à faire des "ajustements".

Cette fois, le schéma pour les positions absolue et fixe ne marche plus. Pourquoi ? Parce que l'origine a changé : le point de coordonnées (0, 0) ne se trouve plus en haut à gauche
de votre fenêtre. Cette fois, l'origine se trouve en haut à gauche de la position actuelle de l' élément.
C'est une position relative.

Donc, si vous faites un position:relative et que vous appliquez une des propriétés top, bottom, left, right, le texte sur fond rouge va se déplacer par rapport à la position où il se trouve.

Prenons un exemple :on veut que notre texte se décale de 55 pixels vers la droite et de 10 pixels vers le bas.
Leçon 12 : Une couche sur une couche avec z-index (les couches)
CSS agit dans trois dimensions : la hauteur, la largeur et la profondeur. Nous avons vu les deux premières
dimensions dans les leçons précédentes. Dans celle-ci, nous allons apprendre à ranger les éléments en couches.
Pour faire court, l'ordre dans lequel les éléments recouvrent les autres.

Pour cela, on peut assigner un numéro (z-index) à chaque élément. Le système est tel qu'un élément de
numéro supérieur recouvre ceux de numéro inférieur.

Soit une suite royale dans une main de poker. On peut la présenter de telle sorte que chaque carte ait un numéro
z-index :

Ici les numéros se suivent (de 1 à 5), mais on peut obtenir le même résultat avec cinq numéros différents. C'est la
séquence chronologique des numéros (l'ordre) qui importe.

Le code dans l'exemple avec les cartes pourrait être celui-ci :

#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}

#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}

#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}

#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}

#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}

La méthode est relativement simple mais les possibilités nombreuses. On peut placer des images sur du texte, ou
du texte sur du texte, etc.
Leçon 13 : Les standards du Web et la validation
Le W3C, pour World Wide Web Consortium, est une organisation indépendante gérant les standards du Web (par
exemple, HTML, CSS, XML et d'autres). Microsoft, The Mozilla Foundation et beaucoup d'autres font partie du W3C
et s'accordent sur les développements futurs des standards.

Vous savez qu'il peut exister de grandes différences dans la présentation des pages Web entre des navigateurs
différents. La création d'une page Web peut induire beaucoup de frustration et consommer beaucoup de temps,
afin qu'elle puisse être vue dans Mozilla, Internet Explorer, Opera et les autres navigateurs existants.

Le concept des standards est de trouver un dénominateur commun pour l'utilisation des technologies Web. Cela
signifie qu'un développeur Web, en respectant les standards, a la certitude que son code fonctionnera mieux entre
des plateformes différentes. Nous recommandons donc de vous appuyer sur les travaux du W3C et de
valider votre code CSS pour respecter le standard.

Le validateur CSS
Pour faciliter le respect du standard CSS, le W3C a développé un validateur, lequel lit les feuilles de style et
renvoie un état listant les erreurs et les avertissements au cas où votre code CSS ne serait pas valide.

Si le validateur ne trouve aucune erreur, l'image suivante s'affichera, et vous pourrez la placer sur votre site Web
pour montrer que votre code est validé :

Le lien direct du validateur : http://jigsaw.w3.org/css-validator/


Leçon 14 : Les tableaux
Un tableau simple :

Titre du tableau

Normalement, tout tableau doit avoir un titre <caption>. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.
Dans notre exemple, on a une liste de personnes... oui mais alors ? Qu'est-ce que ça représente ? Sans titre de tableau, vous le voyez, on est un peu perdus

Cette balise se met tout au début du tableau, juste avant l'en-tête. C'est elle qui indique le titre du tableau.

La ligne d'en-tête

Dans notre exemple, les en-têtes sont "Nom", "Age" et "Pays".


La ligne d'en-tête se crée avec un <tr> , mais les cellules à l'intérieur sont cette fois des <th> et non pas des <td> !

Des tableaux plus élaborés


Nous avons appris à faire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous ayez besoin de faire des tableaux plus...
complexes.
Nous allons voir 2 techniques particulières :

● Pour les gros tableaux, il est possible de les diviser en 3 parties :


❍ En-tête

❍ Corps du tableau

❍ Pied de tableau

● Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.

Diviser un gros tableau

Si le tableau est assez grand, vous aurez tout intérêt à la découper en plusieurs parties. Pour cela, il existe des balises XHTML qui permettent de définir les 3 "zones" du
tableau :

● L'en-tête (en haut) : il se définit avec les balises <thead></thead>


● Le corps (au centre) : il se définit avec les balises <tbody></tbody>
● Le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>

=Que mettre dans le pied de tableau ? Généralement, si c'est un long tableau, vous recopiez les cellules d'en-tête. Ca permet de voir même en bas du tableau à quoi se
rapporte chacune des colonnes.

Schématiquement, un tableau en 3 parties se découpe donc comme cela :

La seule chose un peu déroutante, c'est qu'il faut mettre les balises dans l'ordre suivant :

1. <thead>
2. <tfoot>
3. <tbody>
Fusion

Sur certains tableaux complexes, vous aurez besoin de "fusionner" des cellules entre elles.
Un exemple de fusion ? Regardez, ce tableau liste des films et indique à qui ils s'adressent :

Pour le dernier film, vous voyez que les cellules ont été fusionnées : elles ne font plus qu'un.
Pour effectuer une fusion, il faut rajouter un attribut à la balise <td>. Il faut savoir qu'il existe 2 types de fusion :

● La fusion de colonnes : c'est ce que je viens de faire sur cet exemple. La fusion s'effectue horizontalement.
On utilisera l'attribut colspan.
● La fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.
On utilisera l'attribut rowspan.

Nous devons donner une valeur à l'attribut (que ce soit colspan ou rowspan).
Cette valeur, c'est le nombre de cellules à fusionner entre elles. Sur notre exemple, on a fusionné deux cellules : celle de la colonne "Pour enfants ?", et celle de "Pour
adolescents ?". On devra donc écrire : <td colspan="2">
Tableaux et CSS
Rappelons propriétés CSS dont nous pouvons avoir besoin pour embellir un tableau. Quelques exemples :

● Pour modifier la bordure des cellules, il suffit d'utiliser border.


● Pour modifier la couleur de fond d'une cellule, on utilisera background-color.
● Pour modifier l'image de fond d'une cellule, on utilisera background-image
● Mais on peut aussi modifier la taille (font-size) et la police (font-family) du texte des cellules d'en-tête, en appliquant les propriétés adaptées aux balises <th>
● On peut aussi agrandir le tableau tout entier (width), le centrer (margin:auto car le tableau est un block).
● On peut centrer le texte à l'intérieur des cellules (text-align:center), modifier les marges intérieures des cellules (padding) pour aérer le tableau.

Quelques nouvelles propriétés CSS

Il existe quelques nouvelles propriétés CSS qui sont propres aux tableaux.
Voici celles parmi les plus utiles :

● caption-side : indique où doit se trouver le titre du tableau (ne fonctionne pas sur Internet Explorer). Cette propriété peut prendre les valeurs suivantes :
❍ top : le titre sera placé en haut du tableau (par défaut).

❍ bottom : le titre sera placé en bas du tableau.

❍ left : le titre sera placé à gauche du tableau.

❍ right : le titre sera placé à droite du tableau.


● border-collapse : on l'a déjà vue tout à l'heure, cette propriété indique que les bordures des cellules seront collées entre elles. On utilise souvent cette propriété
car l'effet qu'elle procure est intéressant. Les valeurs possibles sont :
❍ separate : les bordures seront séparées les unes par rapport aux autres (par défaut).

❍ collapse : les bordures seront collées entre elles.

● vertical-align : alignement vertical du contenu d'une cellule. Si une cellule a une hauteur importante, il est possible de placer son contenu en haut, en bas ou au
milieu de la cellule :
❍ top : le contenu sera aligné en haut de la cellule

❍ middle : le contenu sera aligné au milieu de la cellule

❍ bottom : le contenu sera aligné en bas de la cellule


Leçcon 15 : Les formulaires
Un formulaire accessible et css ?
Notre objectif sera double : faire en sorte que notre formulaire soit accessible et design

On va faire ça en 4 étapes :

1. Définir un ordre de tabulation (accessibilité)


2. Définir des touches de raccourci (accessibilité)
3. Organiser le formulaire en plusieurs zones (accessibilité et design)
4. Rajouter du CSS (design)

Définir un ordre de tabulation

Comme vous le savez , on peut se déplacer dans un formulaire uniquement grâce à la touche "Tab" (tabulation) située à gauche de votre clavier. A chaque fois qu'on appuie sur Tab, on va au
champ suivant. A chaque fois qu'on fait Maj + Tab, on retourne au champ précédent.

Le but est de dire en XHTML dans quel ordre on doit se déplacer dans le formulaire. Par exemple, après le champ "nom" si je tape Tab je dois tomber sur le champ "prénom", puis sur "e-mail"
etc...

On va utiliser l'attribut tabindex qui peut se rajouter sur toutes les balises du formulaire qu'on a apprises.
On doit lui mettre un nombre pour valeur. Chaque champ du formulaire doit avoir un nombre différent.
Les nombres indiquent dans quel ordre on se déplace dans le formulaire : d'abord le n°1, puis le n°2, le n°3 etc...

Vous n'êtes pas obligés de mettre des nombres qui se suivent. Il est même conseillé de laisser des "espaces" entre les nombres au cas où vous auriez besoin de rajouter plus tard des champs.
Ainsi, il est tout à fait possible de compter 10 par 10 : n°10, n°20, n°30 etc

Sur ce formulaire, j'ai rajouté les tabindex à chaque champ. Comme on l'a vu, le premier champ est celui qui a le numéro le plus petit, et le dernier celui qui a le plus grand.
Essayons de taper plusieurs fois d'affilée sur "Tab", vous allez voir que vous vous déplacerez dans l'ordre que vous avez défini avec tabindex.
Cela est particulièrement utile pour les personnes qui ne peuvent pas se servir d'une souris (eh oui, ça existe !).

Par défaut, si aucun tabindex n'est mis, le navigateur dira que le premier champ est celui tout en haut, et que le dernier celui tout en bas de la page.

Définir des touches de raccourci

Une touche de raccourci ("access key" en anglais) est une touche qui permet d'accéder directement à un champ de votre formulaire sans avoir à cliquer dessus avec la souris et sans avoir à
appuyer plusieurs fois sur "Tab" avant de tomber sur le champ qui vous intéresse.

Ce qui est très pratique, c'est que le XHTML vous permet de choisir quelles touches du clavier serviront de raccourcis.
Ce qui l'est moins, c'est que les raccourcis s'utilisent de manière différente en fonction du navigateur :

● Firefox et Internet Explorer (Windows) : il faut faire la combinaison de touches Alt + Raccourci. Si ça ne marche pas, essayez Alt + Maj + Raccourci.
● Safari et IE-Mac (Macintosh) : il faut taper Ctrl + Raccourci.

Pour définir une touche de raccourci, vous utiliserez l'attribut accesskey qui, comme tabindex, peut se mettre sur tous les types de champs de formulaire. Vous devez lui mettre comme valeur la
touche du clavier qui doit servir de raccourci pour le champ.
Sur cet exemple, le champ de recherche est accessible directement avec la touche R :

Sous Windows, il faut donc faire Alt + R pour arriver directement sur le champ de recherche.
Sous Mac, il faut faire Ctrl + R.

Le gros problème des touches de raccourci est que certains caractères sont déjà utilisés par le navigateur. Si vous utilisez les mêmes, il y aura un conflit et vos visiteurs ne pourront plus utiliser
les raccourcis auxquels ils sont habitués.
L'idéal est d'utiliser des chiffres en raccourci, ils sont en général très peu utilisés par les navigateurs.

N'oubliez pas d'indiquer quelque part sur la page quels sont les raccourcis utilisables, parce que vos visiteurs ne pourront pas les deviner.

Organiser le formulaire en plusieurs zones

La technique que nous allons voir a 2 avantages :

● Elle permet de rendre le formulaire plus clair, donc plus accessible.


● Elle permet d'améliorer le design du formulaire.

Concrètement, quelle est l'idée ?


Si vous avez un formulaire assez grand, il est facile que le visiteur se perde dans la masse d'informations qu'il a à entrer. Il est possible en XHTML de grouper plusieurs champs ayant un thème
entre eux.

On utilisera la balise <fieldset></fieldset> pour délimiter un groupe de champs.


A l'intérieur de cette balise, vous mettrez vos champs (vos <input /> entre autres...) ainsi qu'une autre balise : <legend></legend>. Celle-ci permet de donner le nom du groupe.
Habillage CSS

On a utilisé pour l'occasion le pseudo-format ":focus" qui, permet d'appliquer des styles CSS lorsqu'un objet est sélectionné. En l'occurence, on s'en sert pour mettre un fond jaune aux champs
lorsqu'on clique dessus, ce qui donne un effet assez intéressant

Rq : le pseudo-format ":focus" ne marche pas sur Internet Explorer.


TP : Design d'une page CSS
La structure générale :

Bien souvent, on structure sa page web à l'aide de blocks <div>. On va avoir en général au moins 4 blocks, présentés comme ceci :
Menu et sous-menus

Dans le block du menu (en bleu marine), on va avoir à créer plusieurs sous-blocks ( ça s'emboîte) pour séparer les différents éléments du menu.

Comme vous le voyez, il contient 2 sous-blocks (cadres verts) qui vont servir de sous-menus.
Comment faire cet emboîtement de blocs ? C'est simple en XHTML :

Rajoutons maintenant le texte à l'intérieur du menu pour faire comme dans le dernier schéma.
On va mettre dans chaque "element_menu" un titre de menu en <h3>.
Ensuite, on va mettre une liste à puces (<ul>) pour avoir un menu bien organisé.
Centrer le design

Pour commencer, nous allons travailler juste sur la balise <body>. . Si on dit que notre <body> fait tant de pixels de large (pour avoir un design de taille fixe) et qu'on veut le centrer (avec margin:
auto;), on a déjà pratiquement gagné

Pour la taille de la page, on va mettre 760 pixels. Pourquoi 760 ? Parce que c'est moins que 800px, et ainsi les visiteurs qui sont en résolution 800*600 n'auront pas à se déplacer vers la droite
pour voir le reste de la page.

Pour ce qui est des marges, un margin:auto suffira à centrer le design.


On rajoutera une marge en haut (top) et en bas (bottom) de 20 pixels pour éviter que notre page soit trop "collée" avec le haut et le bas du navigateur.

Enfin, on mettra une petite image de fond (background-image) à la page pour faire un peu moins vide.

L'en-tête

Nous allons afficher la bannière du site à l'aide du CSS (avec background-image).


C'est une technique que vous pourrez utiliser si besoin est pour faire en sorte que tout votre design soit compris dans le fichier CSS. Ca sera très pratique (entre autres) pour réaliser un site qui
propose plusieurs designs différents.

1. La première chose à faire, si on veut que la bannière soit visible, ce sera d'agrandir la taille du block "en_tete" afin qu'il puisse contenir la bannière entière.
Comme notre bannière fait 758x100pixels, on va définir une largeur et une hauteur de ces dimensions :
width:758px;
height:100px;
2. Ensuite, on va indiquer quelle image de fond on veut mettre à notre grand block qui est pour l'instant vide :
background-image:url("images/banniere.png");
3. Normalement notre fond n'a la place d'apparaître qu'une seule fois, mais ça ne nous coûte pas grand chose de s'assurer que cette image ne sera pas répétée en mosaïque avec
background-repeat :
background-repeat:no-repeat;
4. Enfin, c'est un détail mais afin d'éviter que l'en-tête ne soit trop collé avec ce qui se trouvera dessous (le menu et le corps), on va définir une petite marge en-dessous (margin-bottom) de
quelques pixels :
margin-bottom:10px;

Le menu

Il va nous falloir placer le menu "à gauche" du corps, alors que pour l'instant le menu se trouve au-dessus.

Pour faire cela, la technique la plus courante et la plus rapide, c'est d'utiliser la propriété CSS float. On va aussi donner une taille de 120 pixels au menu, pour qu'il ne soit pas trop grand.

Ensuite, nous allons travailler sur notre classe "sousmenu" (qui correspond à une partie de menu). On va lui mettre une couleur de fond un peu plus gris foncé, une image de fond en repeat-x (qui
se répètera uniquement horizontalement).

Ensuite, on rajoutera une bordure à chaque élement de menu pour qu'on voie bien ses limites. "2px" solid black.

Enfin, on mettra un margin-bottom à chaque élément de menu pour éviter qu'ils ne soient trop collés les uns par rapport aux autres.
Maintenant, on va se servir des "imbrications de balises".
Rappelons :
.element_menu ul
... cela signifie "Ce CSS va concerner les balises <ul> se trouvant à l'intérieur d'un element_menu".
Le corps

Pour le corps, il va être important de définir de bonnes marges.

Le problème qu'on va régler en priorité, c'est le texte du corps qui passe "sous" le menu quand il est trop long. C'est un comportement normal car on a fait un float:left sur le menu.

Comment éviter que le texte passe sous le menu ?

Il suffit de modifier la marge "à gauche" du corps. C'est une marge extérieure, donc un margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne passe plus sous le menu (donc une valeur supérieure à la largeur du menu). Ici par exemple, on va
mettre une valeur de 140px.

On va aussi rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop "collé" au corps :
margin-bottom:20px;

On va aussi mettre un petit padding (marge intérieure) sur tous les côtés afin que le texte ne colle pas trop avec les bords du corps :
padding:5px;
On va aussi mettre une couleur de fond, une petite image de fond qui se répète horizontalement, une bordure...
Il nous reste quelques petits trucs à décorer dans notre corps. Par exemple, les titres : on va changer leur police pour mettre une "Arial" plus jolie sur les titres.

On va aussi rajouter une image de fond sur les titres h2, avec background-repeat:no-repeat;, ce qui signifie que le fond ne se répètera pas (il restera donc à gauche).
Pour éviter que le texte du titre ne s'écrive sur l'image de fond, on met un padding-left de quelques pixels. Comme ça, on aura une image d'engrenage devant chaque titre <h2> automatiquement !

Le pied de page
les feuilles de styles alternatives.
En fait, si vous avez fait plusieurs designs pour votre site , vous pouvez proposer aux visiteurs de changer d'un seul coup le design.
Pour cela, vous devez rajouter des balises <link /> entre <head> et </head>.

En plus de la balise qui indiquera le design "par défaut" de votre site, vous pourriez rajouter cette ligne à la suite :

<link rel="alternate stylesheet" media="screen" type="text/css" title="Design 2 " href="design_2.css" />

Cette ligne indique qu'il existe une feuille de style alternative ("alternate stylesheet"). Si le visiteur dispose d'un navigateur suffisamment récent , il pourra choisir le design de votre site qui lui plaît.
Pour info, si vous utilisez Firefox il suffit d'aller dans le menu "Affichage > Style de la page" et de choisir le design que vous voulez.

Vous pouvez mettre autant de feuilles de style alternatives que vous le désirez. Il vous faudra écrire une balise <link rel="alternate stylesheet" /> par design différent que vous proposez.
Annexe 1 : Les DTD HTML4.01 et XHTML1.0 : comment
choisir ?
Si vous avez adopté la démarche de mise en conformité de votre site Web avec les Standards (X)HTML et
CSS définis au sein du W3C, ou si vous vous apprêtez à le faire, vous ne pouvez manquer d'avoir à placer,
en tête de chacune de vos pages, la portion de code du type :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Il s'agit de ce que l'on appelle une Déclaration de Type de Document (DTD), également nommée
"doctype". Ci-aprés une introduction à cette notion, suivie d'un rapide descriptif des 6 DTD entre
lesquelles vous serez le plus souvent amenés à faire le choix.

DTD, Qu'est-ce que c'est ? A quoi ça sert ?

Le doctype et la Définition de Type de Document

Le "Doctype", souvent appelé DTD (Déclaration de Type de Document) sert à indiquer à quelles règles
d'écriture obéit le code d'une page HTML ou XHTML. Ces règles sont en fait contenues dans des documents
assez particuliers, les Définitions de Type de Document (abrégé également sous la forme DTD), écrites dans
un langage particulier, et hébergées sur le site du W3C .

A qui sert la DTD ?

Contrairement à ce qu'on pourrait croire, elle ne sert pas aux navigateurs Web actuels à comprendre la
structure d'une page (X)HTML : ceux-ci "lisent" ce code (X)HTML sans se servir de la DTD pour le déchiffrer,
en se servant seulement des "règles" contenus dans leur propre "moteur" .

En revanche, la DTD est indispensable aux validateurs (X)HTML comme celui du W3C, qui en ont besoin pour
savoir à quelles règles le document est supposé obéir.

Choisir sa DTD, version détaillée

On dispose actuellement, de 6 DTD. Ni plus, ni moins. En pratique, deux d'entre elles suffisent à répondre à
la majorité des besoins. Qu'est-ce qui les différencie ? Essentiellement :

● Des règles de syntaxe HTML différentes : vous n'écrirez pas votre balisage de la même manière ;
● Un stock de balises légèrement différent entre les trois catégories transitionnelle, stricte et
frameset, sachant que la principale différence concerne les balises servant uniquement à créer des
effets de présentation du texte. Ces effets peuvent être gérés de manière plus simple et plus souple à
l'aide des styles CSS. D'autant plus, pour tout dire, qu'il s'agit des propriétés CSS les plus faciles à
mettre en oeuvre (alignement du texte, apparence des bordures, italique et couleurs, etc.). ;

C'est donc à vous de choisir en fonction des contraintes que vous êtes prêts à accepter dans l'écriture de
votre code, sachant qu'accepter une grammaire plus contraignante (XHTML) ne vous compliquera pas la
tâche, au contraire : vous devrez évidemment être plus soigneux dans l'écriture de votre code ou dans le
choix de votre outil d'édition. Mais vous compenserez largement cet effort en produisant un code dont
l'interprétation (et donc le rendu) n'est pas ambiguë.

Voici, à titre indicatif, les principaux critères de choix entre ces différentes DTD :

HTML4.01 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">

● le document est du HTML : il ne peut pas être traité comme du XML ;


● pas de balises propriétaires (<marquee>, <embed>, etc) ;
● la fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et
td est optionnelle ;
● les balises peuvent être écrites en majuscules ou en minuscules ;
● pour les valeurs des attributs HTML, les guillemets peuvent être omis si la valeur de l'attribut ne
contient que des lettres (a-z et A-Z), des chiffres (0-9), le caractère trait d'union (-), le caractère
virgule (,), le caractère souligné (_) et le caractère deux-points (:) ;
● les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION
selected="selected">
● les attributs et éléments de présentation suivants sont autorisés :
❍ Eléments BASEFONT et FONT ;
❍ Eléments CENTER, U, STRIKE et S ;
❍ Attributs ALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT de l'élément BODY ;
❍ Attributs BGCOLOR, HEIGHT, NOWRAP, WIDTH des éléments internes de tableaux ;
❍ Attributs BORDER, HSPACE, VSPACE des images et objets ;
❍ Attributs CLEAR, NOSHADE, SIZE, WIDTH des lignes de séparation HR ;
❍ Attributs COMPACT, TYPE des éléments de liste, et attributs START, VALUE des listes
numérotées ;
❍ Attribut WIDTH de l'élément PRE ;
● l'attribut target des liens est autorisé ;
● les éléments IFRAME sont autorisés (mais pas FRAMESET ni FRAME) ;

HTML4.01 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Comme en HTML4.01 transitional :

● le document est du HTML : il ne peut pas être traité comme du XML ;


● pas de balises propriétaires (<marquee>, <embed>, etc) ;
● la fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et
td est optionnelle ;
● les balises peuvent être écrites en majuscules ou en minuscules ;
● pour les valeurs des attributs HTML, les guillemets peuvent être omis si la valeur de l'attribut ne
contient que des lettres (a-z et A-Z), des chiffres (0-9), le caractère trait d'union (-), le caractère
virgule (,), le caractère souligné (_) et le caractère deux-points (:) ;
● les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION
selected="selected">

Mais, à l'inverse du HTML4.01 transitionnel :

● les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être
remplacés par des styles CSS ;
● l'attribut target des liens n'est pas autorisé ;
● les IFRAME ne sont pas autorisés (ni FRAMESET et FRAME).

HTML4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"


"http://www.w3.org/TR/html4/frameset.dtd">

Les règles sont identiques à HTML4.01 transitionnel, mais l'élément BODY n'existe plus. Il est remplacé par
l'élément FRAMESET, qui contient les éléments FRAME.

XHTML1.0 transitional :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML
(ce qui est plus compliqué, et qu’Internet Explorer ne sait pas faire correctement dans ce cas).

Les règles de syntaxes sont différentes de celles du HTML :


● les balises propriétaires ne sont pas autorisées ;
● toutes les balises sans exceptions doivent être fermées ;
● toutes les balises et leurs attributs doivent être en minuscules ;
● les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il
faut écrire uniquement <option selected="selected"> ;
● les guillemets sont obligatoires autour de toutes les valeurs d’attributs ;

Mais, exactement comme en HTML4.01 transitionnel (si ce n'est le fait de les écrire en minuscules) :

● les attributs et éléments de présentation suivants sont autorisés :


❍ Eléments basefont et font ;
❍ Eléments center, u, strike et s ;
❍ Attributs alink, background, bgcolor, link, vlink, text de l'élément body ;
❍ Attributs bgcolor, height, nowrap, width des éléments internes de tableaux ;
❍ Attributs border, hspace, vspace des images et objets ;
❍ Attributs clear, noshade, size, width des lignes de séparation hr ;
❍ Attributs compact, type des éléments de liste, et attributs start, value des listes
numérotées ;
❍ Attribut width de l'élément pre ;
● l'attribut target des liens est autorisé ;
● les éléments iframe sont autorisés (mais pas frameset ni frame) ;

Bref : le stock de balises disponibles est le même qu’en HTML4.01 transitional, mais leur syntaxe est plus
rigoureuse.

XHTML1.0 strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Comme en XHTML1.0 transitionnel, les règles de syntaxe sont strictes :

● Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme
du XML (ce qui est plus compliqué, et qu’Internet Explorer ne sait pas faire correctement dans ce
cas) ;
● les balises propriétaires ne sont pas autorisées ;
● toutes les balises sans exceptions doivent être fermées ;
● toutes les balises et leurs attributs doivent être en minuscules ;
● les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il
faut écrire uniquement <option selected="selected"> ;
● les guillemets sont obligatoires autour de toutes les valeurs d’attributs ;
Mais, à l’inverse du XHTML1.0 transitionnel, et exactement comme en HTML4.01 Strict :

● les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être
remplacés par des styles CSS ;
● l'attribut target des liens n'est pas autorisé ;
● les iframe ne sont pas autorisés (ni frameset et frame).

Bref: le stock de balises disponible est le même qu’en HTML4.01 strict, mais leur syntaxe est plus rigoureuse.

XHTML1.0 frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Les règles sont identiques à XHTML1.0 transitionnel, mais l'élément body n'existe plus. Il est remplacé par
l'élément frameset, qui contient les éléments frame.

Bref : le stock de balises disponibles est le même qu’en HTML4.01 frameset, mais leur syntaxe est plus
rigoureuse (vous l’aviez deviné, n’est-ce pas ?)

Choisir sa DTD

Utilisez de préférence XHTML1.0 Strict : c’est a priori la plus adaptée à vos besoins et c’est la plus facile à
utiliser et à apprendre.

Si vous utilisez des iframe ou un attribut target, Utilisez XHTML1.0 transitional.

si vous voulez utiliser les frameset et frame : utilisez la DTD XHTML1.0 frameset.

Conclusion

En guise de conclusion, soulignons 4 constats sur lesquels les malentendus sont fréquents :

● XHTML1.0 ne sépare pas plus le contenu et la présentation qu'HTML4.01 : dans les deux cas, c'est en
fait le choix entre strict et transitional qui fait la différence ;
● Aucune de ces DTD n'apporte plus d'accessibilité a priori : XHTML1.0 n'est pas plus accessible
qu'HTML4.01. C'est l'usage que vous en ferez qui fera la différence ;
● XHTML1.0 n'apporte aucun gain “sémantique” par rapport à HTML4.01, dont il reprend les éléments
et la quasi-totalité des attributs. Là encore, c'est ce que vous en ferez qui fera la différence.
● Mais XHTML1.0 n'est pas plus difficile à apprendre qu'HTML4.01, au contraire : la syntaxe rigoureuse
limite les risques d'erreurs ;
Aller au menu - Aller au contenu

Annexe 2 : Liste des propriétés CSS

Cette liste est non exhaustive des propriétés CSS qui existent.

Police, taille et décorations

Type Nom Valeurs possibles

Indiquer les noms de polices possibles par ordre de préférence :

Code : CSS

1 font-family:police1, police2, police3;

Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la police 2, puis la police 3 etc.
Nom de police font-family
Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière
police possible "serif" ou "sans-serif".

Code : CSS

1 font-family: "Arial Black", Arial, Verdana, serif;

Indiquez la taille du texte.


Plusieurs unités sont possibles :

● px (pixels)
● % (pourcentage, 100% = normal)
● em (taille relative, 1.0 = normal)
● ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
● nom de taille :
Taille du texte font-size
❍ xx-small : très très petit
❍ x-small : très petit
❍ small : petit
❍ medium : moyen
❍ large : grand
❍ x-large : très grand
❍ xx-large : très très grand
bold : gras
bolder : plus gras
Gras font-weight
lighter : plus fin
normal : pas gras (par défaut)
italic : italique
Italique font-style oblique : autre façon de mettre en italique
normal : normal (par défaut)
underline : souligné
overline : ligne au-dessus
Décoration text-decoration line-through : barré
blink : clignotant
none : normal (par défaut)
small-caps : petites capitales
Petites capitales font-variant
normal : normal (par défaut)
uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
Capitales text-transform
capitalize : début des mots en majuscules
none : normal (par défaut)
Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style, font-size, font-variant, font-
family.
Attention exception : le nom de la police (font-family) doit être placé en dernier dans la liste dans tous les cas.
Vous n'êtes pas obligés de mettre une valeur de chacune de ces propriétés.

Exemple :
Méga-propriété
font Code : CSS
de police

1 font: bold, 16px, Arial;

Cela mettra votre texte en gras, 16 pixels, Arial.

Alignement

Type Propriété Valeurs possibles


left : à gauche (par défaut)
center : centré
Alignement horizontal text-align
right : à droite
justify : texte justifié (prend toute la largeur de la page)
A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus dans un élément inline.

Alignement vertical vertical-align top : en haut


middle : au milieu
bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)
Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes.
Alinéa text-indent
Vos paragraphes commenceront avec le retrait que vous avez indiqué.
normal : le passage à la ligne est automatique (par défaut)
Césure white-space nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme <br /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise xHTML <pre>)

Propriétés de couleur et de fond

Couleur

Type Propriété Valeurs possibles


Indiquer une couleur avec l'une des méthodes suivantes :

● En tapant le nom de la couleur en anglais (black, blue, green, white, red...).


Couleur de texte color
● En indiquant la couleur en hexadécimal (#CC48A1)
● En indiquant la couleur en RGB : rgb (128, 255, 0)

Couleur de fond background-color Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte

Image de fond

Type Propriété Valeurs possibles


Indiquer l'url de l'image (notation absolue ou relative)
Code : CSS

background-image:url("images/fond.png"); /* Notation relative */


Image de background- 1 background-image:url("http://www.monsite.com/images/fond.png"); /* Notation absolue
fond image 2 */

background- fixed : le fond reste fixe quand on descend plus bas sur la page
Fond fixé
attachment scroll : le fond défile avec le texte (par défaut)
repeat : le fond se répète (par défaut)
Répétition background- repeat-x : le fond ne se répète que sur une ligne, horizontalement
du fond repeat repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
2 façons de faire :

● En notant une distance en px ou %, par rapport au coin en haut à gauche.

Code : CSS

1 background-position:50px 200px; /* 50 px à droite, 200px en bas */

● En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale :
top : en haut, verticalement
Position background- center : au milieu, verticalement
du fond position bottom : en bas, verticalement

left : à gauche, horizontalement


center : au centre, horizontalement
right : à droite, horizontalement

Code : CSS

1 background-position : bottom right; /* en bas à droite */

Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background-attachment,
background-position.
L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les valeurs de ces propriétés (au moins
une suffit)
Méga-
Code : CSS
propriété background
de fond
1 /* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */
2 background:url("images/fond.png") no-repeat fixed top right;
Propriétés des boîtes

Dimensions

Type Propriété Valeurs possibles


Largeur width Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
Hauteur height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur maximale max-width Idem
Hauteur minimale min-height Idem
Hauteur maximale max-height Idem

Marges extérieures

Type Propriété Valeurs possibles


Marge en
margin-top Indiquer une valeur comme 20px, 1.5em...
haut
Marge à
margin-left Idem
gauche
Marge à margin-
Idem
droite right
Marge en margin-
Idem
bas bottom
Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

● 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite


● 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
● 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la
marge du bas
● 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Méga-
propriété margin
de marge Par exemple, si je mets 2 valeurs :

Code : CSS

1 margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */


Marges intérieures

Type Propriété Valeurs possibles


Marge intérieure en haut padding-top Indiquer une valeur comme 20px, 1.5em...
Marge intérieure à gauche padding-left Idem
Marge intérieure à droite padding-right Idem
Marge intérieure en bas padding-bottom Idem
Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification
change :

● 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite


● 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la
Méga-propriété de marge intérieure padding
gauche et la droite
● 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et
à droite, la troisième à la marge du bas
● 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Bordures

Type Propriété Valeurs possibles


Epaisseur de la
border-width Indiquer une valeur en px.
bordure
Couleur de la
border-color Indiquer une valeur de couleur.
bordure
none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
Type de bordure border-style dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple :

Bordure à Code : CSS


border-left
gauche
1 border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */

Bordure en haut border-top Idem


Bordure à droite border-right Idem
Bordure en bas border-bottom Idem
Méga-propriété
border Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.
de bordure

Propriétés de positionnement et d'affichage

Affichage

Type Propriété Valeurs possibles


none : l'élément ne sera pas affiché
block : l'élément devient de type "block" (bloc, comme <p>)
Type d'élément display
inline : l'élément devient de type "inline" (en ligne, comme <strong>)
list-item : l'élément devient de type "élément de liste à puce" (comme <li>)
hidden : masqué
visible : visible (par défaut)
Affichage visibility
display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui
continue quand même à prendre de la place sur l'écran.
Indiquer 4 valeurs comme ceci :

Code : CSS

1 clip: rect(valeur1, valeur2, valeur3, valeur4);


Afficher
seulement une clip
partie

Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera
affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.
visible : tout l'élément sera affiché (par défaut).
hidden : l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du
texte coupée.
Limiter les
overflow scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera
dimensions
des barres de défilement pour qu'on puisse voir la suite du texte.
auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. Bien souvent,
utiliser cette valeur revient à utiliser la valeur "scroll".

Positionnement

Type Propriété Valeurs possibles


left : flottant à gauche
Flottant float right : flottant à droite
none : pas de flottant (par défaut)
left : supprime l'effet d'un flottant à gauche précédent
right : supprime l'effet d'un flottant à droite précédent
Stopper un flottant clear
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut)
absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on
Type de positionnement position descend plus bas dans la page.
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal (par défaut)
Position par rapport au haut top Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
Position par rapport au bas bottom Idem
Position par rapport à gauche left Idem
Position par rapport à droite right Idem
En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel
élément doit être affiché au-dessus de l'autre.
Ordre d'affichage z-index Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.

Par exemple, si vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour
l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.

Propriétés des listes

Type Propriété Valeurs possibles


● Pour les listes non ordonnées (<ul>) :
❍ disc : un disque noir (par défaut).
❍ circle : un cercle.
❍ square : un carré.
❍ none : aucune puce ne sera utilisée.

● Pour les listes ordonnées (<ol>) :


❍ decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
Type de liste list-style-type ❍ decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). Ne fonctionne
pas sur Internet Explorer
❍ upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
❍ lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
❍ upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
❍ lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
❍ lower-greek : numérotation grecque. Ne fonctionne pas sur Internet Explorer

list-style- inside : sans retrait


Position en retrait
position outside : avec retrait (par défaut)
Indiquer l'url de l'image qui servira de puce. Exemple :

Code : CSS
Puce personnalisée list-style-image list-style-image: url("images/puce.png");
1
Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas
obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.
Exemple :

Méga-propriété de liste list-style Code : CSS

1 list-style: inside square;

Propriétés des tableaux

Type Propriété Valeurs possibles


collapse : les bordures du tableau et des cellules sont mélangées.
Type de bordure border-collapse
separate : les bordures du tableau et des cellules sont séparées (par défaut).
show : les bordures des cellules vides sont affichées.
Cellules vides empty-cells
collapse : les cellules vides sont masquées (par défaut).
Indique la position du titre du tableau, défini via la balise <caption>

top : en haut du tableau


Position du titre caption-side bottom : en bas du tableau
left : à gauche du tableau
right : à droite du tableau

Autres propriétés

Type Propriété Valeurs possibles


auto : curseur automatique (par défaut)
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un lien
text : curseur utilisé quand on pointe sur du texte
wait : curseur utilisé pour indiquer une attente (sablier)
progress : curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)
help : curseur en forme de point d'interrogation, indiquant une aide
move : curseur en forme de croix, indiquant un déplacement possible

n-resize : flèche vers le nord


ne-resize : flèche vers le nord-est
e-resize : flèche vers l'est
se-resize : flèche vers le sud-est
s-resize : flèche vers le sud
Curseur de souris cursor sw-resize : flèche vers le sud-ouest
w-resize : flèche vers l'ouest
nw-resize : flèche vers le nord-ouest

url : curseur personnalisé, de type .cur ou .ani. Exemple :

Code : CSS

1 cursor: url("images/curseur.cur");

Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani