CSS est avec HTML l’un des standards les plus im­por­tants du domaine de la con­cep­tion de sites Web. Si vous souhaitez cons­truire des sites Web modernes en tapant des lignes de code à la main, Cascading Style Sheets est un must. Il est également plus facile de manipuler les éditeurs HTML clas­siques, éditeurs mo­du­laires et systèmes de gestion de contenu lorsque l’on connait les bases de CSS. Notre tutoriel CSS devrait vous rendre la tâche plus facile en vous pré­sen­tant les bases du langage des feuilles de style sous la forme d’un cours accéléré.

Sé­pa­ra­tion du contenu et de la pré­sen­ta­tion

En com­bi­nai­son avec HTML, CSS est utilisé pour séparer le contenu et la pré­sen­ta­tion. Le langage de balisage hy­per­texte (HTML) est utilisé pour enrichir les documents texte avec des in­for­ma­tions servant à struc­tu­rer sé­man­ti­que­ment les éléments textuels. Le langage de balisage créé ainsi la base de tout site Web : le code HTML. Il décrit quels éléments sont renvoyés par un document (par exemple <body>, <header>, <footer> pour signaler un corps de texte, titre, ou bas de page, ou encore pour décrire comment in­ter­pré­ter une in­for­ma­tion : <Img>, <video>, <titre>, <pa­ra­graphe>).  Cela suffit à lui seul pour que les na­vi­ga­teurs Web affichent les documents HTML sous forme de pages Web. Cependant, d’un point de vue actuel, le résultat n’est pas ré­jouis­sant. Il manque une étape décisive : la mise en forme in­di­vi­dua­li­sée.

A l’origine, HTML offrait aussi des ins­truc­tions pour une con­cep­tion de sites Web ru­di­men­taire. Mais ces dernières sont con­si­dé­rées comme obsolètes avec HTML5 et ne devraient plus être utilisées aujourd’hui. Au lieu de cela, le langage CSS (Cascading Style Sheets) est utilisé pour gérer les spé­ci­fi­ca­tions de pré­sen­ta­tions sé­pa­ré­ment. Mais qu’est-ce que le CSS ?

Qu’est-ce que le CSS ?

Comme le HTML, le CSS est également écrit sous forme de texte. Ceci peut être fait di­rec­te­ment dans le document HTML (en ligne pour chaque document ou une fois dans l’en-tête HTML). Toutefois, les con­cep­teurs de sites Web intègrent gé­né­ra­le­ment des documents CSS séparés pour formater les pages Web. Le résultat est un code source clair qui évite les ins­truc­tions de con­cep­tion re­don­dantes en éta­blis­sant des liens vers des feuilles de style dis­tinctes. Moins il y a de ré­pé­ti­tions, plus le code source est mince. Dans le World Wide Web, cela se traduit par des temps de té­lé­char­ge­ment plus courts et donc une structure de page rapide. CSS facilite également la main­te­nance des sites Web. Si des mo­di­fi­ca­tions dans la con­cep­tion sont né­ces­saires, elles sont apportées aux fichiers CSS centraux. Il n’est donc pas né­ces­saire de revoir chaque document HTML et de l’adapter sé­pa­ré­ment.   CSS s’est vite imposé comme standard et a con­ti­nuel­le­ment été développé par le World Wide Web Con­sor­tium (W3C) et est ac­tuel­le­ment dis­po­nible dans sa troisième version (CSS3). fournit une vue d’ensemble de l’as­sis­tance des modèles des na­vi­ga­teurs les plus courants comme Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari et Opera.

Structure de base : la syntaxe de CSS

La mission prin­ci­pale de CSS est de définir le design d’un site Web. Les pro­prié­tés avec certaines valeurs sont affectées aux éléments HTML sous-jacents à l’aide du langage par feuille de style. La structure de base d’une commande de con­cep­tion suit le schéma suivant : 

Sélecteur { déclaration }

Sélecteur concerne la re­pré­sen­ta­tion des éléments HTML qui se réfèrent aux ins­truc­tions de con­cep­tion. La dé­cla­ra­tion se compose d’une com­bi­nai­son de la valeur de la propriété, qui est notée dans l’accolade ci-dessous. Chaque ins­truc­tion se termine par un point-virgule : 

Elements HTML  { Propriété : Valeur; }

Une couleur de police est par exemple assignée à un en-tête selon ce schéma : 

h2 { color: red; }

Le sélecteur h2 re­pré­sente des titres de second niveau. L’ins­truc­tion comporte la propriété color (couleur) et la valeur red (rouge). Une page Web dotée d’une telle ins­truc­tion verra tous ses titres de second niveau du texte source, ca­rac­té­ri­sés de <h2>, re­pré­sen­tés en rouge. Vous pouvez également définir des pa­ra­mètres de couleur détaillés à l’aide de codes de couleur hexa­dé­ci­maux (voir le chapitre Spé­ci­fi­ca­tions de couleur CSS). 

h2 { color: #ff0000; }

Les designers Web ont la pos­si­bi­lité d’assigner une seule propriété au sélecteur ou bien de définir des ensembles de règles ex­haus­tifs qui con­tien­nent des ins­truc­tions de con­cep­tion dé­tail­lées. Par souci de clarté, une syntaxe a été établie, avec laquelle toutes les pro­prié­tés d’un ensemble de règles sont énumérées : 

Selektor {
    Propriété1 : Valeur;
    Propriété2 : Valeur;
    Propriété3 : Valeur;
}

Dans la pratique, un tel ensemble de pro­prié­tés pourrait res­sem­bler à ceci :

h2 { 
    color: #ff0000; 
    font-family: Helvetica, sans-serif; 
    font-size: 19px; 
    font-weight: bold;
    text-align: center; 
}

Les com­bi­nai­sons de valeurs/pro­prié­tés dans les accolades dé­fi­nis­sent la couleur (color), le type de police (font-family), la taille de police (font-size), la mise en relief de la police et l’alig­ne­ment  du texte (text-align). Vous trouverez une des­crip­tion détaillée des pro­prié­tés CSS plus bas dans notre tutoriel.

Un ensemble de règles peut spécifier plusieurs sé­lec­teurs. Dans ce cas, ceux-ci seront notés sé­pa­ré­ment par des virgules avant la dé­cla­ra­tion :

Sélecteur1, Sélecteur2 {déclaration}

Sé­lec­teurs CSS

CSS prend en charge dif­fé­rents sé­lec­teurs, ces derniers per­met­tent d’attribuer des ins­truc­tions de con­cep­tion définies par l’uti­li­sa­teur. Pour commencer, il suffit de vous fa­mi­lia­ri­ser avec les sé­lec­teurs types, classes, ID, et uni­ver­sels.

Type de sélecteur Syntaxe CSS Des­crip­tion
Sé­lec­teurs Type Element HTML (par exemple h2) Un sélecteur de type cor­res­pond au nom de l‘élément auquel il se réfère. Le formatage est appliqué à tous les éléments HTML du même type
Sé­lec­teurs Classe .exemple Un sélecteur de classe s’adresse à tous les éléments d’une classe par­ti­cu­lière. Les sé­lec­teurs de classes sont formés d’un point (.9 et de n’importe quel nom de classe. Les classes sont affectées aux éléments HTML à l’aide de l’attribut class (class=exemple).
ID #exemple Un sélecteur d’ID s’adresse à un seul élément avec un ID unique. L’in­té­gra­tion dans le code source HTML se fait en utilisant l’attribut ID (ID= exemple).
Sélecteur universel * Le sélecteur universel As­té­risque (*) concerne tous les éléments HTML d’un document.

L’uti­li­sa­tion des dif­fé­rents sé­lec­teurs CSS peut être mieux illustrée par des exemples. Le code suivant indique le sélecteur de type h2 avec dé­cla­ra­tion :

h2 { 
    color: #305796; 
    font-family: Helvetica, sans-serif; 
}

Le formatage se réfère à tous les éléments HTML de type h2 (en-tête de deuxième niveau).

Al­ter­na­ti­ve­ment, le formatage CSS peut être effectué à l’aide d’un sélecteur de classe. Cela permet aux Web designers de fournir aux éléments HTML les mêmes ins­truc­tions de con­cep­tion, quel que soit le type. 

.content { 
    color: #ff0000; 
    font-family: Helvetica, sans-serif; 
}

Le formatage se réfère à tous les éléments HTML auxquels le contenu de la classe a été affecté. Cette af­fec­ta­tion est effectuée selon la procédure suivante : 

<p class="special-text">texte exemple</p>
Attention

en HTML, les noms des classes sont notés sans point (.).

Si une ins­truc­tion de con­cep­tion ne doit faire référence qu’à un seul élément du code source HTML, un sélecteur d’ID est re­com­mandé. L’exemple suivant montre le formatage d’un volet de na­vi­ga­tion :

#navigation {
    font-family: Helvetica, sans-serif; 
    background-color: #8ad8d4;
    border: 2px solid #448278;
}

Le formatage est attribué en code source HTML sans hashtag (#) : 

<div id="navigation">
    <ul>
        <li><a href="index.htm">Page d’accueil</a></li>
        <li><a href="impressum.htm">Impressum</a></li>
    </ul>
</div>

L’avantage des sé­lec­teurs d’ID est que vous pouvez voir en un coup d’œil quelles sections du code source sont des zones uniques. En outre, les sé­lec­teurs d’ID sont prio­ri­taires lors de l’af­fec­ta­tion des styles. Si le formatage de classe et l’ID se con­tre­di­sent, c’est le dernier qui prévaut. Les classes ont également une priorité plus élevée que les sé­lec­teurs de type.

Les classes et les ID peuvent être nommées librement. Notez cependant que les sé­lec­teurs CSS sont sensibles aux ma­jus­cules : Les dif­fé­rences entre ma­jus­cules et mi­nus­cules sont in­ter­pré­tées en tant que classes dis­tinctes (par exemple na­vi­ga­tion vs. Na­vi­ga­tion). Les espaces vides et ca­rac­tères spéciaux sont interdits.

Si une ins­truc­tion de con­cep­tion doit faire référence à tous les éléments d’un document HTML, l’as­té­risque (*) est utilisé : 

*  { 
    font-family: Helvetica, sans-serif; 
}

Tous les éléments de texte du site seront affichés par le na­vi­ga­teur dans la police Helvetica.

Intégrer CSS en HTML

Pour qu’un na­vi­ga­teur prenne en compte la structure CSS, les ins­truc­tions de con­cep­tion doivent être liées au code source HTML. Trois options s’offrent aux uti­li­sa­teurs :

  • L’in­té­gra­tion directe d’une dé­cla­ra­tion CSS en tant que balise HTML
  • Balisage CSS dans l‘en-tête HTML
  • Renvoi à une feuille de style séparée

Dans la pratique, les feuilles de style sont gé­né­ra­le­ment créées sous forme de fichiers texte externes, puis intégrées.

Dé­cla­ra­tion CSS dans les balises HTML

Si vous souhaitez qu’une dé­cla­ra­tion CSS formate un seul endroit dans le code source, vous pouvez utiliser un attribut style pour le spécifier di­rec­te­ment dans la balise in­tro­duc­tive de l’élément HTML auquel se réfère l’ins­truc­tion de con­cep­tion. On parle dans ce cas de « Inline-Style ». 

<h2 style="color: red;">Sous-titre</h2>

Ceci a pour avantage que vous n’avez pas besoin de créer votre propre feuille de style, le sélecteur est omis et une telle af­fec­ta­tion a une priorité élevée. Toutefois, au plus tard lorsqu’un ensemble de règles entier est utilisé, ce type de formatage devient confus et redondant. 

<h2 style="color: #ff0000; font-family: 'Helvetica Neue', sans-serif; font-size: 19px; font-weight: bold; text-align: center;">sous-titre</h2>

Cette in­té­gra­tion des ins­truc­tions de con­cep­tion est donc re­com­man­dée (s’il y a lieu) pour les petits sites Web avec un formatage minimal.

Marquage CSS dans l’en-tête HTML

Si une seule et même ins­truc­tion de con­cep­tion dans un document HTML doit être utilisée plusieurs fois pour le même élément (par exemple, pour tous les h2 de la page Web), le marquage HTML est inef­fi­cace. A la place, vous pouvez utiliser l’élément style pour définir les in­for­ma­tions de con­cep­tion cor­res­pon­dantes une fois dans l’en-tête HTML du document :

<!DOCTYPE html>
    <html lang="de">
        <head>
            <style>
                h2 {
                    color: #ff0000; 
                    font-family: 'Helvetica Neue', sans-serif; 
                    font-size: 19px; 
                    font-weight: bold;
                    text-align: center; 
                }
            </style>
        </head>
        <body>
            <h2>sous-titre1</h2>
            […]
            <h2>sous-titre2</h2>
            […]
        </body>
</html>

La règle définie dans l’élément style est au­to­ma­ti­que­ment appliquée à tous les éléments h2 suivants. Mais que faire si l’élément h2 doit être utilisé sur d’autres pages Web du même projet en ligne avec les ins­truc­tions de con­cep­tion définies ici ? Dans ce cas, un ad­mi­nis­tra­teur de site Web devrait intégrer le bloc de code avec les ins­truc­tions de con­cep­tion dans chaque page HTML et l’adapter in­di­vi­duel­le­ment lorsque les mo­di­fi­ca­tions sont apportées. Avec un fichier CSS central, ce problème peut être traité avec facilité.

Renvoi à une feuille de style séparée

Si les ins­truc­tions de con­cep­tion sont définies sur une feuille de style distincte, elles doivent être incluses dans le document HTML sous-jacent. Ceci est résolu avec l’élément HTML <link>, qui, comme l’élément de style, est un élément su­bor­donné à l’élément head. 

<link rel="stylesheet" href="exemple.css">

L’élément link contient les attributs obli­ga­toires rel et hreft et peux op­tion­nel­le­ment être complété par les attributs type et media.

Attributs de l’élément link Des­crip­tion
rel L’attribut rel définit le type de relation de l‘élément. La valeur sty­le­sheet (feuille de style) spécifie qu’une feuille de style doit être incluse.
href L’attribut href fait référence au fichier à inclure comme feuille de style.
type L’attribut fa­cul­ta­tif type décrit le type de média du fichier à inclure, dans le cas de CSS « text/css ».
media L’attribut media permet aux ad­mi­nis­tra­teurs de sites Web de définir que la feuille de style ré­fé­ren­cée ne doit être utilisée que pour un support de sortie spé­ci­fique. Ceci permet de fournir dif­fé­rentes feuilles de style pour dif­fé­rents appareils. Les valeurs possibles sont par exemple screen (écran) ou print (im­pres­sion).

In­di­ca­tions CSS de couleurs

Comme mentionné dans le chapitre d’in­tro­duc­tion, les af­fec­ta­tions de couleurs peuvent être définies par CSS à l’aide des noms de couleurs en anglais (par exemple red, blue, green). Dans la pratique, cependant, de telles ins­truc­tions de con­cep­tion sont rarement utilisées. Le modèle RVB est utilisé plus fré­quem­ment. Celui-ci offre beaucoup plus de niveaux et permet aux ad­mi­nis­tra­teurs de sites Web d’effectuer des réglages de couleurs détaillés. Les codes cor­res­pon­dants peuvent être dé­ter­mi­nés via un sélecteur de couleurs. Google, par exemple, offre cette pos­si­bi­lité sous la forme d’une réponse rapide.

Image: Sélecteur de couleurs sur le moteur de recherche Google
Valeurs d’images gratuites en réponse rapide sur le moteur de recherche Google

Le modèle RVB

Dans le modèle RVB, chaque couleur peut être indiquée avec précision par ses pro­por­tions de rouge (R), vert (V) et bleu (B).

Image: Le modèle de couleurs RVB
Re­pré­sen­ta­tion sché­ma­tique du modèle de couleurs RVB

Les portions de couleurs sont définies sur le modèle RVB par des valeurs décimales comprises entre 0 et 255. Alors qu’une valeur de 0 signifie qu’une couleur ne possède pas de partie de la couleur de base concernée, une valeur de 255 indique que la couleur présente le plus haut niveau d’influence de la même couleur de base.

La notation de la valeur de couleur RVB cor­res­pond au schéma suivant (les espaces ne sont pas obli­ga­toires) : 

rvb(valeurrouge, valeurverte, valeurbleue)

De cette façon, le modèle RVB vous permet de définir environ 16,7 millions de couleurs dif­fé­rentes pour le design de votre site Web. Le graphique suivant montre les valeurs RVB pour les couleurs standard noir, blanc, rouge, bleu, vert, jaune, magenta, Cyan, Violet et orange :

Image: Codage couleur RVB en utilisant l’exemple des couleurs noir, blanc, rouge, etc.
Exemples de codes couleurs RVB décimaux

Depuis CSS3, les valeurs RVB peuvent être étendues d’une quatrième valeur, le canal alpha (a). Celui-ci indique l’opacité de la couleur et est donné en valeurs de 0 à 1 (par exemple 0,8). 

rvba(valeurrouge, valeurverte, valeurbleue, opacité)

Par exemple, les valeurs RVBA suivantes ont pour résultat la couleur bleue de base men­tion­née ci-dessus avec une trans­pa­rence de 50 pour cent. 

rgba(0, 0, 255, 0.5)

Le graphique suivant montre une zone de couleur bleue trans­pa­rente su­per­po­sant une zone de couleur rouge.

Image: Couleur de base bleue avec une transparence de 50%
Avec rgba(), vous dé­fi­nis­sez les zones de couleur trans­pa­rentes pour ad­mi­nis­tra­teurs Web

Des valeurs de couleurs en hexa­dé­ci­males se sont établies comme al­ter­na­tive à la notation décimale.

Code de couleur hexa­dé­ci­mal

Con­trai­re­ment au système décimal, les codes de couleur hexa­dé­ci­maux dé­fi­nis­sent les valeurs de couleur en utilisant 16 chiffres au lieu de 10. La séquence suivante s’applique : 0, 1, 1, 2, 3, 3, 3, 4, 5, 6, 6, 7, 8, 9, a, b, c, d, d, e, f.

Le schéma de base d’un code de couleur hexa­dé­ci­mal consiste en une balise de hashtag (#) suivie de six chiffres hexa­dé­ci­maux, chacun re­pré­sen­tant une couleur de l’espace co­lo­ri­mé­trique RVB (Rouge, Vert, Bleu) en blocs de deux :

#RRGGBB

La sa­tu­ra­tion des com­po­santes co­lo­ri­mé­triques est indiquée par la valeur numérique des nombres hexa­dé­ci­maux. 00 cor­res­pond à une couleur com­plè­te­ment neu­tra­li­sée et FF (décimal : 255) à la sa­tu­ra­tion maximale des couleurs. La couleur res­pec­tive est basée sur un mélange d’additifs des couleurs de base. Par exemple, les valeurs hexa­dé­ci­males suivantes résultent pour les exemples de couleurs indiqués dans le code RVB :

Image: Codage hexadécimal des couleurs
Exemples de codages couleurs hexa­dé­ci­maux

En plus de RVB, CSS supporte également le modèle couleur HSL. A l’avenir, les web­de­sig­ners pourront également effectuer des réglages de couleur via CMJN.

Les prin­ci­pales pro­prié­tés de CSS

Avec CSS, vous pouvez choisir parmi environ 420 pro­prié­tés qui peuvent être utilisées pour définir les ins­truc­tions de con­cep­tion des éléments HTML. Chaque propriété accepte un ensemble de valeurs dé­ter­mi­nées dans les spé­ci­fi­ca­tions. Par souci de clarté, les pro­prié­tés CSS sont re­grou­pées dans des domaines d’ap­pli­ca­tion. La police de ca­rac­tères, l’ajus­te­ment des couleurs, le formatage et la mise en page du texte basé sur le modèle de boîte CSS et le po­si­tion­ne­ment de boîtes CSS sont d’une im­por­tance capitale.

Notre guide accéléré de CSS pour débutants se concentre sur les pro­prié­tés les plus im­por­tantes pour découvrir les Cascading Style Sheets et illustre la création de règles CSS à l’aide d’exemples de codes pratiques. Une liste complète de toutes les pro­prié­tés CSS se trouve sur le site Web du W3C.

Police

Une des ca­rac­té­ris­tiques centrales d’un site Web est la police de ca­rac­tères. CSS vous offre plusieurs façons de formater les éléments de police d’une page HTML. Les pro­prié­tés les plus im­por­tantes dans le contexte de la mise en forme des polices sont :

  • font-family
  • font-style
  • font-variant
  • font-size
  • line-height
  • font-weight

font-family

Si une certaine police (font) doit être définie pour les éléments textuels d’un site Web, la propriété font-family CSS est utilisée. Ceci vous permet de créer une pile de polices (Font Stack). Il s’agit d’une liste priorisée des polices de ca­rac­tères ap­pro­priées. Les piles de polices sont struc­tu­rées de manière à ce que la police souhaitée soit nommée en premier, puis une liste des al­ter­na­tives cor­res­pon­dantes avec leur re­pré­sen­ta­tion. 

.content {
    font-family: Georgia, Garamond, serif;
}

L’exemple montre une ins­truc­tion de con­cep­tion pour la classe .content dans le fichier CSS. Ceci agit dans le document HTML via l’attribut class et le nom de la classe content : 

<p class="content">texte-exemple</p>

Georgia est définie comme la police prio­ri­taire et Garamond comme police al­ter­na­tive. Un na­vi­ga­teur Web est donc chargé d’afficher le texte en Garamond à moins que la police Georgia ne soit installée sur le système.

Image: Aperçu navigateur : « texte exemple » est représenté dans la police Georgia
La propriété CSS font-family demande au na­vi­ga­teur Web d’afficher la section de texte dans la police Georgia

Mais que faire si aucune de ces al­ter­na­tives n’est dis­po­nible ? Dans ce cas, nous vous re­com­man­dons de définir une famille de polices générique comme mécanisme de secours. Georgia et Garamond ap­par­tien­nent toutes deux à la famille serif. Si cela est inclus dans la dé­cla­ra­tion comme dernière al­ter­na­tive, le na­vi­ga­teur Web affiche le pa­ra­graphe dans une police de la famille générique qui est à sa dis­po­si­tion : par exemple, la police Times New Roman largement utilisée. De cette façon, il est possible de s’assurer qu’un effet voulu par l’auteur de la feuille de style est conservé, au moins dans ses ca­rac­té­ris­tiques de base.

D’autres familles gé­né­riques sont les sans-serif (par exemple Arial, Trebuchet ou Verdana) et les monospace (par exemple Courier, Courier New ou Andale Mono). Les polices dont le nom est composé de plusieurs mots sont placées entre guil­le­mets simples ou doubles dans la dé­cla­ra­tion CSS : 

.content {
    font-family: 'Trebuchet MS', 'Liberation Sans', sans-serif;
}
Image: Aperçu navigateur : le texte « texte exemple » est représenté dans la police de caractères Trebuchet MS sans empattements
La propriété CSS font-family demande au na­vi­ga­teur Web d’afficher le texte dans la police de ca­rac­tères sans em­pat­te­ments Trebuchet MS
Attention

les familles gé­né­riques sont des mots-clés qui ne doivent pas être cités entre guil­le­mets.

font-style

La propriété CSS font-style se réfère au style de police d’un pa­ra­graphe de texte et vous offre la pos­si­bi­lité de définir des ins­truc­tions de con­cep­tion pour l’in­cli­nai­son de ces ca­rac­tères marqués.

Valeur d’in­cli­nai­son du texte Des­crip­tion
normal Style d’écriture standard (pa­ra­mètres standard)
italique Lettres italiques
oblique Police inclinée

L’exemple suivant montre une ins­truc­tion de con­cep­tion pour le style de police en italique : 

.special-content {
    font-family: Arial; 
    font-style: italic;
}
<p class="special-content ">texte exemple</p>

Les valeurs Italic et Oblique sont gé­né­ra­le­ment affichées de la même manière dans le na­vi­ga­teur Web. La valeur oblique est rarement utilisée. La dif­fé­rence par rapport à la valeur en italique est que l’oblique place une police normale de manière inclinée même si aucune variante en italique n’est fournie.

Variante font

La propriété CSS font-variant est utilisée pur définir des variantes d‘écriture.

Valeurs pour les variantes de police des­crip­tion
normal Variante de police normale (réglage par défaut)
small-caps Petites ma­jus­cules pour petites lettres
all-small-caps Petites ma­jus­cules pour lettres ma­jus­cules et mi­nus­cules

Les exemples suivants montrent les variantes de police Small-Caps et All-small-caps :

.content {
    font-family: Arial;
    font-variant: small-caps;
}
<p class="content ">Texte Exemple</p>

La valeur small-caps indique au na­vi­ga­teur Web d’afficher toutes les lettres mi­nus­cules sous forme de petites capitales (lettres ma­jus­cules à la hauteur des lettres mi­nus­cules).

Image: Aperçu navigateur : la variante de police à petites majuscules met en forme des lettres minuscules dans « Texte exemple » sous forme de petites majuscules
la variante de police à petites ma­jus­cules vous permet d’afficher les lettres mi­nus­cules sous forme de petites ma­jus­cules 
.content {
    font-family: Arial;
    font-variant: all-small-caps;
}
<p class="content;">Texte exemple</p>

La valeur all-small-caps indique au na­vi­ga­teur Web d’afficher toutes les lettres sous forme de petites ma­jus­cules.

Image: Apernavigateur : la variante de police all-small-caps met en forme toutes les lettres de « Texte Exemple » sous forme de majuscules
Si la variante de police all-small-capsest sé­lec­tion­née, le na­vi­ga­teur Web affiche toutes les lettres sous forme de petites ma­jus­cules.

font-size

La propriété CSS font-size définit la taille de re­pré­sen­ta­tion des éléments de texte. Ceci peut être fait en valeurs absolues ou par rapport aux éléments en­vi­ron­nants. La hauteur des ca­rac­tères est ce qu’on appelle la taille de police. Les Web­de­sig­ners disposent ainsi de divers types de polices et unités de mesures pour tra­vail­ler.

Les unités de mesure absolues sont basées sur les di­men­sions linéaires physiques. Sur l’écran, cependant, les na­vi­ga­teurs con­ver­tis­sent toutes ces unités en pixels sur la base d’une ré­so­lu­tion de 96 dpi. Sur un or­di­na­teur portable ou un smart­phone moderne, par exemple, 1 cm sera beaucoup plus petit que prévu. En dehors de px, les unités de mesure absolues n’ont donc guère d’im­por­tance dans la con­cep­tion Web. Dans le meilleur cas, elles n’ont de sens qu’en sortie d’im­pres­sion, où le na­vi­ga­teur Web cible les tailles réelles.

Unités de mesure absolues

Unité Écriture CSS Des­crip­tion
Pixel px L’unité de mesure px a été dé­ve­lop­pée spé­cia­le­ment pour CSS et cor­res­pond à la taille d’un élément en pixels. Les pixels sont affichés sur les écrans en fonction de la densité des points (par ex. points par pouce, dpi). C’est toutefois une unité absolue. Aujourd’hui, 1 px ne cor­res­pond pas forcément à un pixel d’affichage. Pour éviter que les éléments de texte ne s’affichent en trop petit, les na­vi­ga­teurs fonc­tion­nent avec une mise à l’échelle de l’unité px, en haute ré­so­lu­tion. Un pixel CSS est re­pré­senté par plusieurs pixels d’affichage, selon la ré­so­lu­tion de l’écran. Voici une ligne di­rec­trice pour la mise à l’échelle : 1 pixel CSS cor­res­pond à 1/96 de pouce. L’uti­li­sa­teur peut modifier l’af­fec­ta­tion de px-unit aux pixels du pé­ri­phé­rique en ef­fec­tuant un zoom dans le na­vi­ga­teur.
Cen­ti­mètres cm Taille en cen­ti­mètres
Mil­li­mètres mm Taille en mil­li­mètres
Pouces in Teille en pouces (1 in = 2,54 cm)
Points pt Taille en points (1 pt cor­res­pond à 1/72 pouces)
Pica pc Teille en Pica (1 Pica cor­res­pond à 12 points)

Les unités de mesure relatives sont les in­for­ma­tions con­cer­nant la taille des ca­rac­tères, qui sont dé­ter­mi­nées par rapport à une taille déjà définie. Les éléments HTML héritent de la taille de la police de l’élément parent. Une référence pour une taille de police relative peut également être une directive technique telle que la taille d’affichage d’un terminal ou une valeur par défaut dans le na­vi­ga­teur Web.

Unités de mesures relatives

Unité Ecriture CSS Des­crip­tion
Pour­cen­tage % L’unité de mesure % indique la taille de police en pour­cen­tage de la taille de police héritée. Avec une taille de police héritée de 16 px, une taille de police de 75% cor­res­pond à une taille de police de 12 px.
em (hauteur de police) em L’unité de mesure em est également liée à l’élément parent. 1 em cor­res­pond à 100% de la taille de police héritée. Si une taille de police de 20 px est définie, par exemple, une valeur de 0,8 em cor­res­pond à une taille de police de 80% ou 16px. Si aucune taille de police n’a été définie pour l’élément parent, la taille de police par défaut du pé­ri­phé­rique est utilisée.
Hauteur x ex La valeur de référence pour l’unité de mesure ex est la hauteur de la lettre minuscule x de la police sé­lec­tion­née. Si aucune hauteur x n’est définie pour une police, 1 ex = 0,5 em.
Root-em rem L’unité de mesure rem se réfère à l’élément racine d’un document (par exemple, l’élément HTML). 1 rem cor­res­pond à 100% de la taille de police définie pour l‘élément racine.
Largeur Viewport vw L’unité de mesure v west basée sur la largeur de la zone d’affichage (point de vue) d’un appareil. La règle suivante s’applique : 1 vw = 1% de la largeur du hublot (Viewport).
Hauteur Viewport vh L’unité de mesure vh est basée sur la hauteur de la zone d’affichage d’un appareil. La règle suivante s’applique : 1 vh = 1% de la hauteur Viewport.
Attention

les virgules se notent avec des points sur CSS !

En outre, la taille de la police peut être définie à l’aide de mots-clés absolus et relatifs. La taille de la police par défaut du na­vi­ga­teur (cor­res­pond à la taille de la police : medium) est utilisée à titre indicatif.

Mots-clés absolus

Absolu Des­crip­tion Exemple
xx-small diminutif 9 px
x-small Très petit 10 px
small Petit 13 px
medium moyen (taille de la police par défaut du na­vi­ga­teur) 16 px
large grand 19 px
x-large Très grand 24 px
xx-large ex­traor­di­naire 32 px

Mots-clés:

Relatif Des­crip­tion
smaller L’élément actuel est affiché plus petit que l’élément parent.
larger L’élément actuel est affiché plus grand que l’élément parent.

Afin d’assurer une re­pré­sen­ta­tion optimale de la taille de la police sur les dif­fé­rents pé­ri­phé­riques uti­li­sa­teurs, il est re­com­mandé d’utiliser des unités de mesure relatives telles que em ou %. Si la spé­ci­fi­ca­tion doit être absolue, px est le meilleur choix d’unité de mesure pour la plupart des designers Web.

Le schéma de base du formatage de la taille des ca­rac­tères via CSS cor­res­pond à l’exemple de code suivant :  

.content {
    font-size: 19px;
}
<h2 class="content">TexteExemple</h2>

Le graphique suivant compare les trois tailles de police 16 px, 19 px et 21 px :

Image: comparaison des tailles de polices
aperçu de trois tailles de police dif­fé­rentes

line-height

La propriété CSS line-height est utilisée pour définir la hauteur de ligne d’un pa­ra­graphe. Les mêmes unités de mesure que la taille de la police sont valables, les pour­cen­tages se référant à la taille de police du texte cor­res­pon­dant. Vous pouvez également spécifier la hauteur de ligne en chiffres sans unité de mesure. Les autres valeurs possibles sont normal (réglage par défaut) et inherit (selon l‘élément parent). Une line-height de 1,5 cor­res­pond par exemple à une hauteur de trait de 150 pourcent de la hauteur de police ou 1,5 em. 

.content {
    line-height: 1.5;
}
<p class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

Le graphique suivant compare les blocs de texte avec une hauteur de ligne de 100, 120 et 150 pourcent :

Image: Exemple de texte avec hauteur de ligne variable
La hauteur de ligne des sections de texte varie entre 100, 120 et 150 pourcent

font-weight

La propriété CSS font-weight définit la largeur de ligne d’un élément de texte. Les con­cep­teurs de sites Web les utilisent pour créer des passages en gras. Les valeurs peuvent être spé­ci­fiées absolues ou relatives à l’élément parent.

Valeurs absolues de la propriété font-weight Des­crip­tion
100 Extra fin
200 Très fin
300 fin
400 normal (pa­ra­mètres standard)
500 medium
600 Demi-gras
700 gras
800 Gras épais
900 Gras très épais
normal Largeur de ligne normale (cor­res­pond à la valeur 400)
bold Gras (cor­res­pond à la valeur 700)

Les valeurs absolues de la propriété font-weight sont affichées dif­fé­rem­ment selon la police. Le problème est que dif­fé­rents styles de police sont né­ces­saires pour dif­fé­rentes épais­seurs de trait. Nor­ma­le­ment, cependant, les polices ne sont dis­po­nibles qu’en normal, italique, gras et italique + gras. Si seulement deux épais­seurs de lignes ont été définies, le na­vi­ga­teur prend le plus fin pour les valeurs 100, 200, 300, 400, 500 et le plus épais pour les valeurs su­pé­rieures. Les valeurs nu­mé­riques ne sont per­ti­nentes que pour les polices Web. Par con­sé­quent, deux épais­seurs de lignes dif­fé­rentes sont gé­né­ra­le­ment suf­fi­santes : normale (normal) et grasse (bold). 

.content {
    font-weight: normal;
}
.content {
    font-weight: bold;
}
Image: Ecriture en normal et en gras comparée
la dé­cla­ra­tion font-weight: bold; conduit à la mise en gras de la section de texte

Les valeurs relatives pour la propriété CSS font-weight dé­fi­nis­sent la largeur de ligne d’un élément de texte par rapport à la largeur de ligne héritée de l’élément parent.

Valeurs relatives de la propriété font-weight Des­crip­tion
bolder Plus gras que dans l‘élément parent
lighter Plus fin que dans l‘élément parent

Formatage de texte

En plus de formater la pré­sen­ta­tion ty­po­gra­phique, CSS fournit diverses pro­prié­tés pour la mise en forme de textes. Ces dernières per­met­tent d’ajuster l’alig­ne­ment et l’es­pa­ce­ment du texte entre les ca­rac­tères et les mots, ou de décorer des éléments textuels. Les pro­prié­tés im­por­tantes dans le contexte de la mise en forme du texte sont :

  • text-align
  • hyphens
  • word-spacing
  • letter-spacing
  • text-indent
  • text-de­co­ra­tion
  • text-transform

text-align

La propriété CSS text-align permet d’aligner le texte et les éléments inline, c’est-à-dire des éléments contenus dans le flux du texte, par exemple des images ou des boutons. Les valeurs communes sont left (jus­ti­fiées à gauche), right (jus­ti­fiées à droite), center (centrées), justify (jus­ti­fi­ca­tion entre les deux marges) ou inherit (comme l’élément parent). Le code suivant permet de centrer le texte d’exemple :

.content {
    text-align: center;
}
<p class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

Vous trouverez d’autres options de design dans ce passage :

Image: Exemple de texte avec différentes orientations : justifié à gauche, justifié à droite, centré, justifié à gauche
alig­ne­ment du texte basé sur la propriété text-align

D’autres valeurs de la propriété text-align dé­fi­nis­sent l’alig­ne­ment du texte par rapport à la direction d’un texte (direction).

Valeurs pour l’alig­ne­ment relatif du texte Des­crip­tion
start Le texte est aligné sur la page où il commence. Pour un sens de lecture de gauche à droite { direction: ltr; }, la valeur start cor­res­pond à la valeur left. Pour un sens de lecture de droite à gauche { direction: rtl; }, la valeur start cor­res­pond à la valeur right.
end Le texte est aligné sur la page où se termine le texte. Pour une direction de gauche à droite { direction: ltr; }, la valeur end cor­res­pond à la valeur right. Pour une direction de droite à gauche { direction: rtl; }, la valeur end cor­res­pond à la valeur left.

La valeur start vaut comme valeur standard.

Tous les na­vi­ga­teurs courants affichent au­to­ma­ti­que­ment la dernière ligne justifiée à gauche. Si ce n’est pas souhaité, ceci peut être formaté sé­pa­ré­ment avec la propriété CSS text-align-last. Les valeurs possibles cor­res­pon­dent à celles de la propriété text-align.

hyphens

De plus, avec sa propriété hyphens, CSS3 permet de con­fi­gu­rer une au­to­ma­ti­sa­tion des traits d’union. Le langage des feuilles de style fournit les valeurs suivantes pour la propriété hyphens :

Valeurs pour la propriété hyphens Des­crip­tion
manual Traits d’union manuels : les traits d’union con­di­tion­nels (&shy ou &#173) sont pris en compte lors de de l’uti­li­sa­tion des traits d’union (valeur standard pour hyphens).
none Pas de traits d’union : les traits d’union mous (&shy ou &#173) ne sont pas pris en compte lors de la césure. La rupture de ligne se fait avec des blancs.
auto Traits d’union au­to­ma­tiques : la sé­pa­ra­tion des mots est basée sur les règles du langage défini dans l’attribut HTML lang.
inherit Les pa­ra­mètres cor­res­pon­dent à ceux de l’élément parent.
Attention

la propriété CSS hyphens n’est pas encore com­pa­tible avec tous les na­vi­ga­teurs Web.

word-spacing

La propriété CSS word-spacing contrôle l’es­pa­ce­ment des mots dans un élément de texte. Les ex­ploi­tants de sites Web ont la pos­si­bi­lité de définir les distances entre les mots en fonction des spé­ci­fi­ca­tions de taille. Les ad­mi­nis­tra­teurs de sites Internet ont la pos­si­bi­lité de définir les distances entre les mots en fonction des spé­ci­fi­ca­tions de taille. A cet effet, les unités de mesure indiquées sous font-size sont dis­po­nibles : à l’exception des pour­cen­tages. D’autres valeurs possibles pour la propriété word-spacing sont normal (par défaut) et inherit (cor­res­pond à l’élément parent).

L’exemple de code suivant définit un es­pa­ce­ment des mots de 2 em. Ceci est ajouté à la distance entre les mots par défaut (es­pa­ce­ment des mots : 0, serait la valeur par défaut) : 

.content {
    word-spacing: 2em;
}
<p class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
Image: effet de la propriété word-spacing sur un texte exemple
texte exemple avec un es­pa­ce­ment des mots de 2 em.

letter-spacing

La propriété CSS letter-spacing est utilisée  si vous ne voulez pas définir la distance entre les mots, mais l’es­pa­ce­ment des lettres. Ici aussi, les spé­ci­fi­ca­tions de taille sont dis­po­nibles, à l’exception des pour­cen­tages et des valeurs normal et inherit.

L’exemple de code suivant montre une section de texte dans laquelle un mot est mis en évidence par un es­pa­ce­ment de lettres sup­plé­men­taire de 1 em. Le contenu de la classe special-content est affecté dans le code source HTML par un élément span. 

.special-content {
    letter-spacing: 1em;
}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna <span class="special-content">aliquyam</span> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
Image: effet de la propriété letter-spacing sur un texte exemple
Dans cet exemple de texte, le mot « aliquyam » a été mis en évidence avec un es­pa­ce­ment de lettres de 1 em.

text-indent

Vous pouvez utiliser la propriété CSS text-indent pour définir des in­ser­tions qui se réfèrent uni­que­ment à la première ligne d’un pa­ra­graphe. Les valeurs possibles sont des valeurs positives et négatives ainsi que des valeurs en pour­cen­tage, en relation avec la largeur du bloc de texte respectif.

L’exemple de code suivant définit une insertion de la première ligne de 5% : 

.content {
    text-indent: 5%;
}
<p class="content"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
Image: Texte exemple avec une insertion de la première ligne à 5%
la première ligne du texte en exemple présente une insertion de 5%

Pour définir des pa­ra­graphes suspendus, la propriété text-indent est dotée d’une valeur négative.

text-de­co­ra­tion

La propriété CSS text-de­co­ra­tion vous propose la pos­si­bi­lité d’ajouter des dé­co­ra­tions comme le sou­lig­ne­ment d’éléments de texte. Voici des valeurs possibles :

Valeurs pour text-de­co­ra­tion-property Des­crip­tion
none Pas de dé­co­ra­tion de texte
underline Chaque ligne de la section de texte marquée est soulignée.
overline Une ligne est affichée au-dessus de chaque ligne de la section de texte marquée.
line-through Chaque ligne de la section de texte marquée est barrée.
inherit La dé­co­ra­tion de texte cor­res­pond à l‘élément parent.

L’exemple de code suivant définit le sou­lig­ne­ment pour des phrases sé­lec­tion­nées dans la section de texte. La classe content-underline est affectée dans le code source HTML par des éléments Span. 

.content-underline {
    text-decoration: underline;
}
<p>Nullam quis ante. Etiam sit amet orci eget eros <span class="content-underline">faucibus tincidunt</span>. Duis leo. Sed <span class="content-underline">fringilla mauris sit</span> amet nibh. Donec sodales sagittis magna.</p>
Image: exemple de texte avec soulignement
Dans le texte exemple, deux groupes de mots ont été mis en évidence par des traits de sou­lig­ne­ment

text-transform

La propriété text-transform permet d’effectuer des trans­for­ma­tions de texte via CSS. De cette façon, les zones de texte peuvent être affichées en ma­jus­cules ou en mi­nus­cules sans avoir à ajuster la base du texte. La propriété permet les trans­for­ma­tions suivantes :

Valeurs pour la propriété text-transform Des­crip­tion
ca­pi­ta­lize La première lettre de chaque mot est affichée en majuscule
uppercase L’ensemble de la section de texte s’affiche en ma­jus­cules.
lowercase Toute la section de texte s’affiche en lettres mi­nus­cules.
none Aucune trans­for­ma­tion n’a lieu.
inherit La trans­for­ma­tion cor­res­pond à celle de l‘élément parent.

Si les lettres initiales d’une section doivent être affichées en ma­jus­cules, in­dé­pen­dam­ment du texte original, le formatage suivant est re­com­mandé : 

.content {
    text-transform: capitalize;
}
<p class="content">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>

Le graphique suivant montre une com­pa­rai­son des trans­for­ma­tions de texte CSS.

Image: Aperçu navigateur des transformations CSS capitalize, uppercase et lowercase
com­pa­rai­son des dif­fé­rentes trans­for­ma­tions CSS

Couleurs de police et d’arrière-plan

Lors de la sélection des couleurs de police et d’arrière-plan, les Web­de­sig­ners utilisent gé­né­ra­le­ment les codes de couleur déjà définis en notation décimale ou hexa­dé­ci­male. L’accent est mis sur les pro­prié­tés CSS color et back­ground. Des images d’arrière-plan (back­ground-image) peuvent également être intégrées à des images en arrière-plan.

color

La propriété CSS color est utilisée pour formater la couleur de la police. Les valeurs courantes sont des in­for­ma­tions de couleur sous forme de valeurs RVB, de codes hexa­dé­ci­maux ou de données HSL. De plus, la valeur permet d’afficher les éléments de manière trans­pa­rente et invisible. Selon la re­com­man­da­tion du W3C. L’exemple de code suivant montre le formatage des couleurs à l’aide d’un code de couleur hexa­dé­ci­mal : 

.content {
    font-family: Arial;
    font-size: 5em;
    color: #d82451;
}
<p class="content">Texte Exemple</p>
Image: Formatage couleur avec la propriété color-Property
la propriété color: #d82451 colore un exemple de texte de la classe content en rouge bordeaux

back­ground-color

La propriété CSS back­ground-color est utilisée pour assigner une couleur d’arrière-plan à un élément. Les valeurs possibles cor­res­pon­dent à celles de la propriété color.

L’exemple de code suivant montre un formatage de la police et de la couleur de fond : 

.content {
    font-family: Arial;
    font-size: 5em;
    color: #d82451;
    background-color: #24d8ab;
}
<p class="content">Texte Exemple</p>
Image: Exemple de formatage de la couleur de fond
la propriété back­ground-color: #24d8ab; formate l’arrière-plan en vert turquoise

Le formatage demande au na­vi­ga­teur Web d’afficher tous les éléments de texte de la classe content de couleur rouge bordeaux (#d82451)  sur un arrière-plan vert turquoise (#24d8ab).

back­ground-image

Comme al­ter­na­tive à une couleur de fond, une il­lus­tra­tion peut être utilisée comme arrière-plan. Les designers Web utilisent pour cela la propriété back­ground-image, qui contient le chemin d‘accès en tant que valeur selon la notation suivante : 

.content {
    background-image: 
        url (chemin vers le fichier image);
}

Au lieu de back­ground-image ou back­ground-color, vous pouvez également utiliser l’abré­via­tion back­ground.

De plus, CSS3 offre la pos­si­bi­lité de définir des dégradés de couleurs comme arrière-plan. Les valeurs possibles sont les fonctions linear-gradient(), radial-gradient(), repeating-linear-gradient() et repeating-radial-gradient().

Grades de couleurs CSS Des­crip­tion
linear-gradient() La fonction linear-gradient() crée un dégradé linéaire.
radial-gradient() La fonction radial-gradient()crée un dégradé de couleur radial.
repeating-linear-gradient() La fonction repeating-linear-gradient() crée un dégradé de couleur répétitif linéaire.
repeating-radial-gradient() La fonction repeating-radial-gradient() crée un dégradé de couleur radial répétitif.

Pour en savoir plus sur les dégradés de couleurs, visitez le site Web du W3C. Dans notre in­tro­duc­tion à CSS, nous nous limitons à la fonction linear-gradient(). Si vous voulez stocker un élément avec un dégradé de couleurs linéraire, utilisez la fonction linear-gradient() comme valeur pour la propriété back­ground. Celle-ci nécessite au moins deux spé­ci­fi­ca­tions de couleur comme arguments. C’est au Web­de­sig­ner décider dans quelle notation les couleurs sont définies. Par souci de clarté, nous utilisons un exemple avec des mots-clés de couleur. 

.content {
    width: 400px;  
    height: 400px;  
    background: linear-gradient( green, yellow );
}

Un na­vi­ga­teur Web affiche le ( green, yellow ) en fonction du réglage standard en tant que dégradé de couleur vertical avec des com­po­santes vertes et jaunes équi­va­lentes :

Image: dégradé de couleur vertical
Sans formatage sup­plé­men­taire, le dégradé de couleur linéaire est affiché de haut en bas

En option, les web­de­sig­ners ont la pos­si­bi­lité de dé­ter­mi­ner la direction du dégradé de couleur et sa position in­di­vi­duel­le­ment. La direction du dégradé est définie soit en spé­ci­fiant un bord (en haut, en bas, à gauche, à droite), soit comme une mesure d‘angle (en haut à droite, en bas à droite, en bas à gauche, en haut à gauche). 

.cadres {
    width: 400px;
    height: 400px;
    background: linear-gradient( to left top , green, yellow );
}
Image: Dégradé de couleur linéaire vers le coin supérieur gauche
La spé­ci­fi­ca­tion to left top crée un dégradé de couleur linéaire du bas vers le coin supérieur gauche

Une pro­gres­sion en tant que mesure angulaire est donnée à partir de la valeur standard (vers le bas) dans le sens des aiguilles d’une montre. Les unités de mesure possibles sont deg (degré), grad (pour l’unité angulaire gra­dua­tion) et le rad (radiant). Les dis­po­si­tions suivantes s’ap­pli­quent :

to bottom = 180deg = 200grad = 3.1416rad

Les con­cep­teurs de sites Web dé­ter­mi­nent la position d’un dégradé de couleur à l’aide d’in­for­ma­tions co­lo­ri­mé­triques. Celles-ci sont gé­né­ra­le­ment indiquées sur l’axe du dégradé avec une valeur allant de 0 à 100%.

Les positions standard des couleurs dégradées bicolores vont de 0 à 100%. La zone in­ter­mé­diaire est calculée par le na­vi­ga­teur comme un dégradé et affichée en nuances.

Les Color-Stops vous per­met­tent de démarrer ou d’arrêter le dégradé de couleurs à n’importe quelle position sé­lec­tion­née sur l’axe du dégradé.

Le graphique suivant compare deux dégradés de couleurs avec des spé­ci­fi­ca­tions Color-stop dif­fé­rentes :

back­ground: linear-gradient( 90deg, red 0%, yellow 100% );

back­ground: linear-gradient( 90deg, red 25%, yellow 75% );

Image: deux dégradés de couleurs avec des valeurs Color-Stop différentes
com­pa­rai­son de dif­fé­rentes données Color-Stop

Le premier exemple montre un dégradé de 0 à 100%. Dans le deuxième exemple, le processus commence à 25% et se termine à 75%.

Un nombre illimité de couleurs peut être combiné peut être combiné dans les dégradés de couleurs CSS : avec des niveaux de trans­pa­rence per­son­na­li­sés.

Cadres

CSS vous permet également d’encadrer des éléments HTML. Ceci est par­ti­cu­liè­re­ment re­com­mandé pour les éléments block-level, tels que les titres (h1-6), les pa­ra­graphes (p), les éléments div- ou les tableaux (table) qui ap­pa­rais­sent dans l’élément body. Sans formatage sup­plé­men­taire, ces blocs de contenu s’étendent sur toute la largeur dis­po­nible et sont disposés les uns en dessous des autres. Certains éléments de niveau de bloc tels que <p> ou <h1> ont une distance externe pré­dé­fi­nie par défaut.

Ces éléments sont à dif­fé­ren­cier des éléments inline tels que <b>, <i>, <a> ou <span>, qui ne sont présents que dans les éléments de blocs. La largeur de ces éléments inline est dé­ter­mi­née ex­clu­si­ve­ment par son propre contenu.  

Si vous souhaitez entourer un bloc entier ou un élément inline d’un cadre, utilisez la propriété borders. Al­ter­na­ti­ve­ment, vous pouvez également définir la con­cep­tion du cadre pour chaque page d’un élément in­di­vi­duel­le­ment.

Pro­prié­tés de cadres Des­crip­tion
border Définit les pro­prié­tés du cadre pour toutes les pages de l‘élément.
border-top Définit les pro­prié­tés du cadre supérieur.
border-right Définit les pro­prié­tés du cadre droit.
border-bottom Définit les pro­prié­tés du cadre inférieur.
border-left Définit les pro­prié­tés du cadre gauche.

La propriété border, mais aussi les pro­prié­tés d’en­ca­dre­ment in­di­vi­duelles, peuvent être spé­ci­fiées en fonction du type de cadre (border-style), de sa largeur (border-width) ou de sa couleur border-color). Les valeurs cor­res­pon­dantes sont listées et séparées par des blancs selon le schéma de pro­prié­tés suivant : 

.content {
    border: style width color;
}
.content {
    border: solid 4px #ff0000;
}

La propriété border-radius propose par ailleurs la pos­si­bi­lité d’arrondir les bords du cadre.

Types de cadres

En sé­lec­tion­nant un type de cadre, vous dé­fi­nis­sez un cadre décoratif pour un block-level-element ou inline-element. Certains types de cadres ne sont efficaces que lorsqu’une largeur de cadre ap­pro­priée est sé­lec­tion­née.

Valeurs possibles pour le type de cadre Des­crip­tion
none Pas de cadre.
hidden N’affiche pas de cadre et le supprime des cellules de tableaux adjacents.
dotted Définit un cadre pointillé.
dashed Définit des traits dis­con­ti­nus pour le cadre
solid Définit un cadre solide
double Définit un cadre double
groove, ridge, inset, outset Ces valeurs sont utilisées pour créer dif­fé­rents effets 3D.

Le graphique suivant compare dif­fé­rents types de cadres CSS :

Image: les types de cadres CSS : dotted, dashed, solid, double, groove, ridge, inset und outset
Aperçu des types de cadres CSS

Le type de trame (bordure, ou cadre) doit obli­ga­toi­re­ment être spécifié. Si aucun type de trame n’est spécifié, le cadre n’est pas affiché par le na­vi­ga­teur Web, même s’il y a des valeurs pour la largeur ou la couleur du cadre.

Largeur de cadre

La largeur du cadre définit la largeur de ligne du cadre.

Valeurs possibles pour la largeur du cadre Des­crip­tion
In­di­ca­tion de longueur La taille de la largeur du cadre est spécifiée en utilisant les unités de mesure décrites sous font-size. La largeur du cadre ne peut pas être spécifiée en pour­cen­tage.
thin fine
medium moyen
thick épais

Couleur de cadre

Les pa­ra­mètres de couleurs de la propriété border-color cor­res­pond à ceux des pro­prié­tés color et back­ground-color.

Valeurs possibles pour la couleur du cadre Des­crip­tion
In­di­ca­tions de couleurs Les in­for­ma­tions de couleur pour les images peuvent être saisies dans les mots-clés (par exemple red), ou bien comme valeur HEX, RVB ou HSL.
trans­pa­rent Définit le cadre comme invisible.

L’exemple de code suivant combine la propriété border avec le formatage de la police et de la couleur de fond. L’exemple de code suivant combine la propriété border avec formatage de la police et de la couleur en arrière-plan. La règle est définie dans le document CSS pour le cadre de la classe : 

.cadre {
    font-family: Arial;
    font-size: 5em;
    color: #d82451;
    background-color: #24d8ab;
    border: 10px ridge #d82451;
}

Pour appliquer le formatage, le cadre de la classe CSS dans le code source HTML est transféré à l‘élément <p> en utilisant l’attribut class :

<p class="cadres">TexteExemple</p>

Un na­vi­ga­teur Web im­plé­mente un tel formatage de la manière suivante :

Image: Elément en bloc avec cadre
Formatage possible d’un cadre

border-radius

La propriété border-radius permet d’arrondir les angles d’un cadre en forme cir­cu­laire ou el­lip­tique. Tout arrière-plan sera coupé sur le long de la courbe définie : cela fonc­tionne même si l‘élément n’a pas de cadre. Avec border-radius, des formes géo­mé­triques simples peuvent également être dessinées.

Les valeurs possibles pour la propriété border peuvent être composées de quatre in­di­ca­tions de taille, chacune re­pré­sen­tant un coin du cadre. L’af­fec­ta­tion peut être faite par une, deux, trois ou quatre valeurs.

Valeurs pour la propriété border-radius Des­crip­tion
Une valeur définie La valeur vaut pour les quatre coins.
Deux valeurs définies La première valeur s‘applique pour le coin supérieur gauche et le coin inférieur droit. / La deuxième valeur définit le coin supérieur droit et inférieur gauche.
Trois valeurs définies La première valeur définit le coin supérieur gauche. / La deuxième valeur définit le coin supérieur droit et le coin inférieur gauche. / La troisième valeur définit le coin inférieur droit.
Quatre valeurs définies Chaque coin est défini par sa propre valeur. L’ordre du sens des aiguilles d’une montre s’applique : en haut à gauche, en haut à droite, en bas à droite et en bas à gauche.

Les valeurs in­di­vi­duelles pour le rayon du cadre sont notées derrière la propriété border-radius. Il en résulte le schéma suivant pour la dé­cla­ra­tion (les valeurs nu­mé­riques sont des exemples) :

border-radius: 4em 2em 3em 1em;

La propriété border-radius peut être définie dans le même ensemble de règles que la propriété border ou dans des classes séparées.

L’ensemble de règles suivant définit un cadre avec un border-radius de 2 em. 

.cadre {
    height: 100px;
    width: 600px;
    border: solid 10px #d82451;
    border-radius: 2em;
}
Image: Cadre avec coins arrondis
un border-radius de 2 em permet d’obtenir des angles arrondis réguliers

Il est également possible de définir des valeurs dif­fé­rentes pour chacun des quatre angles : 

.cadres {
    height: 100px;
    width: 600px;
    border: solid 10px #d82451;
    border-radius: 2em 1em 3em 4em;
}
Image: Cadre avec coins arrondis : une valeur différente a été définie pour chaque coin
un rayon de bordure différent a été défini pour chaque coin du cadre

Dans les deux cas, les coins du cadre sont arrondis de façon cir­cu­laire. Si l’arrondi doit être el­lip­tique, deux valeurs sont né­ces­saires pour chaque coin. La dé­cla­ra­tion d’un cadre el­lip­ti­que­ment arrondi peut donc contenir jusqu’à huit valeurs :

    border-radius: 1em 4em 1em 4em / 4em 1em 4em 1em;

Les valeurs avant la barre oblique (/) dé­fi­nis­sent le rayon sur l’axe ho­ri­zon­tal de l’ellipse, les valeurs après la barre oblique dé­fi­nis­sent le rayon sur l’axe vertical. 

.cadres {
    height: 100px;
    width: 600px;
    border: solid 10px #d82451;
    border-radius: 1em 4em / 4em 1em;
}
Image: Cadre avec coins arrondis elliptiquement
Coins de cadre arrondis el­lip­tiques définis par deux valeurs par angle

Tout arrière-plan est recadré au­to­ma­ti­que­ment le long de la courbe. 

.cadres {
    height: 100px;
    width: 600px;
    border: solid 10px #d82451;
    border-radius: 2em; 
    background-color: #24d8ab;
}
Image: Cadre avec coins arrondis et fond sur mesure
l’arrière-plan d’un élément de bloc est au­to­ma­ti­que­ment adapté aux limites

Ceci s’applique aux couleurs et aux images de fond, mais pas aux éléments textuels.

Image: les éléments de texte ne s’adaptent pas automatiquement aux bords arrondis du cadre
les éléments textuels doivent être alignés sé­pa­ré­ment

Le modèle CSS-Box

Afin d’aligner les éléments textuels, gra­phiques et autres éléments de design d’un site Web, CSS utilise une stratégie basée sur la mise en forme de surfaces rec­tan­gu­laires créées par dif­fé­rents éléments de blocs inline. C’est ce qu’on appelle le modèle CSS-box.

Chaque élément HTML est re­pré­senté comme une zone rec­tan­gu­laire dans la pré­sen­ta­tion Frontend d’une page Web : qu’on appelle aussi Box ou boîte. Les ca­rac­té­ris­tiques de ces boîtes, leur flux, et leur étendue dé­ter­mi­nent le design d’un site Web. Chaque site peut donc être considéré comme un ar­ran­ge­ment de diverses boîtes.

Le po­si­tion­ne­ment des boîtes est déterminé par le flux d’éléments (« document flow »). Ce dernier suit un schéma standard : à moins qu’il n’y ait pas d’autre formatage, chaque élément est affiché le plus à gauche possible, en com­men­çant par le premier élément du code source HTML. Tous les éléments suivants sont disposés à droite. S’il n’y a plus d’espace, la case suivante se glisse dans une nouvelle rangée.

CSS distingue deux types de boîtes :

  • Boîtes de bloc : les boîtes de bloc sont créées par des éléments de niveau bloc (par exemple p ou div). Les na­vi­ga­teurs Web les affichent gé­né­ra­le­ment de manière à ce que leur largeur cor­res­ponde à la largeur totale de l’élément parent. Ils cons­trui­sent ainsi des pa­ra­graphes. Les éléments suivants se déplacent au­to­ma­ti­que­ment vers la ligne suivante. La hauteur d’un bloc dépend du contenu de l’élément ou d’un formatage. Les boîtes de bloc peuvent contenir à la fois d’autres éléments au niveau du bloc ainsi que des éléments inline.
  • Boîtes Inline : les cases inline sont créées par des éléments inline (par exemple b, i ou span) à l’intérieur d’une case et ne forment pas de pa­ra­graphes. La largeur et la hauteur d’un élément inline sont ex­clu­si­ve­ment dé­ter­mi­nées par son contenu.

Les dia­grammes suivants il­lustrent le flux d’éléments des blocs et boîtes inline :

Image: trois boîtes de blocs dans le flux d‘éléments CSS
flux d’éléments CSS : les cases de blocs sont affichées res­pec­ti­ve­ment dans une nouvelle ligne

Si aucun autre formatage n’est dis­po­nible, les boîtes de blocs sont affichées avec une largeur maximale, quel que soit leur contenu. Chaque case commence par un nouveau pa­ra­graphe et s’étend sur la largeur totale de l’élément parent. Dans l’exemple, ceci est marqué par un cadre gris. Notez que certains éléments au niveau des blocs tels que <p> sont rendus par les na­vi­ga­teurs Web avec une marge au­to­ma­tique par défaut.

Les boîtes Inline à l’intérieur d’une boîte de bloc ne créent pas de nouveau pa­ra­graphe et sont affichées en ligne dans le flux de texte.

Image: cases de blocs et boîtes inline en comparaison
flux d’éléments CSS : la première boîte de bloc contient une inline-box

L’exemple montre une boîte verte bordée en ligne autour de l’ex­pres­sion « con­sec­te­tuer adi­pis­cing elit ». En raison des fonctions de con­cep­tion des pa­ra­graphes, la mise en page d’une page Web résulte prin­ci­pa­le­ment de la mise en forme des blocs. Il ne doit pas né­ces­sai­re­ment s’agir d’éléments de contenu tels que des titres  ou des pa­ra­graphes. Les éléments HTML sé­man­ti­que­ment vides tels que <div> sont souvent utilisés pour grouper d’autres éléments et ainsi créer une zone qui peut être formatée via CSS.

Le formatage se fait à l’aide du modèle CSS-box. Cela signifie que chaque élément HTML peut être décrit par quatre cases im­bri­quées, qui peuvent être adaptées in­dé­pen­dam­ment les unes des autres aux idées de design sou­hai­tées. Une dis­tinc­tion est faite entre la content-box, padding-box, border-box et margin-box.

Niveau de box model Des­crip­tion
Domaine de contenu (Content-Box) La Content-Box re­pré­sente une zone dont la taille est dé­ter­mi­née par la taille du texte ou les di­men­sions d’un graphique. Pour les éléments au niveau du bloc, la hauteur et la largeur peuvent également être définies in­di­vi­duel­le­ment à l’aide des pro­prié­tés height et width. Ce type de formatage n’est pas dis­po­nible pour les éléments inline.
Ecart intérieur (Padding-Box) La Padding-Box (padding = „rem­bour­rage“) définit l’écart entre Content-Box et Border-Box.
Bordures (Border-Box) Border-Box définit les bordures
Ecart extérieur (Margin-Box) Margin-Box définit l’écart entre l’élément actuel et son élément parent ou voisin. Con­trai­re­ment à padding ou border, la propriété margin peut également avoir des valeurs négatives.

Si les quatre bords d’une boîte doivent être formatés si­mul­ta­né­ment, les pro­prié­tés padding, border et margin sont utilisées. De plus, l’écart interne et externe ainsi que le cadre peuvent être formatés sé­pa­ré­ment pour chaque côté d’une boîte CSS. Les pro­prié­tés res­pec­tives se trouvent dans le tableau suivant :

Ecart interne Bordures Ecart externe
haut padding-top border-top margin-top
bas padding-bottom border-bottom margin-bottom
gauche padding-left border-left margin-left
droite padding-right border-right margin-right

Les valeurs possibles pour les pro­prié­tés listées sont les spé­ci­fi­ca­tions de taille et inherit (selon l‘élément parent). Les écarts externes peuvent également être définis par la valeur auto.

Le schéma suivant montre la structure d’une CSS box :

Image: Modèle CSS-Box
Re­pré­sen­ta­tion sché­ma­tique du modèle CSS-Box

Le modèle CSS-Box en pratique

Le modèle CSS-box peut être clarifié en ajoutant les calques in­di­vi­duels à une Content-Box étape par étape. Le point de départ est une section de texte court, qui dans cet exemple doit être formatée par le contenu du sélecteur de classe : 

<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>

Les di­rec­tives suivantes spé­ci­fient les di­men­sions 150px x 150px pour la Content-Box. D’autres formats dé­fi­nis­sent l’écriture noire (color : #000000;) sur fond blanc (back­ground-color : #ffffff ;). De plus, le texte doit être justifié (text-align: justify;):

.content {
     height: 150px;
     width: 150px;
     color: #000000;
     text-align: justify;
    background-color: #ffffff;
}

Ap­pli­quées à la section texte, ces ins­truc­tions de con­cep­tion con­dui­sent à l’affichage suivant dans le na­vi­ga­teur Web :

Image: Content-Box sans padding, border et margin
si une Content-Box est définie sans padding, border et margin, elle apparait en haut à gauche dans la fenêtre du na­vi­ga­teur

La section de texte apparaît en fonction du flux d’éléments dans le coin supérieur gauche de l’élément parent : re­pré­sen­tée ici comme un champ gris en arrière-plan. Le texte et la couleur d’arrière-plan com­men­cent sans écart sur le côté gauche de la fenêtre du na­vi­ga­teur et rem­plis­sent toute la zone dis­po­nible (150 px x 150 px). Le fond blanc se termine di­rec­te­ment avec le corps du texte.

Un tel design n’est pas attrayant et rend la lecture  difficile. La propriété padding permet donc aux Web­de­sig­ners définir un écart intérieur pour séparer les éléments de texte des éléments de design en­vi­ron­nants. 

.content {
     height: 150px;
     width: 150px;
    color: #000000;
    background-color: #ffffff;
    text-align: justify;
    padding: 10px; 
}

Ajouté à l’ensemble de règles, padding:20px provoque le chan­ge­ment suivant dans la re­pré­sen­ta­tion Frontend :

Image: Content-Box avec padding
padding définit un écart interne

Le na­vi­ga­teur Web ajoute un espace interne de 20px sur les quatre côtés de la content-box. L’élément mesure main­te­nant 190px x 190px. Un autre élément de design adapté serait un cadre. Le na­vi­ga­teur Web ajoute un espace interne de 20px sur les quatre côtés de la content-box. 

.content {
     height: 150px;
     width: 150px;
     color: #000000;
     background-color: #ffffff;
     text-align: justify;
     padding: 10px;
    border: 5px solid #d82451;
}

Dans l’exemple de code, la propriété border reçoit les valeurs 5px solid #d82451. Ce formatage se traduit par un cadre continu rouge bordeaux entourant la Padding-box sur l‘aperçu na­vi­ga­teur.

Image: Content-Box avec padding et border
Le cadre contient Content-Box et Padding-box

Un cadre est ainsi remplacé par la padding-box. La valeur est déduite du contenu. Con­for­mé­ment au flux  d’éléments naturels, la boîte formatée de cette manière s’attache sans es­pa­ce­ment au coin supérieur gauche de l’élément parent. La propriété margin permet de détacher la con­cep­tion d’une page Web au moyen d’un es­pa­ce­ment externe.

L’an­no­ta­tion cor­res­pon­dante est sim­ple­ment ajoutée à l’ensemble de règles existant : 

.content {
    height: 150px;
    width: 150px;
    color: #000000;
    background-color: #ffffff;
    text-align: justify;
    padding: 20px;
    border: 5px solid #d82451;
    margin: 40px;
}

Dans le na­vi­ga­teur Web, un es­pa­ce­ment externe de 40px est converti comme suit :

Image: Content-Box avec padding, border et margin
la propriété margin force une distance externe entre le cadre et l‘élément parent

La Block-Box <p> est main­te­nant libre dans l’élément parent.

Comme al­ter­na­tive à la spé­ci­fi­ca­tion de mesure, la propriété margin peut être fournie avec la valeur auto. Dans ce cas, la boîte s’aligne au­to­ma­ti­que­ment ho­ri­zon­ta­le­ment, centrée dans l’élément parent. Auto n’a pas de ré­per­cus­sions dans le sens vertical. 

.content {
    width: 150px;
    color: #000000;
    background-color: #ffffff;
    text-align: justify;
    padding: 20px;
    border: 5px solid #d82451;
    margin: auto; 
}
Image: Block-Box avec comme valeur margin auto
la valeur margin auto produit un centrage ho­ri­zon­tal de la block-box dans l’élément parent

Calculer la hauteur et la largeur d’une boîte CSS

L’espace requis pour une boîte CSS peut être déterminé en ajoutant les valeurs de tous les com­po­sants per­ti­nents d’une boîte. Le calcul suivant s’applique :

L’élément mesure 200px x 200px, l’espace requis est de 280px x 280px.

Float

Si la boîte à formater est une boîte de bloc, les boîtes suivantes se déplacent au­to­ma­ti­que­ment vers la ligne suivante en fonction du flux d’éléments.

Image: Chaque case de bloc est affichée dans une nouvelle ligne dans le flux d’éléments
saut de ligne au­to­ma­tique entre deux boîtes de blocs

Le saut de ligne au­to­ma­tique après un bloc n’est pas toujours sou­hai­table dans la pratique et peut être évité à l’aide de la propriété float. Cela permet d’éliminer les boîtes de blocs du flux normal des éléments et de les placer dans la position souhaitée. Selon la spé­ci­fi­ca­tion CSS, float accepte quatre valeurs :

Valeurs pour la propriété float Des­crip­tion
none L’élément n’est pas déplacé. La valeur float: none; est la valeur par défaut d’une boîte CSS.
left Le bloc est déplacé vers le bord intérieur gauche de l’élément parent.
right Le bloc est déplacé vers le bord intérieur droit de l’élément parent.
inherit La valeur float cor­res­pond à celle de l‘élément parent.

Une boîte formatée avec float est appelée Float.

Si plusieurs Floats se re­trou­vent ensemble, ils sont disposés de gauche à droite (float:left) ou de droite à gauche (float:right) selon l’’ordre dans lequel ils ap­pa­rais­sent dans le code source HTML.

L’exemple de code suivant montre un ensemble de règles .content incluant la propriété float : 

.content {
    height: 150px;
    width: 150px;
    color: #000000;
    background-color: #ffffff;
    text-align: justify;
    padding: 20px;
    border: 5px solid #d82451;
    margin: 40px; 
    float: left; 
}

Si cela s’applique à deux éléments HTML, ils sont surlignés dans le flux d’éléments et affichés avec une jus­ti­fi­ca­tion à gauche :

<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
<p class="content">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
Image: Deux boîtes de bloc Floats alignées à gauche
La propriété float peut être utilisée pour afficher les cases de blocs côte à côte sans sauts de ligne

Un important écart est créé en ad­di­tion­nant la distance ex­té­rieure des deux boîtes (d’une marge de 40px chacune). Sans float, les distances ex­té­rieures des éléments adjacents s’ef­fon­dre­raient.

Si la largeur totale des floats suc­ces­sifs est su­pé­rieure à la largeur de l’élément parent, tous les éléments sub­sé­quents qui dé­pas­se­raient de l’élément parent glis­se­ront vers la ligne suivante.

Image: Saut de ligne après le deuxième Float
Le troisième float ne rentre pas dans l’élément parent et glisse sur la ligne suivante

Cette règle ne vaut pas pour le premier float. S’il est plus grand que son élément parent, il en sort.

Image: boîte float sortant de l’élément parent
si l’élément parent est trop petit, la boîte float sort de cet élément

Comme al­ter­na­tive à la propriété float, les boîtes CSS se dis­tin­guent également du flux d’éléments naturels par des in­for­ma­tions de po­si­tion­ne­ment et peuvent être alignées de manière définie par l’uti­li­sa­teur.

Po­si­tion­ne­ment

La propriété CSS position est utilisée pour supprimer une case du flux d’éléments et la placer n’importe où sur le site Web. D’autres boîtes : qu’elles soient en­cas­trées dans le flux d’éléments ou po­si­tion­nées : n’ont aucune influence sur la position d’une telle boîte formatée.

La propriété position présente cinq valeurs possibles : absolute, fixed, relative, static et sticky et peut être spécifiée plus en détail par les pro­prié­tés gauche, droite, haut et bas ainsi que leurs valeurs. En règle générale, deux valeurs suffisent pour dé­ter­mi­ner la position (par exemple en haut et à gauche).

Valeurs pour la propriété position Des­crip­tion
absolute La boîte est détachée du flux de l’élément et po­si­tion­née à l’em­pla­ce­ment défini par les pro­prié­tés suivantes : top, bottom, left et right. Les spé­ci­fi­ca­tions sont en relation avec l’élément supérieur suivant, qui a également été spécifié par la propriété position. Si un tel élément n’existe pas, l’élément racine <html> est pris comme point de référence. Les cases avec la dé­cla­ra­tion position:absolute n’ont aucune influence sur la position d’autres éléments et su­per­po­si­tion ou sont su­per­po­sés par ces derniers.
relative Si la dé­cla­ra­tion position:relative est utilisée, la case reste reliée dans le flux d’éléments naturels, mais peut être déplacée par rapport à elle par les spé­ci­fi­ca­tions de po­si­tion­ne­ment top, bottom, left et right. La boîte res­pec­tive est ainsi alignée sur elle-même. Les éléments pré­cé­dents et suivants du flux se com­por­tent comme si la boîte n’avait pas été déplacée.
fixed Si une case est placée sur position: fixed, la position est définie par rapport à la fenêtre. Une boîte ainsi fixée apparaît toujours au même endroit à l’écran, même si un visiteur parcourt le site. Les éléments de na­vi­ga­tion tels que les menus ou les boutons d‘arrêt (par exemple « retour en haut de la page ») peuvent être attachés à la zone visuelle de l’uti­li­sa­teur.
static La boîte prend sa position naturelle dans le flux de texte. Si la dé­cla­ra­tion position:static a été sé­lec­tion­née, les spé­ci­fi­ca­tions de position top, bottom, left et right sont inef­fi­caces. La valeur static est la valeur par défaut de la propriété position.
sticky La position est calculée en fonction du flux d’éléments normaux et se comporte comme un élément avec la dé­cla­ra­tion position:relative, tant qu’elle est dans la fenêtre. Cependant, s’il menace de dis­pa­raître de la zone d’affichage, il se détache du flux de l’élément et reste « collé » à une position définie par le web­de­sig­ner lors du dé­fi­le­ment. La valeur sticky peut donc être con­si­dé­rée comme une com­bi­nai­son relative et fixed.

Po­si­tion­ne­ment Absolute

Les ensembles de règles suivants con­tien­nent les in­for­ma­tions de po­si­tion­ne­ment absolues des boîtes CSS rouges, bleues et vertes dans l‘élément parent back­ground. 

.background {
    height: 500px; 
    width: 500px;
    border: solid grey 
}
.rouge {
    height: 150px;
    width: 150px;
    background-color: rgba(255,0,0,0.5);
    position: absolute;
    top: 100px;
    left: 100px;
}
.bleu {
    height: 150px;
    width: 150px;
    background-color: rgba(0,0,255,0.5);
    position: absolute;
    top: 150px;
    left: 150px;
}
.vert {
    height: 150px;
    width: 150px;
    background-color: rgba(0,255,0,0.5);
    position: absolute;
    top: 200px;
    left: 200px;
}

Les boîtes de contenu rouges, bleues et vertes ont été formatées sous forme de surfaces semi-trans­pa­rentes avec les di­men­sions 150px x 150px. L’arrière-plan de la zone de contenu aux di­men­sions 500px x 500px est entouré d’un cadre gris.

Les ins­truc­tions de con­cep­tion sont incluses dans le code HTML via les classes. 

<div class="background">
    <p class="rouge"> </p>
    <p class="bleu"> </p>
    <p class="vert"> </p>
</div>

La vue sur le na­vi­ga­teur affiche les dif­fé­rentes positions des cases <p> dans l’élément <div>. Les éléments sont décalés de 50px vers le coin inférieur droit. La trans­pa­rence des couleurs illustre la pos­si­bi­lité d’un che­vau­che­ment en position absolue.

Image: positionnement absolu des boîtes CSS
trois boîtes CSS trans­pa­rentes avec dif­fé­rents po­si­tion­ne­ments absolute

Po­si­tion­ne­ment Relative

En position relative, l’alig­ne­ment des boîtes in­di­vi­duelles est basé sur le débit normal de l’élément. Les éléments de bloc sans formatage float sont affichés les uns en dessous des autres.

Image: trois boîtes de bloc dans le flux d’éléments normaux
les cases de bloc sont affichées les unes en dessous des autres dans le flux de texte naturel

La distance ex­té­rieure au-dessus des éléments cor­res­pond à la valeur par défaut pour les éléments <p>. Afin d’aligner une boîte à partir de sa position dans le flux d‘éléments, la règle cor­res­pon­dante est étendue par la dé­cla­ra­tion position : relative et les spé­ci­fi­ca­tions de position sou­hai­tées. Le bloc de code suivant le montre en utilisant la case bleue comme exemple.

.content2 {
    height: 150px;
    width: 150px;
    background-color: rgba(0,0,255,0.5);
    position: relative;
    left: 50px;
}

L’ins­truc­tion de con­cep­tion position:relative avec l’in­di­ca­tion de position left:50px entraîne un décalage de la boîte bleue de 50px vers la gauche sur l’affichage du na­vi­ga­teur.

Image: positionnement relative basé sur le flux d’éléments naturels
Po­si­tion­ne­ment relatif de la boîte bleue par rapport au flux d’éléments naturels

Le po­si­tion­ne­ment relatif peut également être appliqué aux éléments float :

.content2 {
     height: 150px;
     width: 150px;
     background-color: rgba(0,0,255,0.5);
     position: relative;
    top: 50px;
    float: left;
}
Image: positionnement relatif des boîtes CSS flottantes
Po­si­tion­ne­ment relatif de la boîte bleue dans le flux des boîtes à blocs flot­tantes

Boîtes CSS fixes

Comme pour le po­si­tion­ne­ment absolu, l’alig­ne­ment des boîtes fixes est extrait du flux de l’élément. Toutes les in­for­ma­tions de po­si­tion­ne­ment sont en relation avec la vue de l’uti­li­sa­teur final.

L’ensemble de règles suivant demande à un na­vi­ga­teur Web de fixer une petite case rouge dans le coin inférieur gauche de la fenêtre. 

.content1 {
    height: 50px;
    width: 150px;
    background-color: rgba(255,0,0,0.5);
    position: fixed;
    bottom: 10px;
    left: 15px;
}

La case rouge reste toujours à la position définie par les in­for­ma­tions de position dans la fenêtre du na­vi­ga­teur (en bas : 10px ; à gauche : 15px), même si d’autres éléments comme la zone de texte bleue per­met­tent de faire défiler le site.

Image: boîte CSS fixe
Les cases fixes restent sur la position définie dans la fenêtre de vi­sua­li­sa­tion malgré le dé­fi­le­ment

De débutant à pro­fes­sion­nel

Le but de notre tutoriel était d’illustrer les pos­si­bi­li­tés avancées de CSS pour les débutants. Cependant, un cours accéléré n’est pas suffisant pour décrire en détail toutes les fonctions du langage en feuille de style. Si votre intérêt pour CSS va au-delà de la mise en forme montrée ici, nous vous re­com­man­dons le Mozilla Developer Network. Nous avons également inclus une sélection d’astuces utiles pour CSS pour les uti­li­sa­teurs avancés dans un de nos autres guides sur le sujet.

Aller au menu principal