Il est de bon ton de se souhaiter la bonne année. Mais vous, et vous seul, pourrez faire en sorte que cette année soit bonne, meilleure que celle qui vient de s'écouler. Apprenez à ne compter que sur vous, car personne n'est plus qualifié que vous-même pour bâtir, réparer ou améliorer votre propre vie. Personne ne fera les choses à votre place. D'ailleurs, tout ce que les autres peuvent faire, c'est souhaiter que vous le fassiez. Et ne croyez pas que tout ceux qui vous entourent vous apporteront des solutions : certains font juste partie de vos problèmes. Transformez vos résolutions en actes, et dans douze mois, retournez-vous et souriez-vous fièrement : C'était long. C'était difficile. Mais ça y est : 2017 était une bonne année, merci Moi.

Logo

CSS (Cascading Style Sheet - Feuilles de style en cascades) est un "système" qui permet de pallier aux graves insuffisances du langage HTML.

Page HTML de base

Balise Block et InLine

Héritage de l'élément parent

Liens hypertexte

Première lettre/ligne

Endroits où placer ses sélecteurs

Commentaires

Redéfinition d'une balise existante

Création d'une balise inexistante

Création d'une classe

Création d'un ID

Utilisation de * et body pour tous les éléments

Sélecteurs sensibles à la casse

Combinaison de plusieurs classes

Création d'une classe pour une balise spécifique

Les balises génériques SPAN et DIV

Poids sémantique

Balises imbriquées

Caractéritiques définies pour plusieurs balises à la fois

Une balise qui en suit une autre

Enfants et descendants

Utilisation du joker * pour les descendants

Attention aux espaces

Ajout automatique de texte

Utilisation de paramètres

Majuscules et minuscules

Styles différents selon le mode d'affichage

Cascade (Surcharge)

Feuille de style CSS locale au navigateur

le mot-clé !important

Balises prédéfinies XHTML

Polices de caractères

Gras, Italique et petites majuscules

Taille des polices

Listes à puce et numéros

Listes de définitions DL, DT

Unités de mesures

Encadrements

Images de fond

Interligne

Liens externes

La tableaux sont traités dans cette page à part.

Avant de parler de "Cascade", ou même de "Feuille", nous allons parler de "Style".

Lorsque vous concevez une page web, vous désirez qu'elle soit jolie : qu'elle ait une couleur de fond, des images, et du texte formaté différemment selon ce que vous voulez écrire.

Un peu comme cette page elle-même, d'ailleurs ! Vous voyez le petite texte d'introduction en blanc sur fond gris noir ? C'est stylé, non ?

Il y a quelques années, on se contentait de coder en HTML (HyperText Markup Language), et une page web pouvait ressembler à ceci :

Les chats

Les chats sont de sympathiques animaux de compagnie.

Leur nourriture

Les chats mangent principalement de la viande. Ce sont des "Canivores".

Code HTML correspondant :
<h1>
Les chats</h1>

<p>
<FONT COLOR="#CC0000">
Les chats sont </FONT>
de
<strong>
sympathiques </strong>
</p>

<h2>
Leur nourriture </h2>

<p>
<FONT COLOR="#CC0000">
Les chats mangent </FONT>
principalement de la viande. Ce sont des &quot;
<em>
Canivores </em>&quot;.

</p>

Vous comprenez aisément le fonctionnement : les balises telles que <h1>, ou <em>, encadrent le texte qu'il s'agit de mettre en forme.

Par exemple, <h1> veut dire "Header 1", soit "Titre 1", c'est à dire un tout gros titre. <h2>, veut dire un titre moins gros, et <em> : italique.

Ainsi, vous savez que ce qui est écrit en <h1> apparaîtra en gros sur l'écran.

Oui, mais gros comment ? Beaucoup plus gros que <h2> ? Et pourquoi en noir et pas en bleu par exemple ?

En fait, beaucoup de choses vont dépendre du navigateur utilisé. Internet Explorer n'affiche pas les choses exactement comme FireFox ou Safari, ou Google Chrome ou Opéra.

Nous avons peu de contrôle, car nous ne savons pas quel navigateur nos visiteurs vons utiliser pour visiter notre belle page web.

Comment puis-je savoir si vous utilisez FireFox, Internet Explorer ou un autre navigateur ?

2ème problème : vous voyez que le début de nos deux phrases sont écrites en rouge. Et si tout à coups, vous vouliez les écrire en vert par exemple ?

Evidemment, il n'y a qu'à les sélectionner l'une puis l'autre, et les mettre en vert, tiens !

Mais maintenant, imaginez que j'ai 40 pages web, avec, au total, 850 débuts de phrases rouges.... J'aurai tôt fait de me dire : "Oh puis zut, je les laisse en rouge ! Je n'ai pas le courage de les transformer en bleu l'une après l'autre, j'en ai pour l'après-midi !"

Le CSS va pallier à tout ça, et bien plus, vraiment bien plus encore !

Page HTML de base

Avant de se lancer dans les CSS, préparez une page HTML de base qui va ressembler à ceci :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ma belle page html</title>
<link href="feuillestyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body leftmargin="0px" rightmargin="0px" topmargin="0px" bottommargin="0px">
</body>
</html>

Balises block et inline

Il existe des balises de type Block et Inline.

Par exemple, la balise <p> est une balise de type block. <strong> est une balise de type inline (Mise en évidence : souvent en gras). Je n'ai rien défini en CSS, j'ai juste ce code :

<body>

un <p> deux </p> trois
<br />
quatre <strong> cinq </strong> six

</body>

Qui va donner :

un
deux
trois
quatre cinq six

Les balises de type block impliquent, imposent donc, un saut de paragraphe avant et après. Tandis que les balises inline ne font pas ça.

Il existe une balise inline neutre et block neutre (Qui n'imposent aucune mise en forme. C'est <div> et <span>

un <div> deux </div> trois
<br />
quatre <span> cinq </span> six

qui donne :

un
deux
trois
quatre cinq six

Il est possible de contrarier les prédéfinitions HTML. Par exemple, admettons que vous désiriez utiliser la balise <blockquote> en mode inline, on peut faire comme ceci.

sans définition CSS :
<body>
un <blockquote> deux </blockquote> trois
</body>

Qui va donner :

un
     deux
trois

Avec définition CSS "contrariante" :

<head>
<style type="text/css">

blockquote {display:inline;}

</style>
</head>
<body>

un <blockquote> deux </blockquote> trois
</body>

Qui va donner :

un deux trois

Il faut faire attention aux balises imbriquées. A l'intérieur d'un <div>, on peut imbriquer d'autres balises inline ou block (y compris d'autres <div>), mais pour les balises prédéfinies, c'est une autre histoire, et rien n'est simple.

Une chose est certaine : il est "interdit" imbriquer une balise de block dans une balise inline. Toutefois, si on se risque à l'exercice, on obtient un résultat probant.

<p> est une balise de block. Elle ne peut théoriquement pas contenir d'autres balises de block : seulement des balises inline. Or, quand on teste le code suivant, dans lequel l'insère une balise <div> au sein d'un <p>, ça fonctionne dans Google Chrome, Internet Explorer et FireFox :

<p>
un

<div>
   Deux
</div>

trois
</p>

</body>

un
deux
trois

Pour voir le détail de ces exceptions, voyez cette page sur Alsa-créations.

En sortant de cette page, on est tenté de remplacer toutes les balises par des <span> et des <div> uniquement. Ce qui est possible, mais rend la page incompréhensible au niveau de la sémantique (par exemple sur les moteurs de recherche). D'autre part, on perd ainsi certaines fonctions prédéfinies pratiques au sein du logiciel de conception de site web, comme DreamWeaver par exemple.

Héritage de l'élément parent

Les valeurs des éléments sont en rapport à l'élément parent (enveloppant). Prenons l'exemple de marges :

<head>
<style type="text/css">

.truc{margin-left: 100px;}
.machin{margin-left: 100px;}

</style>
</head>

<body left-margin="0px right-margin="0px" top-margin="0px" bottom-margin="0px">
un
<div class="truc">
deux
<div class="machin">
   trois
</div>
</div>
</body>

Qui va donner :

un
     deux
           trois

"trois" est donc décalé de 100 pixels par rapport à sa balise parente "truc". Et "truc" est décalé de 100 pixels par rapport à sa balise parente qui est tout définie à 0 : <body>

Différence entre cascade et héritage

L'héritage est la passation d'une propriété de haut en bas. La cascade est la résolution des conflits.

Comme ceci :

<style type="text/css"
.truc {background-color:#FFFF00;color:#FF0000}
.truc {background-color:#FF99FF}
</style>
</head>
<body>
<p class="truc" style="background-color:#00CCFF">J'ai un fond bleu, une écriture rouge</p>

Nous avons la classe truc définie en fond jaune. Immédiatement, elle est écrasée par un fond rose, et finalement, re-écrasée par une définition locale bleue. Ce phénomène d'écrasements successifs s'appelle "cascade".

Dans la première définition de la classe truc, l'écriture est définie en rouge, puis, on ne s'en occupe plus. Elle n'est plus écrasée. Donc, elle se propage naturellement "vers le bas". Cette propagation naturelle s'appelle "héritage".

Exceptions de l'héritage

Il existe des cas ou, heureusement, l'héritage ne s'applique pas. C'est le cas des balises inline incluses dans des balises de block. Bien qu'il soit tout à fait possible de créer des marges dans les balises inline, celles ci ne sont pas héritées de la balise parente. Dans cet exemple, la couleur de fond vert va être transmise d'armoire à tiroir, mais pas la marge de gauche :

<style type="text/css">
.armoire {background-color:#00FF00;
margin-left:20px;}
.tiroir{color:#FF0000;}
</style>
</head>
<body>

<div class="armoire">
Je suis un manteau. <span class="tiroir">je suis une chaussette</span>. Je suis une veste
</div>
</body>

Résultat (Marge de 20 pixels sur la gauche OK, même si on ne s'en rend pas compte) - Notez que le fond vert a été correctement hérité.

         Je suis un manteau. Je suis une chaussette. Je suis une veste

Regardez la différence avec le code suivant :

<style type="text/css">
.armoire {background-color:#00FF00;
margin-left:20px;}
.tiroir{color:#FF0000;margin-left:20px;}
</style>
</head>
<body>

<div class="armoire">
Je suis un manteau. <span class="tiroir">je suis une chaussette</span>. Je suis une veste
</div>
</body>

Cette fois, vous avez la marge de gauche du paragraphe, toujours OK, et, puisque l'héritage n'est pas entré en action, nous l'avons imposé à Tiroir, et vous constatez qu'il y a effectivement une marge de 20 pixels à gauche de "Je suis une chaussette" :

         Je suis un manteau.         Je suis une chaussette. Je suis une veste

Liens hypertextes

Les liens hypertextes peuvent être mis en forme lors de plusieurs événements.

Dans ce premier exemple, nous nous contentons de mettre en fond vert tous les liens hypertextes :

<style type="text/css">

a{background-color:#00FF00;}

</style>
</head>
<body>

<!-- Le lien hypertexte #, c'est simplement pourqu'il mène juste en haut de cette même page. On aurait évidemment pu mettre n'importe quelle adresse à la place -->
un <a href="#">deux</a> trois

Maintenant nous allons, à l'aide de ce qu'on appelle des pseudo-classes, déterminer les mises en formes des liens hypertexte lorsque :

  1. Le lien n'a pas encore été visité
  2. Le lien a déjà été visité
  3. La souris passe par dessus le lien (sans cliquer)
  4. La souris est sur le lien, et le bouton de la souris est appuyé

L'ordre de ces événements doit être ainsi : link - visited - hover et active, sinon ça ne fonctionne pas

<style type="text/css">

/* Cette mise en forme initiale ne sera du coup plus du tout utilisée */
{background-color:#00FF00;}/* Vert*/
a:link {background-color:#0066FF;} /* Lien pas encore visité : bleu*/
a:visited {background-color:#FFFF00;} /* Lien déjà visité : jaune */
a:hover {background-color:#FF66FF;} /* La souris passe par dessus (sans clic) : rose*/
a:active {background-color:#9999CC;} /* le bouton de la souris est appuyé : violet*/

</style>
</head>
<body>

un <a href="#">deux</a> trois <br/>
quatre <a href="#">cinq</a> six

Essayez :

un deux trois
quatre cinq six

Première lettre et première ligne

<style type="text/css">

.truc:first-letter{background-color:#00FF00}
.truc:first-line{background-color:#FF6600}

</style>
</head>
<body>

<p class="truc">un deux trois. un deux trois. un deux trois. <br/>
un deux trois. un deux trois. </p>

un deux trois. un deux trois. un deux trois.
un deux trois. un deux trois.

Endroits ou placer ses sélecteurs

Pour illustrer ceci, nous allons utiliser un fichier de base html : fichierbase.htm, premierefeuillestyleexterne, deuxiemefeuillestyleexterne et troisiemefeuillestyleexterne.

Pour des raisons pratiques, je commence par reproduire les feuilles de style externes.

premierefeuillestyleexterne.css

@import url(troisiemefeuillestyleexterne.css);

grisdanspremierefeuillestyleexterne
{
background-color: #333333;
color: #CCCCCC;
}

deuxiemefeuillestyleexterne.css

vertfoncedansdeuxiemefeuillestyleexterne
{
background-color: #00FF00;
color: #006600;
}

troisiemefeuillestyleexterne.css

violetdanstroisiemefeuillestyleexterne
{
background-color: #9900FF;
color: #CCCCFF;
}

fichierbase.htm

<head>

<link href="premierefeuillestyleexterne.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(deuxiemefeuillestyleexterne.css);
localpage
{
background-color: #00CCFF;
color: #0000CC;
}
</style>
</head>

<body>
<localbalise style="background-color:#FFFF00">Jaune, couleur par défaut noir</localbalise> <br/>
<localbalise style="background-color:#FF6600;color:#990000">Rouge fonce sur orange</localbalise> <br/>
<localpage>bleu foncé sur bleu clair</localpage> <br/>
<localpage style="color:#006600">vert foncé sur bleu clair</localpage> <br/>
<grisdansfeuillestyleexterne>Gris, depuis la 2ème feuille de style</grisdansfeuillestyleexterne> <br/>
<vertfoncedansdeuxiemefeuillestyleexterne>Vert, depuis la feuille de style externe</vertfoncedansdeuxiemefeuillestyleexterne> <br/>
<violetdanstroisiemefeuillestyleexterne>Violet, depuis la 3ème feuille de style, (appelée depuis la 1ère feuille de style)</violetdanstroisiemefeuillestyleexterne> <br/>
</body>

définitions locales à la balise

<localbalise style="background-color:#FFFF00">Jaune, couleur par défaut noir</localbalise>

Nous avons ici une balise localbalise qui a simplement la propriété background-color définie à jaune. Toutes les autres propriétés sont les propriétés par défaut (couleur de caractères noire, police arial, etc.)

<localbalise style="background-color:#FF6600;color:#990000">Rouge fonce sur orange</localbalise>

Nous réutilisons local balise, avec simplement cette fois deux propriétés. Nous avons, en plus, la couleur de police qui est définie.

Ces définitions sont un peu contraires à la philosophie des CSS qui veut que l'on puisse réutiliser les mises en formes. Or, ici, c'est du coup par coup.

définitions locales à la page html

<localpage>bleu foncé sur bleu clair</localpage> Cette définition est puisée dans la section <head>, à l'intérieur de <style type="text/css"> <localpage style="color:#006600">vert foncé sur bleu clair</localpage>

Cette mise en forme est hybride. Elle va également chercher sa définition dans la section <style type="text/css">, mais elle écrase localement la couleur de caractères.

définitions dans des fichiers CSS externes

Il y a deux syntaxes d'appel d'un fichier CSS externe :

  1. <link href="premierefeuillestyleexterne.css" rel="stylesheet" type="text/css">
    (Cette ligne se place avant ou après la section <style>, dans le <head>)
  2. @import url(deuxiemefeuillestyleexterne.css);
    (Cette ligne se place au sein de la section <style>, dans le <head>)

La 2ème méthode comporte l'avantage de pouvoir aussi s'écrire dans un fichier CSS. D'ailleurs, dans mon exemple, premierefeuillestyleexterne.css appelle troisiemefeuillestyleexterne.css de cette manière.

On peut ainsi avoir une cascade de feuilles externes CSS.

<grisdansfeuillestyleexterne>Gris, depuis la 2ème feuille de style</grisdansfeuillestyleexterne>

Cette mise en forme provient donc clairement de premierefeuillestyleexterne.css

<vertfoncedansdeuxiemefeuillestyleexterne>Vert, depuis la feuille de style externe</vertfoncedansdeuxiemefeuillestyleexterne>

Cette mise en forme provient donc clairement de deuxiemefeuillestyleexterne.css

<violetdanstroisiemefeuillestyleexterne>Violet, depuis la 3ème feuille de style, (appelée depuis la 1ère feuille de style)</violetdanstroisiemefeuillestyleexterne>

Et enfin, cette mise en forme provient de troisiemefeuillestyleexterne.css, elle même appelée par premierefeuillestyleexterne.css, elle-même appelée depuis le fichier html fichierbase.htm.

Commentaires

Les commentaires ne se délimitent pas de la même manière en html ou en css :

<head>
<!-- Nous sommes dans html (head) -->

<style type="text/css">
/* Définition d'un style vert*/
.truc{background-color:#00FF00;}
</style>

</head>

<body>
<!-- Nous sommes dans html (body) -->

<div class="truc"> Vive les commentaires </div>
</body>

</html>

Redéfinition d'une balise existante

<style type="text/css">
p{background-color:#00FF00;}
</style>
</head>
<body>
<p> Je suis un paragraphe </p>
</body>

Création d'une balise inexistante

<style type="text/css">
machin{background-color:#00FF00;}
</style>
</head>
<body>
<machin> Je suis un paragraphe </machin>
</body>

Attention : cette technique fonctionne dansd FireFox, mais PAS dans Internet Explorer.

Cette technique ressemble un peu à la suivante.

Création d'une classe

Le point "." qui précède fondvert veur dire qu'il s'agit d'une classe. Une classe qui peut s'adapter à toute sorte de balise (ici : p et h1)

Ce qui veut donc dire qu'on pourra également définir des classes uniquement pour certaines balises.

En réalité, le point est l'écriture raccourcie de *.

On aurait pu écrire *.fondvert {background-color:#00FF00;}

<style type="text/css">
.fondvert{background-color:#00FF00;}
</style>
</head>
<body>
<h1.fondvert>Je suis un titre en vert</p>
<p.fondvert> Je suis un texte normal en vert</p>
</body>

Création d'un ID (Sorte de classe)

Il est possible de créer des classes, qui sont utilisables autant de fois qu'on veut dans une page HTML, et on peut également créer des ID qui fonctionnent strictement de la même manière que les classes, mais les ID sont censés n'être représentés qu'une seule fois dans la page. Or, il n'y a aucune erreur si on utilise plusieurs fois le même ID.

Pour qu'une classe soit un ID, on remplace le point (.) par #, et class par ID, comme ceci :

<style type="text/css">
#truc{background-color:#00FF00;}
.machin{background-color:#FFFF00;}

</style>
</head> <body>

<truc> non </truc>
<machin"> non </machin>
</body>

ok

ok

ok

ok

non

non

Utilisation conjointe d'une classe et d'un id

En cas de conflit, l'id l'emporte sur la classe. Etudions ce cas d'école : nous avons un id armoire et une classe armoire :

<style type="text/css">
#armoire {background-color:#00FF00;}
.armoire{background-color:#FF0000;}
</style>
</head>
<body>

<div class="armoire">
Je suis la classe armoire
</div>

<div id="armoire">
Je suis l'id armoire
</div>

<div id="armoire" class="armoire">
Je suis à la fois la classe et l'id armoire. L'id l'emporte.
</div>

Utilisation de * et de <body> pour tous les éléments

Ici, toute la page est sur fond vert.

<head>
<style type="text/css">
*{background-color:#00FF00;}
</style>
</head>
<body>
<p> paragraphe écrit sur fond vert </p>
<h1> titre 1 écrit sur fond vert </h1>

</body>

Une autre possibilité aurait été de redéfinir la balise <body> :

<style type="text/css">
body{background-color:#00FF00;}
</style>

L'utilisation aurait été la même qu'avec l'étoile *.

Sélecteurs sensibles à la casse

<style type="text/css">
.truc{background-color:#00FF00;}
.trUc{background-color:#FFFF00;}
</style>
</head>
<body>
<p class="truc"> un </p>
<p class="trUc"> deux </p>
<p class="Truc"> trois </p>

un

deux

trois

Attention : ne vous amusez pas a créer deux sélecteurs avec la même orthographe mais une casse différente, car certains anciens navigateurs ne sont justement pas case-sensitive.

Combinaison de deux classes

<style type="text/css">
.fondvert{background-color:#00FF00;}
.ecriturerouge{color: #FF0000;}
</style>
</head>
<body>
<p class = "fondvert ecriturerouge"> Je suis écrit en rouge sur fond vert </p>
</body>

Il peut y avoir conflit, comme par exemple :

.ecriturerouge{color: #FF0000;}
.fondvert{background-color:#00FF00;color: #336600;}
<p class = "fondvert ecriturerouge"> ecriture jaune kaki sur fond vert clair </p>

Dans ce cas, c'est la règle de la cascade qui s'applique. C'est à dire que la priorité se donne de haut en bas.

Peu importe qu'il soit écrit <p class = "fondvert ecriturerouge"> ou <p class = "ecriturerouge fondvert">, .ecriturerouge est défini en premier et .fondvert en deuxième, donc, .fondvertécrase .ecriturerouge,d'ou l'écriture vert foncé qui supplante l'écriture rouge.

Création d'une classe pour une balise spécifique

Ici, fondvert ne peut s'appliquer à la balise h1. (il prendra la mise en forme par défaut).

p.fondvert{background-color:#00FF00;}
<p class = "fondvert"> paragraphe écrit sur fond vert </p>
<h1 class = "fondvert"> titre 1 pas écrit sur fond vert </h1>

Utilisation des balises génériques <span> et <div>

<span> est une balise dite "en ligne". C'est à dire qu'elle ne s'accomode pas des retours chariots. Comme ceci :

.fondvert {background-color:#00FF00;}
<body>
un
<span class = "fondvert">
deux
</span>
trois
</body>

Va afficher :

un deux trois

Même si dans le code source html "un", "deux" et "Trois" sont en dessous l'un de l'autre.

Bien. Voici <div>, avec la même classe :

.fondvert {background-color:#00FF00;}

un <div class = "fondvert"> deux </div> trois

Ce code va afficher :

un

deux
trois

Même si dans le code html, tout est écrit sur une seule ligne. Remarquez le fond vert qui prend toute la largeur de la page.

Poids sémantique

On peut être tenté d'écrire la totalité d'un site web à l'aide de balises <span> et <div>.

Dans l'exemple ci-dessous, on utilise une fois la balise <span> avec un attribut gras, et, juste en dessous, on utilise la balise prédéfinie en HTML <strong>

<style type="text/css">
.gras{font-weight: bold;}
</style>
</head>
<body>
un <span class="gras">deux</span> trois <br/>
un <strong>deux</strong> trois

un deux trois

un deux trois

Constatez que la balise prédéfinie s'appelle <strong> et pas <bold>. C'est à dire qu'elle a un sens plutôt sémantique que de mise en forme. Strong veut dire "fort" en français, c'est du texte fort, important.

Les navigateurs vont donc mettre ce texte en évidence. Et ils vont tous s'accorder pour écrire le texte dit "strong" naturellement en ... gras !

On ne peut pas exclure qu'une nouvelle mouture d'un navigateur, ou un navigateur un peu exotique, décide de mettre tous les textes <strong> en rouge par exemple.

Du coup, vous pourriez vous dire que pour garder la pleine maîtrise de l'affichage de voitre page web, vous préférez la technique du <span class="gras">.

L'inconvénient est que cette balise <span> n'est absolument pas comprise par les moteurs de recherche.

Comme personne (a part Larry Page et Sergey Brin, les fondateurs) ne connaît précisément les techniques qu'utilise Google pour référencer vos pages, vous risquez d'être moins bien référencé !

Tandis que si vous utilisez la balise <strong> (même avec une classe, ça ne dérange pas), Google peut se dire "tiens, ce terme est important, je vais faire en sorte que si un utilisateur le recherche, la page web apparaisse en meilleure position que s'il recherche du texte "normal".

Bien entendu, si vous mettez l'ensemble de votre page en <strong>, ça n'a plus de sens, et Google risque de vous considérer comme un tricheur.

Si l'histoire des navigateurs qui peuvent mettre le texte <strong> en rouge à la place de gras vous effraie, rien n'empêche de créer une classe comme ceci (imaginons que voius désiriez imposer la couleur bleu foncé) :

<style type="text/css">
strong

{
color:#000099;
font-weight: bold;
}

</style>
</head>
<body>

un <strong>deux</strong> trois

Note personnelle : Google, et tous les moteurs de recherche, se rendent bien compte que chacun programme ses pages HTML "à sa sauce". Du coup, je pense que ce fameux "poids sémantique" va perdre de plus en plus de son sens au profit du simple contenu de texte, qu'il soit encadré de div, span, strong, p, ou n'importe quoi d'autre.

Balises imbriquées

L'un des gros avantages des <span> et des <div> avec une balise prédéfinie, comme <p>, c'est que les <span> et <div> peuvent s'imbriquer, mais pas <p>

par exemple :

.fondvert{background-color:#00FF00}
.ecriturerouge{color: #FF0000;}
<p class = "fondvert"> debut <p class = "ecriturerouge">milieu</p> fin </p>

On pourrait s'attendre à quelque chose comme ceci :

debut

milieu

fin

Mais en fait, assez bizarrement, le début et le milieu fonctionnent bien mais pas la fin, comme ceci :

debut

milieu

fin

Par contre, avec <span> ou <div>, tout va bien :

.fondvert{background-color:#00FF00}
.ecriturerouge{color: #FF0000;}
<span class = "fondvert"> debut <span class = "ecriturerouge">milieu</span> fin </span>

debutmilieufin

La même chose avec <div> a simplement pour effet de passer à la ligne chaque élément :

<div class = "fondvert"> début <div class = "ecriturerouge">milieu</div> fin </div>

début
milieu
fin

Il est possible d'imbriquer des <span> dans des <div>. On peut aussi imbriquer des div dans des div, et des span dans des span (mais pas des div dans des span)

Caractéristiques définies pour plusieurs balises à la fois

p.fondvert, .ecriturerouge{font-style:italic}
.fondvert{background-color:#00FF00}
p.ecriturerouge{color: #FF0000;}
<p class = "fondvert"> fond vert, italique</p>
<p class = "ecriturerouge"> écriture rouge, italique</p>
<div class = "fondvert">fond vert, PAS italique</div>

La dernière ligne n'est pas en italique puisqu'il s'agit seulement de la classe fondvert de la balise <p>.

Une balise qui en suit une autre

On a la possibilité de donner une mise en forme à un sélecteur s'il en suit directement un autre, comme ceci :

<style type="text/css">
.truc {background-color:#00FF00}
.machin{background-color:#FFFF00}
.truc + .machin{background-color:#FF6600}
</style>
</head>
<body>
<p class="truc">un</p>
<p> deux </p>
<p class="machin">trois</p>
<p> quatre </p>
<p class="truc">cinq</p>
<p class="machin">six</p> <!-- en orange parce que ca suit directement truc -->
<p class="machin">sept</p>

Ce système de "+" permet de jongler habilement. Voici comment mettre en forme le 3ème paragraphe qui suit un titre <h1> :

<style type="text/css">
h1+p+p+p{background-color:#00FF00;}
</style>
</head>
<body>
<h1>Zero</h1>
<p> un </p>
<p> deux </p>
<p> trois </p>
<p> quatre </p>

Enfants et descendants

Il est possible de définir des classes qui soient effectives seulement lorsqu'elles font partie d'une certaine balise.

Comme ceci : Nous définissons un fond jaune pour toutes les classes .fondcouleur. Ensuite, nous précisions que tous les .fondcouleur qui sont inclus dans un <h1> sont oranges.

Et pour corser le tout, un 2ème niveau : toutes les classes .fondcouleur qui sont dans une classe (que nous n'avons pas mis en forme) .truc, elle même encapsulée dans <h1> appliqueront un fond gris.

C'est ce qu'on appelle des "descendants"

.fondcouleur{background-color:#FFFF00} /*Jaune*/
h1 .fondcouleur{background-color:#FF9900}/*Orange*/
h1 .truc .fondcouleur{background-color:#666666}/*Gris*/
<p class = "fondcouleur"> Je suis jaune </p>
<h1>
  normal sans fond
  <span class="fondcouleur">
    fond Orange
    <span class="truc">
      Fond orange
      <span class="fondcouleur">
        Fond gris
      </span>
      fond orange
    </span>
    fond orange
  </span>
  normal sans fond
</h1>

Ainsi, selon ce modèle, si nous avions une classe .fondcouleur incluse dans la classe .truc, elle même incluse dans (par exemple un <p> (à la place de <h1>), ce texte serait écrit en jaune, qui est la défnition "générique" de .fondcouleur.

Il y a une petite nuance entre "enfant" et "descendant". Une classe enfant doit directement descendre de la classe "père", comme ceci :

.truc {background-color:#00FF00}/*Vert*/
.fondcouleur{background-color:#666666}/*Gris*/
p>.fondcouleur{background-color:#FFFF00} /*Jaune*/
p .autrefondcouleur{background-color:#FF9900}/*Orange*/
EXEMPLE 1
<p class="fondcouleur">
  Fond gris
</p>
EXEMPLE 2
<p>
  <span class="fondcouleur">
     Fond jaune
  </span>
</p>
EXEMPLE 3
<p>
  <span class="truc">
    Fond vert
  </span>
</p>
EXEMPLE 4
<p>
  <span class="truc">
    <span class="autrefondcouleur">
      Fond orange
    </span>
  </span>
</p>
EXEMPLE 5
<p>
  <span class="truc">
    <span class="fondcouleur">
      Fond gris
    </span>
  </span>
</p>

 

Voici les nuances entre p>.fondcouleur et p .autrefondcouleur :

Exemple 1, nous avons la balise <p>, en classe "fondcouleur". Il n'y a aucune imbrication : fond gris !

Exemple 2 : Nous avons la balise <p>, dans laquelle il y a un span de classe fondcouleur : c'est le cas d'un enfant : .fondcouleur qui est "incrusté" dans la balise <p>. Le fond sera donc ... jaune !

Constatons que ce fond aurait pu être jaune ou orange si .autrefondcouleur s'était appelé fondcouleur. C'est la raison pour laquelle j'ai deux dénominations (En fait il aurait été orange, puisqu'il aurait respecté le principe d'écrasement (cascade) (Celui le plus bas l'emporte)

Exemple 3 : le fond vert, sans surprise

Exemple 4 : c'est ici que c'est très intéressant : nous avons le fond orange car .autrefondcouleur est un descendant de <p>, mais pas son enfant direct, puisqu'entre deux, il y a ... .truc !

Exemple 5 : tout aussi intéressant : le fond n'est pas jaune, parce que le signe ">" veut bien dire "enfant direct". C'est à dire qu'entre <p> et fondcouleur, il y a truc ! Du coup, on se rabat sur la définition "générique" : gris

Utilisation du joker * pour les descendants

Voici une manière de mettre en forme tous les textes qui se trouvent dans n'importe quelle balise, du moment que celle ci se trouve à l'intérieur d'un <div> en classe truc :

<style type="text/css">
div.truc * {background-color:#00FF00;}
</style>
</head>
<body>
<div>un <span>deux <b>trois </b> quatre</span>cinq</div>
<div class="truc">six <span>sept <b>huit </b> neuf</span>dix</div>

va donner (la balise <b> veut juste dire "gras") ceci : même s'il y a deux niveaux enfants (<span> et ensuite <b>), tout le monde (a part le texte directement inséré dans le <div>)sera en vert :

un deux trois quatre cinq
six sept huit neuf dix

Attention aux espaces

Parfois, le CSS est terriblement vicieux, et un espace peut provoquer des effets complètement différents.

Prenons ce premier exemple : nous définissons l'élément <div> lorsqu'il est en classe truc. Ainsi donc, seul "Un" sera écrit en vert.

<style type="text/css">
div.truc{background-color:#00FF00;}
</style>
</head>
<body>
<!-- Seule cette première ligne correspond à la définition : -->
<div class="truc"> un </div>

<div> deux</div>
<p class="truc">trois</p>
<div><p class="truc">quatre</p></div>

Bien. Maintenant, considérons qu'à la place de

div.truc{background-color:#00FF00;}

Nous avons :

div .truc{background-color:#00FF00;}

Comme vous le voyez, la différence est minime : il y a juste un espace entre div et.truc.

Et ça change TOUT !

Car maintenant, il ne s'agit plus de la définition de la classe truc de la balise <div>, mais d'une sous balise quelconque de classe truc qui se trouve à l'intérieur de la balise enveloppante <div>. On comprend mieux avec cet exemple :

<style type="text/css">
div .truc{background-color:#00FF00;}
</style>
</head>
<body>
<div class="truc"> un </div>
<div> deux</div>
<p class="truc">trois</p>
<!-- Seule cette dernière ligne correspond à la définition : -->
<div><p class="truc">quatre</p></div>

Ajout automatique de texte

A l'aide des pseudo-éléments CSS 2.0 :before et :after

<style type="text/css">
.truc:before{content:"Je suis au debut";}
.truc:after{content:"Je suis a la fin";background-color:#00FF00;}
</style>
</head>
<body>
<p class="truc">un deux trois</p>

va donner

Je suis au debutun deux troisJe suis à la fin

Utilisation de paramètres

Exemple :

<style type="text/css">
p[president="sarkozy"]{background-color:#FF0000} /*Rouge*/
p[president]{background-color:#FFFF00;} /*jaune*/
p{background-color:#00FF00} /* Vert*/
</style>
</head>
<body>
<p ciel="bleu" president="sarkozy">un</p>

D'après la priorité de haut en bas, on peut s'attendre à ce que "un" soit écrit en vert. Mais cet ordre est contrarié par la spécificité des sélecteurs. Et là, on constate que le plus spécifique est le fond rouge. Et bien, contre toute attente, il semblerait que la définition jaune ait autant de poids que la rouge, alors que la rouge est plus précise, plus spécifique.

Majuscules et minuscules

CSS permet de transformer du texte en minuscules ou majuscule. C'est simple :

<style type="text/css">
.minuscule
{
text-transform: lowercase;
}

.majuscule
{
text-transform: uppercase;
}


</style>
</head>

<body>
<p class="minuscule">Un DEUX
tRoiS quatre</p>
<p class=""> Un DEUX
tRoiS quatre</p>

Le résultat sera simplement :

un deux trois quatre

UN DEUX TROIS QUATRE

Styles différents selon le mode d'affichage

Il est très possible de définir des styles CSS pour l'affichage à l'écran et pour l'impression.

Ce premier exemple appliquera les styles pour tous les médias :

<head>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>


<link href="stylegeneral.css" rel="stylesheet" type="text/css">
</head>

L'exemple suivant appliquera les styles seulement pour l'écran :

<head>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>

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

C'est à dire que la page sera correctement mise en forme, mais lorsque vous irez dans le menu Fichier/Aperçu avant impression, vous verrez la page sans styles CSS.

Si vous désirez avoir une feuille de style pour l'écran et une autre pour l'impression, il faudrait avoir ceci :

<head>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>

<link href="styleecran.css" rel="stylesheet" type="text/css" media="screen">
<link href="styleimpression.css" rel="stylesheet" type="text/css" media="print">
</head>
Il y a d'autres médias à part l'écran et l'imprimante.

La cascade (surcharge)

Il est possible de définir et redéfinir plusieurs fois la même balise. Les navigateurs n'y voient pas de problème.

La philosophie est simple : sera prioritaire le style défini dans la balise elle-même :

<!-- Rouge foncé sur orange -->
<p style="background-color:#FF6600;color:#990000">Je suis dans la ligne</p>

Ensuite, la priorité va simplement du haut en bas !

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style1css.css" rel="stylesheet" type="text/css" />

<style type="text/css">
p
{
/* Cette définition est simplement ignorée, écrasée par celle plus bas */
background-color:#00CCFF; /* bleu clair*/
color:#0000FF;/* Bleu foncé*/
}

p
{
background-color:#00FF00; /* vert clair*/
color:#006600;/* jaune foncé*/

}

</style>
</head>
<body>
<!-- vert foncé sur vert clair-->
<p> Je suis dans la ligne </p>
<!-- Rouge foncé sur orange -->
<p style="background-color:#FF6600;color:#990000">Je suis dans la ligne</p>

Le fait d'attacher des feuilles de style ne change pas la donne. Les navigateurs vont se comporter comme s'ils importaient la feuille de style dans le document actuel.

Imaginons une page html qui lie deux feuilles de style, en plus de définitions internes :

style1.css
p
{
background-color:#CCCCCC; /* gris clair*/
color:#0000FF;
/* gris foncé*/
}

p
{
background-color:#9999FF; /* violet clair*/
color:#9900FF;
/* violet foncé*/
}

Et une 2ème feuille de style css :

style2.css
p
{
background-color:#996600; /* brun clair*/
color:#993300;
/* brun foncé*/
}

p
{
background-color:#FFFFCC; /* jaune clair*/
color:#999900;
/* jaune foncé*/
}

Voici maintenant la page html (presque) complète :

surcharge.htm

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style1css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p
{
background-color:#00CCFF; /* bleu clair*/
color:#0000FF;
/* Bleu foncé*/
}
p
{
background-color:#00FF00; /* vert clair*/
color:#006600;
/* Vert foncé*/
}
</style>
<link href="style2css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p> Je suis dans la première ligne </p>
<!-- Rouge foncé sur orange -->
<p style="background-color:#FF6600;color:#990000">Je suis dans la ligne</p>
<!-- Comme la classe test n'existe pas,, p reprend le flambeau : -->
<p class="test">un deux</p>
</body>

Regardons surcharge.htm : nous avons un premier lien à style1css.css, qui contient deux définitions de <p> (gris qui a été écrasé par violet).

violet est ensuite écrasé par les définitions internes à style1css.css (violet est donc écrasé par bleu, qui est de suite écrasé par vert).

Et nous lions un second fichier externe style2css.css : brun écrase vert, et jaune écrase brun.

Grand gagnant : jaune !

La première phrase est donc écrite en jaune, la 2ème en orange, puisque la définition locale écrase tout ce qui a été précédemment défini

Et nous avons encore une phrase jaune. Elle est jaune bien qu'il s'agisse de la classe test de la balise <p>, puisque la classe test n'existe pas.

La feuille de style CSS locale au navigateur

Savez-vous qu'il existe une feuille de style locale sur votre PC ?

Il y en a une par navigateur. Par exemple, pour Firefox, vous la trouverez dans :

C:\Program files\Mozilla Firefox\res. Le fichier s'appelle html.css.

Vous pouvez faire l'expérience de supprimer les définitions <h1>, <h2> et <h3> par exemple, puis créer un fichier html avec des balises <h1>, <h2> et <h3>, et vous verrez que, dans Firefox, les titres ne sont plus mis en forme du tout.

Attention : Faites une copie de sécurité du fichier avant de faire cette opération !

Dans Internet explorer, j'ignore ou se cache cette feuille de style (si elle existe), mais voici comment il est possible d'attacher sa propre feuille de style qui sera utilisée prioritairement dès que vous utilisez IE.

Allez dans le menu Outils/Options Internet. Cliquez sur le bouton"Accessibilité" (En bas à droite). Cochez la case "Mettre les documents en forme en utilisant ma feuille de style", et choisissez simplement votre feuille CSS qui contiendra la redéfinition des balises HTML (Tout ou partie)

Le mot-clé !important

On peut imposer qu'une valeur ne soit pas surchargée, comme ceci :

<style type="text/css">

p

{
background-color:#00CCFF !important; /* bleu clair*/
color:#0000FF;/* Bleu foncé*/
}

p
{
background-color:#00FF00 !important; /* vert clair*/
color:#006600;/* Vert foncé*/
}
p
{
background-color:#FFCCFF; /* rose clair */
color:#FF00FF;/* rose foncé */
}
p
{
background-color:#FFFFCC; /* jaune clair*/
color:#999900 !important;/* jaune foncé*/
}
</style>
<link href="style2css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="background-color:#FF9900;color:#990000">Je suis dans la ligne</p>

Nous avons donc bien le bleu clair comme fond, qui est immédiatement écrasé par le vert, qui est aussi !important...

Le rose n'a pas droit au chapitre.

Et nous avons une police jaune foncé.

Même si le style semble être imposé localement rouge foncé sur fond orange, les clauses !important passent devant, et finalement, ce sera du texte jaune foncé sur fond vert.

Pour mieux comprendre, voici comment les navigateurs mettent les priorités :

  1. Ils parcourent la page html, ainsi que les inclusions de feuilles css de haut en bas
  2. ils vérifient s'il y a une définition locale incluse directement dans la balise
  3. Ils reparcourent la page html, ainsi que les inclusions de feuilles css de haut en bas, en sélectionnant uniquement les définitions de style avec le mot-clé !important
  4. ils vérifient s'il y a une définition locale incluse directement dans la balise, avec le mot-clé !important

Balises prédéfinies xhtml

Bien que l'on puisse concevoir entièrement un site avec des balises <div> et <span>, il est bien, sémantiquement parlant, d'utiliser les balises existantes

Abréviations et acronymes

Leur fonctionnement est identique.

<!--Acronym : Pour les abréviations. Aucun sens si on ne met pas l'attribut Title.-->
L'<acronym title="Organisation des Nations unies"> ONU </acronym>
<br/>
<!--Abbr : même combat.-->
L'<abbr title="United Nations"> UN </abbr>
<br/>

Résultat :

L' ONU
L' UN

Polices de caractère

Les polices sont un vrai casse-tête. En effet, tout le monde n'a pas les mêmes polices installées sur son ordinateur. De plus, les PC et les macs n'ont pas les mêmes polices "de base" installées.

Du coup, le rayon d'action est fort limité.

On peut utiliser les grandes familles de police pour obtenir un résultat a peu près convaincant, comme ceci :

<p style="font-family:serif">Je suis serif</p>
<p style="font-family:sans-serif">Je suis sans-serif</p>
<p style="font-family:cursive">Je suis cursive</p>
<p style="font-family:fantasy">(Je suis fantasy(</p>
<p style="font-family:monospace">Je suis monospace</p>

Qui va donner ce résultat :

Je suis serif

Je suis sans-serif

Je suis cursive

(Je suis fantasy)

Je suis monospace

Attention : n'utilisez PAS fantasy, parce que la police utilisée est complètement différente selon les navigateurs ! Ou, plus radicalement, le navigateur va simplement utiliser une police de base (Si vous ouvrez cette page dans Internet Explorer ou dans FireFox, vous verrez la différence fondamentale.

Il est possible d'essayer d'utiliser une police précise, et, si celle-ci n'existe pas sur le PC du visiteur, la famille de police précisée sera utilisée, comme ceci :

<style type="text/css">
.policepersosipossible
{
font-family: "Super Geniale police", "Courier New", Courier, monospace;
}
</style>
</head>
<body>

<p class="policepersosipossible">Alors ? Quelle police suis-je ?</p>

S'il ne trouve pas "Super Geniale Police" (Attention : c'est case sensitive), il va utiliser "Courier New", sinon Courier, et sinon la police générique de type monospace.

Les polices comportant des espaces sont indiquées entre guillemets.

Gras, italique, petites majuscules

.police
{
color:#FF0000;
font-family:"Courier New", Courier, monospace;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 140%;
text-decoration: line-through overline underline;
}

Je Suis Normal. Je Suis Special. Je Suis Normal.

Taille des polices

On peut exprimer la taille de la police de manière absolue : en pixels par exemple, ou avec des mots clé :

On peut également parler en relatif à l'élément parent avec %, ex ou em.

On peut utiliser l'intéressant attribut smaller. Il permet d'écrire plus petit en fonction de la taille de l'élément parent (mais de combien plus petit ? Il semblerait à peu près à 85% de la taille)

Attention : Bien que ça puisse paraître pratique, on ne peut pas imbriquer d'éléments de bloc dans les titres H1, H2, etc.

.grand
{
font-size:18px;
}

.tresgrand
{
font-size:28px;
}

.pluspetit
{
font-size:smaller;
/* font-size:85%; aurait eu le même effet*/
}


<div class="grand">
  Je suis grand
  <div class="pluspetit">
    je suis plus petit proportionnellement
  </div>
</div>

<div class="tresgrand">
  Je suis très grand
  <div class="pluspetit">
    je suis plus petit proportionnellement
  </div>
</div>

Listes

<style type="text/css"> ul.exemple1 {
/* C'est padding et pas Margin pour coller tout à gauche */
padding-left:0px;
background-color:#FFFF00; /* Jaune (POur la numérotation et les éléments de liste, a moins qu'il n'y ait une définition de <li> qui impose une autre couleur de fond */
/* Image en lieu et place des petits ronds ou carrés ou nuérotation*/
list-style-image:url('arrow.gif');
/* SI l'image n'existe pas, on affiche un carré */
list-style-type:square;
/* inside = pour déterminer si les marges et les padding se font à partir du texte de la liste
ou de la numérotation. Je trouve plus simple d'inclure la nmuérotation, parce que si on demande outside
avec un padding-left de 0px, la numérotation disparait à gauche de l'écran*/

list-style-position:inside;
}
ol.exemple2 {
background-color:#00FF00; /* Vert */
/* Par défaut, c'est 1,2,3 ... Ici, c'est a,b,c, ...*/
list-style-type:lower-alpha;
} /* Les éléments de liste de classe exemple3 auront un fond bleu :*/
li.exemple3{background-color:#33CCFF}

</style>
</head><body leftmargin="0px" rightmargin="0px" topmargin="0px" bottommargin="0px">

<ol>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ol>
<ul>
  <li>quatre</li>
  <li>cinq</li>
  <li>six</li>
</ul>
<ul class="exemple1">
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
</ul>
<ol class="exemple2">
  <li>dix</li>
  <li class="exemple3">onze</li>
  <li>douze</li>
</ol>
  1. un
  2. deux
  3. trois
  1. dix
  2. onze
  3. douze

Listes de définitions DL, DT

Les listes de définitions fonctionnent presque comme des listes, sauf que chaque élément est constitué d'un terme <dt> et de sa définition <dd>. On peut avoir plusieurs termes avec la même définition, ou un terme avec plusieurs définitions... Voire plusieurs termes avec plusieurs définitions, mais est-ce que ça peut avoir un sens ?

Exemple

<dl>
  <dt>Vivant</dt>
    <dd>n'est pas mort</dd>
    <dd>joyeux drille</dd>
  <dt>Bleu</dt>
  <dt>Blue</dt>
    <dd>Couleur primaire</dd>
</dl>

Vivant
n'est pas mort
joyeux drille
Bleu
Blue
Couleur primaire

Unités de mesure

On peut utiliser diverses unités de mesure pour les tailles de texte, marges, etc. Pour mieux comprendre, voici un exemple avec une marge gauche de 10 (cm, mm, %, etc.)

Il y a des unités absolues (comme le cm par exemple : c'est indéboulonnablement 10 mm, point barre), et des unités relatives comme ex qui représente la hauteur de la lettre x de l'élément parent (tout dépend de la taille des caractères donc

<style type="text/css"> * {font-family:"Courier New", Courier, monospace;}
.vert{background-color:#00FF00}
.marge10ex{margin-left:10ex;}
.marge10em{margin-left:10em;}
.marge10pixel{margin-left:10px;}
.marge10point{margin-left:10pt;}
.marge10cm{margin-left:10cm; }
.marge10mm{ margin-left:10mm; }
.marge10pica{ margin-left:10pc; }
.marge10pourcent{margin-left:10%;}
</style>
</head>
<body leftmargin="0px" rightmargin="0px" topmargin="0px" bottommargin="0px">
<div class="marge10pixel">Je suis a 10 pixel</div>
<div class="marge10point">Je suis a 10 point</div>
<div class="marge10mm">Je suis a 10 mm</div>
<div class="marge10ex">Je suis a 10 ex</div>
<div class="marge10em">Je suis a 10 em</div>
<div class="marge10pica">Je suis a 10 pica</div>
<div class="marge10cm">Je suis a 10 cm</div>
<div class="marge10pourcent">Je suis a 10 pour cent</div>
</body>
Je suis a 10 pixel
Je suis a 10 point
Je suis a 10 mm
Je suis a 10 ex
Je suis a 10 em
Je suis a 10 pica
Je suis a 10 cm
Je suis a 10 pour cent (valeur relative)

Encadrements

Sous l'appellation sybilline "Modèle de boîte" se cachent des principes très simples. Il s'agit simplement des marges et des bordures.

Il y a trois propriétés qui permettent de mettre en page correctement ces marges et bordures :

Si vous désirez uniquement préciser des marges, comme par exemple ne pas coller un texte tout à gauche, mais lui laisser un peu d'air, la propriété border suffira. Mais si vous désirez encadrer votre texte, vous devrez utiliser border.

Vous pouvez ainsi encadrer votre texte avec border, et, en plus, préciser que ce cadre devra avoir une "marge d'aération" margin. Si maintenant, vous trouvez que le cadre enserre vraiment le texte de trop près, vous pouvez le faire "respirer" à l'intérieur du cadre lui même avec padding.

Le border-style: solid est indispensable, sinon, la bordure n'apparait pas. On peut remplacer solid par d'autres mots clés pour par exemple avoir une bordure en pointillés.

Constatez donc l'addition des pixels : entre quatre et cinq, il y a 10 pixels de margin, suivis de 10 pixels de border et finalement 10 pixels de padding.

Dans le dessin, les flèches colorées montrent les marges et espaces du côté gauche, mais le principe est le même à droite, en haut et en bas. à droite et à gauche, le texte s'écarte pour laisser la place à ces marges et bordures, tandis qu'en haut et bas, rien n'est agencé correctement, et le texte est masqué.

margin, padding et border sont ici utilisés pour les 4 côtés, mais chacune de de ces propriétés est déclinée pour chacun des côtés. Par exemple, pour border, nous avons :

Images de fond

Il est possible de définir une image en fond (background-image). Ce premier exemple montre une image qui est répétée sur toute la largeur et toute la longueur :

.imagefond
{
background-image:url(images/fond.jpg);
}

<div class="imagefond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis. Phasellus accumsan accumsan est, in posuere risus euismod a. Cras aliquam est quis felis sagittis id feugiat diam porttitor. Integer feugiat bibendum lectus ac mattis. Sed convallis ultricies magna, quis pulvinar dui adipiscing sed. Aliquam eget turpis facilisis magna varius condimentum. Mauris condimentum, orci sit amet accumsan sodales, tortor ante scelerisque mauris, id luctus metus mauris quis mi. Donec id tellus orci, non aliquet ligula.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis. Phasellus accumsan accumsan est, in posuere risus euismod a. Cras aliquam est quis felis sagittis id feugiat diam porttitor. Integer feugiat bibendum lectus ac mattis. Sed convallis ultricies magna, quis pulvinar dui adipiscing sed. Aliquam eget turpis facilisis magna varius condimentum. Mauris condimentum, orci sit amet accumsan sodales, tortor ante scelerisque mauris, id luctus metus mauris quis mi. Donec id tellus orci, non aliquet ligula.

Dans cet exemple, on refuse de répéter l'image avec background-repeat:no-repeat;. Du coup elle se stocke par défaut en haut à gauche.

.imagefond
{
background-image:url(images/fond.jpg);
background-repeat:no-repeat;
}

<div class="imagefond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [etc.]
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis. Phasellus accumsan accumsan est, in posuere risus euismod a. Cras aliquam est quis felis sagittis id feugiat diam porttitor. Integer feugiat bibendum lectus ac mattis. Sed convallis ultricies magna, quis pulvinar dui adipiscing sed. Aliquam eget turpis facilisis magna varius condimentum. Mauris condimentum, orci sit amet accumsan sodales, tortor ante scelerisque mauris, id luctus metus mauris quis mi. Donec id tellus orci, non aliquet ligula.

Ici, nous répétons seulement en horizontal : (On aura compris qu'en remplaçant x par y, la répétition est verticale).

.imagefond
{
background-image:url(images/fond.jpg);
background-repeat:repeat-x;
}

<div class="imagefond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [etc.]
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis. Phasellus accumsan accumsan est, in posuere risus euismod a. Cras aliquam est quis felis sagittis id feugiat diam porttitor. Integer feugiat bibendum lectus ac mattis. Sed convallis ultricies magna, quis pulvinar dui adipiscing sed. Aliquam eget turpis facilisis magna varius condimentum. Mauris condimentum, orci sit amet accumsan sodales, tortor ante scelerisque mauris, id luctus metus mauris quis mi. Donec id tellus orci, non aliquet ligula.

Il est maintenant possible de positionner précisément l'image. Ici nous la positionnons à 20% du côté gauche, et à 20 pixels du haut de l'élément parent. On comprendra que pour avoir l'image exactement a centre du texte, il suffit de préciser 50% 50%.

.imagefond
{
background-image:url(images/fond.jpg);
background-repeat:no-repeat;
background-position: 20% 20px; /* "depuis la droite" suivi de "depuis le haut" */
}

<div class="imagefond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [etc.]
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis. Phasellus accumsan accumsan est, in posuere risus euismod a. Cras aliquam est quis felis sagittis id feugiat diam porttitor. Integer feugiat bibendum lectus ac mattis. Sed convallis ultricies magna, quis pulvinar dui adipiscing sed. Aliquam eget turpis facilisis magna varius condimentum. Mauris condimentum, orci sit amet accumsan sodales, tortor ante scelerisque mauris, id luctus metus mauris quis mi. Donec id tellus orci, non aliquet ligula.

Quelques mots-clés permettent de coincer l'image dans les coins. Par exemple, la voici en bas droite :

.imagefond
{
background-image:url(images/fond.jpg);
background-repeat:no-repeat;
background-position: bottom right; /* en bas à droite
}

<div class="imagefond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [etc.]
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis. Phasellus accumsan accumsan est, in posuere risus euismod a. Cras aliquam est quis felis sagittis id feugiat diam porttitor. Integer feugiat bibendum lectus ac mattis. Sed convallis ultricies magna, quis pulvinar dui adipiscing sed. Aliquam eget turpis facilisis magna varius condimentum. Mauris condimentum, orci sit amet accumsan sodales, tortor ante scelerisque mauris, id luctus metus mauris quis mi. Donec id tellus orci, non aliquet ligula.

Il est également possible, lorsqu'on donne une image en font à toute la page HTML, d'utiliser background-attachment:fixed; Ceci permettra de laisser le font en place sans qu'il "scrolle"

Interligne

On peut définir assez exactement l'interligne avec css. voici un double interligne :

.interligne
{
line-height:2;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis.

Et voici des lignes compressées à 75% de leur interligne de base (qui est 1 par défaut)

.interligne
{
line-height:0.75;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat, elit vitae scelerisque fermentum, mi nunc convallis dolor, id pharetra felis dolor nec lacus. Donec dolor est, scelerisque non consequat et, consequat ut nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque adipiscing libero nec eleifend. Aenean varius eros sed eros faucibus nec condimentum diam convallis. Proin massa felis, hendrerit a blandit ut, tempor et augue. Nullam nunc justo, dictum in accumsan ac, placerat cursus ante. Aliquam volutpat turpis interdum dui viverra convallis.

Liens externes

En français

En anglais