Tutoriel CSS : in­tro­duc­tion aux Cascading Style Sheets

CSS sert à définir l’apparence et la mise en page des sites Web. Avec les Cascading Style Sheets, vous séparez le design du contenu et obtenez ainsi une structure claire et flexible. Dans ce tutoriel CSS, vous découvrez comment piloter pré­ci­sé­ment la mise en page, les couleurs et la ty­po­gra­phie de votre site Web avec CSS.

Séparer le contenu et la pré­sen­ta­tion

En com­bi­nai­son avec HTML, CSS sert à séparer le contenu de la pré­sen­ta­tion.

Le Hypertext Markup Language (HTML) est utilisé pour enrichir des documents texte avec des in­for­ma­tions servant à struc­tu­rer sé­man­ti­que­ment les éléments de texte. Ce langage de balisage constitue ainsi la base de tout site Web : le code HTML. Il décrit de quels éléments HTML se compose un document (p. ex. <body>, <header>, <footer>) et comment les in­for­ma­tions doivent être in­ter­pré­tées (p. ex. titre <h1> ou pa­ra­graphe <p>).

À l’origine, HTML proposait aussi des ins­truc­tions de mise en forme ru­di­men­taires. Mais avec HTML5, elles sont con­si­dé­rées comme obsolètes et ne doivent plus être utilisées aujourd’hui. À la place, on utilise le langage de feuilles de style CSS (Cascading Style Sheets) pour gérer sé­pa­ré­ment les règles de pré­sen­ta­tion.

Qu’est-ce que le CSS ?

Comme HTML, le CSS est également rédigé sous forme de texte. Cela peut se faire di­rec­te­ment dans le document HTML (en ligne pour chaque document ou une seule fois dans l’en-tête HTML). En règle générale, les Web­de­sig­ners intègrent toutefois des fichiers CSS séparés pour mettre en forme les pages Web. Le résultat est un code source plus lisible, dans lequel les ins­truc­tions de mise en forme re­don­dantes sont évitées grâce à des ré­fé­rences à des feuilles de style dis­tinctes : moins il y a de ré­pé­ti­tions, plus le code source est léger.

Si des ajus­te­ments de design sont né­ces­saires, ils sont effectués dans les fichiers CSS centraux. Il n’est donc pas né­ces­saire de parcourir chaque document HTML et de l’ajuster 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).

Com­prendre la structure de base : la syntaxe CSS

La mission prin­ci­pale du CSS est de définir l’apparence d’un site Web. Pour cela, des pro­prié­tés associées à des valeurs spé­ci­fiques sont ap­pli­quées aux éléments HTML à l’aide de ce langage de feuilles de style. La structure de base d’une règle de mise en forme repose sur le schéma suivant :

selecteur { declaration }

« selecteur » est une re­pré­sen­ta­tion de l’élément HTML auquel la règle de mise en forme se rapporte. La dé­cla­ra­tion se compose d’une com­bi­nai­son propriété-valeur, notée ensuite entre accolades. Chaque dé­cla­ra­tion se termine par un point-virgule :

selecteur { propriete: valeur; }

Selon ce schéma, vous pouvez par exemple attribuer à un titre une couleur de police, comme le rouge :

h2 { color: red; }

Les Web­de­sig­ners peuvent attribuer une propriété unique au sélecteur ou définir des ensembles de règles plus complets, qui incluent des ins­truc­tions de mise en forme dé­tail­lées. Pour plus de li­si­bi­lité, une notation s’est imposée : toutes les pro­prié­tés d’un ensemble de règles sont écrites les unes sous les autres :

selecteur {
propriete1 : valeur;
propriete2 : valeur;
propriete3 : valeur;
}

En 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;
}

Un ensemble de règles peut également spécifier plusieurs sé­lec­teurs. Dans le cas suivant, ils sont indiqués avant la dé­cla­ra­tion et séparés par des virgules :

selecteur1, selecteur2 { declaration }

Utiliser les sé­lec­teurs CSS

CSS prend en charge divers sé­lec­teurs, qui per­met­tent une at­tri­bu­tion per­son­na­li­sée des ins­truc­tions de mise en forme. Pour débuter, il suffit de se fa­mi­lia­ri­ser avec les sé­lec­teurs de type, de classe, d’ID et uni­ver­sels. La sen­si­bi­lité à la casse dépend du document : en HTML, les noms d’éléments ne sont gé­né­ra­le­ment pas sensibles à la casse, tandis qu’en XML ils le sont. Pour class/id, nous vous re­com­man­dons d’utiliser une casse cohérente partout (HTML et CSS).

Sélecteur de type

L’uti­li­sa­tion de dif­fé­rents sé­lec­teurs CSS peut s’illustrer à l’aide d’exemples. Le code suivant montre le sélecteur de type h2 avec sa dé­cla­ra­tion :

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

La mise en forme s’applique à tous les éléments HTML de type h2.

Sélecteur de classe

Vous pouvez aussi appliquer la mise en forme CSS à l’aide d’un sélecteur de classe. Cela permet aux designers d’attribuer les mêmes règles de style à des éléments HTML, quel que soit leur type.

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

La mise en forme s’applique à tous les éléments HTML auxquels la classe .content a été attribuée. Cette at­tri­bu­tion se fait dans le code HTML selon le schéma suivant :

<p class="content">Exemple de texte</p>

Sélecteur d’ID

Si une règle de style ne doit s’appliquer qu’à un seul élément dans le code source HTML, un sélecteur d’ID est re­com­mandé. L’exemple suivant montre la mise en forme d’une zone de na­vi­ga­tion :

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

L’at­tri­bu­tion de la mise en forme se fait dans le code source HTML sans hashtag :

<div id="navigation">
<ul>
<li><a href="index.htm">Page d’accueil</a></li>
<li><a href="mentionslegales.htm">Mentions légales</a></li>
</ul>
</div>

L’avantage des sé­lec­teurs d’ID est qu’ils per­met­tent de voir d’un coup d’œil quelles sections du code source cor­res­pon­dent à des zones uniques.

Sélecteur universel

Si une règle de style doit s’appliquer à tous les éléments d’un document HTML, on utilise l’as­té­risque (*) :

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

Tous les éléments du document utilisent la police Helvetica.

Intégrer le CSS dans HTML

Pour qu’un na­vi­ga­teur puisse prendre en compte les mises en forme CSS, les règles de style doivent être associées au code source HTML. Trois pos­si­bi­li­tés s’offrent à vous :

• L’in­té­gra­tion directe des dé­cla­ra­tions CSS dans les balises HTML
• Le balisage CSS dans l’en-tête HTML
• La référence à une feuille de style distincte

Cette dernière solution est con­si­dé­rée comme la meilleure approche : en pratique, les feuilles de style sont le plus souvent créées sous forme de fichiers texte externes, puis intégrées.

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

Si une dé­cla­ra­tion CSS doit mettre en forme un seul endroit dans le code source, elle peut être indiquée di­rec­te­ment dans la balise ouvrante de l’élément HTML concerné, à l’aide de l’attribut style. On parle dans ce cas de « Inline-Style ».

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

Cela présente l’avantage de ne pas avoir à créer de feuille de style dédiée et d’éviter l’uti­li­sa­tion d’un sélecteur. En revanche, ce type d’at­tri­bu­tion possède une priorité élevée dans la cascade CSS, car les styles inline ont une spé­ci­fi­cité su­pé­rieure à celle des sé­lec­teurs clas­siques définis dans une feuille de style. La dé­cla­ra­tion !important peut toutefois modifier cet ordre de priorité et permettre à une règle externe de s’appliquer malgré un style inline. Dès qu’un ensemble complet de règles est utilisé, ce mode de mise en forme devient ra­pi­de­ment peu lisible, difficile à maintenir et redondant.

Marquage CSS dans l’en-tête HTML

Si une seule et même règle de mise en forme doit être utilisée plusieurs fois dans un document HTML pour le même élément (par exemple pour tous les h2 de la page Web), la dé­cla­ra­tion CSS dans la balise HTML est inef­fi­cace. Il est alors pré­fé­rable de définir une seule fois les in­di­ca­tions de mise en forme cor­res­pon­dantes dans l’en-tête HTML du document à l’aide de l’élément style :

<!DOCTYPE html>
<html lang="fr">
<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-titre 1</h2>
[…]
<h2>Sous-titre 2</h2>
[…]
</body>
</html>

L’ensemble de règles au sein de l’élément style est au­to­ma­ti­que­ment appliqué à tous les éléments h2 suivants. Si l’élément h2 doit également être utilisé sur d’autres pages Web du même projet en ligne avec les règles de mise en forme définies ici, vous pouvez sim­ple­ment définir ces règles via un fichier CSS cen­tra­lisé.

Référence à une feuille de style séparée

Lorsque des règles de mise en forme sont définies dans une feuille de style séparée, il faut l’intégrer au document HTML concerné. Cela se fait à l’aide de l’élément HTML <link> :

<link rel="stylesheet" href="print.css" media="print">

L’élément link contient les attributs obli­ga­toires rel et href et peut, de manière op­tion­nelle, être complété par les attributs type et media.

Indiquer les couleurs en CSS

Comme évoqué dans le chapitre d’in­tro­duc­tion, les at­tri­bu­tions de couleurs via CSS peuvent être définies à l’aide des noms de couleurs en anglais. En pratique, on rencontre toutefois assez rarement ce type d’ins­truc­tions de mise en forme. Le modèle RGB est plus souvent utilisé. Il offre nettement plus de nuances et permet ainsi aux pro­prié­taires de sites Web d’effectuer des réglages de couleur précis. Les codes cor­res­pon­dants peuvent être obtenus via un sélecteur de couleurs, que Google propose par exemple sous la forme d’une réponse rapide.

Close

Les com­po­santes de couleur sont définies dans le modèle RGB par des valeurs décimales comprises entre 0 et 255 : 0 signifie qu’aucune com­po­sante n’est présente, 255 cor­res­pond à une intensité maximale.

Depuis CSS3, vous pouvez ajouter une quatrième valeur, le canal alpha (a), qui règle la trans­pa­rence : 0 rend la couleur to­ta­le­ment trans­pa­rente, 1 la rend to­ta­le­ment opaque (par exemple 0.8 pour une opacité de 80 %). La syntaxe est la suivante :

rgba(<r>, <g>, <b>, <alpha>)

Ainsi, les valeurs RGBA suivantes donnent, par exemple, la couleur de base bleu avec une trans­pa­rence de 50 % :

color:rgba(0, 0, 255, 0.5);

Connaître les prin­ci­pales pro­prié­tés CSS

Avec CSS, vous disposez de nom­breuses pro­prié­tés qui per­met­tent de définir des règles de mise en forme pour les éléments HTML. Chaque propriété accepte un ensemble de valeurs défini dans la spé­ci­fi­ca­tion. Pour plus de clarté, les pro­prié­tés CSS sont re­grou­pées par domaines d’uti­li­sa­tion. Nous nous con­cen­trons sur les pro­prié­tés les plus im­por­tantes.

Ty­po­gra­phie

Parmi les ca­rac­té­ris­tiques es­sen­tielles d’un site Web, on trouve la ty­po­gra­phie. CSS vous offre diverses pos­si­bi­li­tés pour mettre en forme les éléments de texte d’une page HTML.

font-family

Si vous souhaitez définir une police (font) spé­ci­fique pour les éléments de texte d’un site Web, utilisez la propriété CSS font-family. Elle vous permet de créer ce que l’on appelle une pile de polices (font stack). Il s’agit d’une liste priorisée de polices adaptées. Les piles de polices sont conçues de sorte que la police souhaitée soit indiquée en premier, suivie d’une liste d’al­ter­na­tives d’affichage ap­pro­priées :

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

L’exemple montre une règle de mise en forme dans le fichier CSS. La police prio­ri­taire est Georgia, et la police al­ter­na­tive Garamond. Un na­vi­ga­teur Web est ainsi invité à afficher le passage de texte en Garamond si la police Georgia n’est pas installée sur le système.

font-style

La propriété CSS font-style concerne le style de police d’un pa­ra­graphe et vous permet de définir des règles de mise en forme pour l’in­cli­nai­son des ca­rac­tères ainsi mis en évidence.

L’exemple suivant montre une règle de mise en forme pour le style de police italique :

.special-content {
font-family: Arial;
font-style: italic;
}

font-variant

La propriété CSS font-variant est utilisée pour définir des variantes de police.

L’exemple suivant définit la variante de police small-caps :

.content {
font-family: Arial;
font-variant: small-caps;
}

font-size

Avec la propriété CSS font-size, vous dé­fi­nis­sez la taille d’affichage des éléments de texte. Celle-ci peut être exprimée à l’aide de valeurs absolues ou relatives. La valeur définie cor­res­pond au corps de la police, c’est-à-dire à la taille de référence à partir de laquelle le na­vi­ga­teur calcule la hauteur visible des ca­rac­tères et les es­pa­ce­ments associés.

Unités de mesure absolues

Les unités de mesure absolues reposent sur des longueurs physiques. À l’écran, les na­vi­ga­teurs les con­ver­tis­sent toutefois en pixels CSS, en se basant sur une ré­so­lu­tion de référence de 96 dpi. En pratique, seule l’unité px est cou­ram­ment utilisée en Webdesign. Les autres unités absolues sont surtout per­ti­nentes pour les mises en page destinées à l’im­pres­sion.

De plus, la taille de police peut être définie à l’aide de mots-clés absolus :

Unités de mesure relatives

Les unités de mesure relatives cor­res­pon­dent à des valeurs de taille de police calculées en fonction d’une taille déjà définie. Les éléments HTML héritent de leur taille de police de l’élément parent concerné. La référence d’une taille de police relative peut également être un repère technique comme la taille d’écran d’un appareil ou une valeur par défaut du na­vi­ga­teur Web.

La taille de police peut aussi être définie à l’aide de mots-clés relatifs. Le point de référence est ici la taille de police par défaut du na­vi­ga­teur.

Pour garantir un affichage optimal de la taille de police sur dif­fé­rents appareils des uti­li­sa­teurs, il est re­com­mandé d’utiliser des unités de mesure relatives comme em ou %.

Le schéma de base du formatage de la taille de police via CSS cor­res­pond à l’exemple de code suivant :

.content {
font-size: 1em;
}

line-height

La propriété CSS line-height est utilisée pour définir la hauteur de ligne d’un pa­ra­graphe de texte. Les mêmes unités de mesure que pour font-size s’ap­pli­quent, les pour­cen­tages se référant à la font-size du texte concerné. Vous pouvez aussi définir line-height avec des nombres sans unité. D’autres valeurs possibles sont normal (valeur par défaut) et inherit (con­for­mé­ment à l’élément parent).

Une line-height de 1,5 cor­res­pond par exemple à une hauteur de ligne de 150 % de la taille de police concernée, soit 1.5em.

.content {
line-height: 1.5;
}

font-weight

La propriété CSS font-weight définit la largeur de ligne d’un élément de texte. Les designers l’utilisent pour mettre en gras certains passages. Les valeurs peuvent être définies de manière absolue ou relative par rapport à l’élément parent.

Les valeurs nu­mé­riques ne sont per­ti­nentes que pour les Webfonts. En pratique, deux épais­seurs de texte suffisent gé­né­ra­le­ment : normal et bold.

.content {
font-weight: normal;
}
.content {
font-weight: bold;
}

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.

Formatage du texte

En plus de la mise en forme de la police, CSS met à votre dis­po­si­tion diverses pro­prié­tés de mise en forme du texte. Elles vous per­met­tent de définir l’alig­ne­ment du texte ainsi que l’es­pa­ce­ment entre les ca­rac­tères et les mots, ou d’ajouter des dé­co­ra­tions aux éléments de texte.

text-align

La propriété CSS text-align sert à aligner le texte et les éléments inline, c’est-à-dire les éléments intégrés au flux de texte, par exemple des images ou des boutons. Les valeurs courantes sont :

• left (aligné à gauche)
• right (aligné à droite)
• center (centré)
• justify (justifié)
• inherit (comme l’élément parent)

Le code suivant entraîne un alig­ne­ment centré du texte d’exemple :

.content {
text-align: center;
}

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

La valeur start est con­si­dé­rée comme la valeur par défaut (dépend de direction).

Tous les na­vi­ga­teurs courants affichent par défaut la dernière ligne d’un texte justifié alignée à gauche. Si ce com­por­te­ment n’est pas souhaité, il est possible de la mettre en forme sé­pa­ré­ment à l’aide de la propriété CSS text-align-last. Les valeurs dis­po­nibles cor­res­pon­dent à celles de la propriété text-align.

hyphens

De plus, CSS offre, avec la propriété hyphens, la pos­si­bi­lité de mettre en place une césure au­to­ma­tique. Le langage de feuille de style met à dis­po­si­tion les valeurs suivantes pour la propriété hyphens :

word-spacing

La propriété CSS word-spacing règle l’es­pa­ce­ment entre les mots au sein d’un élément de texte. Les ex­ploi­tants de sites Web ont la pos­si­bi­lité de définir les espaces entre les mots via des valeurs de taille. Pour cela, les unités pré­sen­tées sous font-size sont dis­po­nibles, à l’exception du pour­cen­tage. Les autres valeurs possibles pour la propriété word-spacing sont normal (valeur par défaut) et inherit (selon l’élément parent).

L’exemple de code suivant définit un es­pa­ce­ment entre les mots de 2em. Celui-ci s’ajoute à l’es­pa­ce­ment par défaut entre les mots.

.content {
    word-spacing: 2em;
}

letter-spacing

Si ce n’est pas l’es­pa­ce­ment entre les mots, mais l’es­pa­ce­ment entre les lettres qui doit être défini, on utilise la propriété CSS letter-spacing. Ici aussi, des valeurs de taille (à l’exception du pour­cen­tage) ainsi que les valeurs normal et inherit sont dis­po­nibles.

L’exemple de code suivant montre un passage de texte dans lequel un mot est mis en évidence grâce à un es­pa­ce­ment sup­plé­men­taire entre les lettres de 1em.

.special-content {
    letter-spacing: 1em;
}

text-indent

Avec la propriété CSS text-indent, vous avez la pos­si­bi­lité de définir des retraits qui ne s’ap­pli­quent qu’à la première ligne d’un pa­ra­graphe. Les valeurs possibles incluent des valeurs positives, négatives ainsi que des pour­cen­tages, en relation avec la largeur du bloc de texte concerné.

L’exemple de code suivant définit un retrait de la première ligne de 5 %. La classe est attribuée dans le code source HTML via des éléments span :

.content {
    text-indent: 5%;
}

Pour définir des pa­ra­graphes à retrait négatif (alinéa suspendu), la propriété text-indent est définie avec une valeur négative.

text-decoration

La propriété CSS text-decoration permet d’appliquer des effets visuels aux éléments de texte, par exemple le sou­lig­ne­ment.

L’exemple de code suivant définit des sou­lig­ne­ments pour des groupes de mots sé­lec­tion­nés au sein du passage de texte :

.content-underline {
text-decoration: underline;
}

text-transform

La propriété text-transform permet d’effectuer des trans­for­ma­tions de texte via CSS. Vous pouvez ainsi afficher des zones de texte en ma­jus­cules ou en mi­nus­cules, sans avoir à modifier le texte d’origine. La propriété permet les trans­for­ma­tions suivantes :

Si vous souhaitez afficher les premières lettres d’un passage en ma­jus­cules, in­dé­pen­dam­ment du texte d’origine, la mise en forme suivante est re­com­man­dée :

.content {
text-transform: capitalize;
}

Couleurs du texte et d’arrière-plan

Lors du choix des couleurs du texte et d’arrière-plan, les Web­de­sig­ners utilisent gé­né­ra­le­ment les codes couleur déjà expliqués, en écriture décimale ou hexa­dé­ci­male. Un certain nombre de pro­prié­tés utilisent ces codes couleur.

color

La propriété CSS color sert à mettre en forme la couleur du texte. Les valeurs courantes sont des couleurs exprimées en RGB, en codes hexa­dé­ci­maux ou en HSL. Pour gérer la trans­pa­rence du texte, on peut utiliser la valeur trans­pa­rent ou des couleurs avec canal alpha (rgba(), hsl()). La propriété opacity ne fait pas partie de color et modifie la trans­pa­rence de l’élément dans son ensemble.

.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
}

background-color

La propriété CSS background-color est utilisée lorsqu’une couleur d’arrière-plan doit être attribuée à un élément. Les valeurs possibles cor­res­pon­dent à celles de la propriété color.

L’exemple de code suivant montre une mise en forme de la couleur du texte et de l’arrière-plan :

.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
}

La mise en forme indique au na­vi­ga­teur Web d’afficher tous les éléments de texte de la classe content en bordeaux (#d82451) et de leur appliquer un arrière-plan vert turquoise (#24d8ab).

background-image

Comme al­ter­na­tive à une couleur d’arrière-plan, une image peut être chargée en arrière-plan d’un élément. Pour cela, les designers utilisent la propriété background-image, qui contient comme valeur le chemin d’accès vers l’image selon la syntaxe suivante :

.content {
    background-image: url("chemin/vers/image.jpg");
}

Au lieu de background-image ou background-color, vous pouvez aussi utiliser la notation abrégée background.

De plus, CSS offre la pos­si­bi­lité de définir des dégradés de couleurs en arrière-plan :

Dans notre in­tro­duc­tion au CSS pour débutants, nous nous limitons, à titre d’exemple, à la fonction linear-gradient(). Pour appliquer un dégradé linéaire à l’arrière-plan d’un élément, on utilise la fonction linear-gradient() comme valeur de la propriété background. Celle-ci attend au moins deux couleurs en arguments. Le format utilisé pour définir les couleurs n’a pas d’im­por­tance.

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

Bordures

CSS vous permet également d’ajouter une bordure aux éléments HTML. Cela est par­ti­cu­liè­re­ment re­com­mandé pour les éléments de niveau bloc (block-level) comme les titres, les pa­ra­graphes, les éléments div ou les tableaux HTML, qui ap­pa­rais­sent dans l’élément body. Sans mise en forme sup­plé­men­taire, ces blocs de contenu s’étendent sur toute la largeur dis­po­nible et se placent les uns sous les autres.

Il convient de dis­tin­guer les éléments de niveau bloc des éléments inline tels que <b>, <i>, <a> ou <span>. Les éléments inline ap­pa­rais­sent ex­clu­si­ve­ment à l’intérieur des éléments de niveau bloc. La largeur d’un élément inline est dé­ter­mi­née uni­que­ment par son propre contenu.

Pour qu’une bordure encadre en­tiè­re­ment un élément de niveau bloc ou un élément inline, on utilise la propriété border. Vous pouvez aussi définir sé­pa­ré­ment le style de bordure pour chaque côté d’un élément.

La propriété border ainsi que les pro­prié­tés pour chaque côté de bordure peuvent être précisées davantage. Les valeurs cor­res­pon­dantes s’écrivent après la propriété, séparées par des espaces, selon le schéma suivant :

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

De plus, la propriété border-radius permet d’arrondir les bords de la bordure.

Type de bordure

En choi­sis­sant un type de bordure, vous dé­fi­nis­sez une bordure dé­co­ra­tive pour l’élément concerné, de type block-level ou inline. Certains types de bordure ne prennent effet que si une largeur de bordure ap­pro­priée a été définie.

Le graphique suivant compare les types de bordures CSS :

Close

L’in­di­ca­tion du type de bordure est obli­ga­toire. Si aucun type de bordure n’est spécifié, le na­vi­ga­teur Web n’affichera pas la bordure, même si des valeurs de largeur ou de couleur de bordure sont définies.

Largeur de bordure

La largeur de bordure définit l’épaisseur de la ligne de la bordure.

Couleur de bordure

Les pa­ra­mètres de couleur de la propriété border-color cor­res­pon­dent à ceux des pro­prié­tés color et background-color.

L’exemple de code suivant combine la propriété border avec des réglages de police et de couleur d’arrière-plan. L’ensemble des règles est défini dans la feuille de style CSS pour la classe rahmen :

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

border-radius

La propriété border-radius permet d’arrondir, de manière cir­cu­laire ou el­lip­tique, les coins d’une bordure. L’arrière-plan éventuel est alors découpé selon la courbe définie, y compris lorsque l’élément ne possède pas de bordure. Utilisée cor­rec­te­ment, border-radius permet aussi de créer des formes géo­mé­triques simples.

Les valeurs possibles pour la propriété border-radius cor­res­pon­dent à une à quatre valeurs de longueur, chacune étant associée à un coin de la bordure. Selon les besoins, l’af­fec­ta­tion peut se faire avec une, deux, trois ou quatre valeurs.

Les dif­fé­rentes valeurs du rayon de bordure sont indiquées après la propriété border-radius, séparées par des espaces. On obtient ainsi, pour la dé­cla­ra­tion, le schéma suivant (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 bloc de règles que la propriété border ou dans des classes séparées.

Le bloc de règles suivant définit une bordure avec un border-radius de 2 em :

.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
}

Close

.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em 1em 3em 4em;
}

Close

Dans les deux cas, les angles de la bordure sont arrondis de manière cir­cu­laire. Si l’arrondi doit être el­lip­tique, deux valeurs sont né­ces­saires pour chaque angle. La dé­cla­ra­tion d’une bordure aux angles arrondis de façon el­lip­tique peut donc comporter jusqu’à huit valeurs :

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

Les valeurs avant le slash (/) dé­fi­nis­sent le rayon sur le demi-axe ho­ri­zon­tal de l’ellipse, celles après le slash dé­fi­nis­sent le rayon sur le demi-axe vertical.

.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 1em 4em / 4em 1em;
}

Close

Tout arrière-plan éventuel est au­to­ma­ti­que­ment découpé selon la courbe.

.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
background-color: #24d8ab;
}

Close

Cela s’applique aussi bien aux couleurs d’arrière-plan qu’aux images d’arrière-plan, mais pas aux éléments de texte.

Close

Po­si­tion­ne­ment

La propriété CSS position permet de retirer une boîte du flux normal des éléments et de la placer librement à un endroit précis du site Web. Les autres boîtes, qu’elles fassent partie du flux ou qu’elles soient elles aussi po­si­tion­nées, n’in­fluen­cent pas la position d’un élément ainsi défini.

La propriété position accepte dif­fé­rentes valeurs, qui sont précisées à l’aide des pro­prié­tés left, right, top et bottom, ainsi que de valeurs exprimées dans des unités de mesure :

Po­si­tion­ne­ment absolu

Avec position: absolute, l’élément est retiré du flux normal du document et po­si­tionné par rapport à son ancêtre po­si­tionné le plus proche, c’est-à-dire le premier élément parent dont la propriété position n’est pas définie sur static. Si aucun ancêtre po­si­tionné n’existe, le po­si­tion­ne­ment se fait par rapport au bloc de référence (con­tai­ning block), qui cor­res­pond gé­né­ra­le­ment à l’élément racine du document (<html> ou le viewport).

Les pro­prié­tés top, right, bottom et left per­met­tent alors de définir pré­ci­sé­ment la position de l’élément à l’intérieur de ce bloc de référence.

Les règles suivantes dé­fi­nis­sent un po­si­tion­ne­ment absolu pour les boîtes CSS .rouge, .bleu et .vert à l’intérieur de l’élément parent .background.

.background {
    position: relative;
    height: 500px;
    width: 500px;
    border: 1px 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 .rouge, .bleu et .vert sont mises en forme comme des surfaces semi-trans­pa­rentes de 150 px × 150 px. La boîte de contenu .background, d’une taille de 500 px × 500 px, est entourée d’une bordure grise.

Les ins­truc­tions de mise en forme sont intégrées dans le code HTML via des classes.

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

L’affichage dans le na­vi­ga­teur montre le po­si­tion­ne­ment différent des boîtes à l’intérieur de l’élément <div>. Les éléments sont chacun décalés de 50 px vers la droite et vers le bas. La co­lo­ra­tion trans­pa­rente met en évidence la pos­si­bi­lité de che­vau­che­ment avec le po­si­tion­ne­ment absolu.

Close

Po­si­tion­ne­ment relatif

Avec le po­si­tion­ne­ment relatif, la boîte reste intégrée dans le flux naturel des éléments, mais peut être déplacée par des in­di­ca­tions de po­si­tion­ne­ment relatives à ce flux. La boîte s’aligne donc sur elle-même. Les éléments pré­cé­dents et suivants dans le flux se com­por­tent comme si la boîte n’avait pas été déplacée.

Pour aligner une boîte à partir de sa position dans le flux des éléments, on complète la règle cor­res­pon­dante avec la dé­cla­ra­tion position: relative ainsi qu’avec les valeurs de position sou­hai­tées.

Le bloc de code suivant illustre cela à l’exemple de la boîte bleue :

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

L’ins­truc­tion de mise en forme position: relative, associée à l’in­di­ca­tion de position left: 50px, provoque dans l’affichage du na­vi­ga­teur un décalage de la boîte bleue de 50 px vers la droite.

Close

Le po­si­tion­ne­ment relatif peut également s’appliquer aux éléments flottants.

Boîtes CSS fixes

L’alig­ne­ment des boîtes fixes s’effectue, comme pour le po­si­tion­ne­ment absolu, in­dé­pen­dam­ment du flux des éléments. Toutes les in­di­ca­tions de po­si­tion­ne­ment sont définies par rapport au viewport. Une boîte ainsi fixée apparaît toujours au même endroit à l’écran, même lorsqu’un uti­li­sa­teur fait défiler la page. Vous pouvez ainsi épingler des éléments de na­vi­ga­tion, comme des menus ou des boutons d’ancrage (p. ex. « Retour en haut de page »), dans la zone visible.

Apprendre à utiliser le modèle de boîte CSS

Le modèle de boîte CSS décrit la manière dont les na­vi­ga­teurs affichent et po­si­tion­nent les éléments HTML sous forme de surfaces rec­tan­gu­laires (« boîtes »). Au cœur de tout site Web se trouve l’in­te­rac­tion de ces boîtes, dont la dis­po­si­tion est dé­ter­mi­née par ce que l’on appelle le flux des éléments : par défaut, les éléments sont placés de gauche à droite et de haut en bas.

CSS distingue deux types de boîtes :

• Les boîtes de type bloc (div, p) occupent par défaut toute la largeur de leur élément parent et com­men­cent toujours sur une nouvelle ligne.
• Les boîtes en ligne (span, b, i) sont affichées dans le flux du texte et s’adaptent au contenu.

Les gra­phiques suivants per­met­tent d’illustrer le flux des éléments des boîtes de type bloc et des boîtes en ligne :

Close

Les boîtes de type bloc struc­tu­rent la mise en page, tandis que les boîtes en ligne gèrent le texte et les éléments inline. Les con­te­neurs vides comme <div> servent souvent uni­que­ment au re­grou­pe­ment et à la mise en forme via CSS.

Si vous souhaitez mettre en forme si­mul­ta­né­ment les quatre côtés d’une boîte, utilisez les pro­prié­tés padding, border et margin :

Les valeurs possibles pour les pro­prié­tés listées sont des valeurs de taille ainsi que inherit (selon l’élément parent). Les marges ex­té­rieures peuvent également être définies avec la valeur auto.

Le graphique suivant illustre la structure sché­ma­tique d’une boîte CSS :

Close

Modèle de boîte CSS en pratique

On peut illustrer le modèle de boîte CSS en ajoutant, étape par étape, les dif­fé­rentes couches à une boîte de contenu. Le point de départ est un court extrait de texte qui, dans cet exemple, doit être mis en forme au moyen 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>

L’ensemble de règles suivant définit, pour la boîte de contenu, des di­men­sions de 150 px × 150 px. D’autres mises en forme dé­fi­nis­sent une police noire sur fond gris. De plus, le texte doit être justifié :

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

Ap­pli­quées à l’extrait de texte, ces ins­truc­tions de mise en forme donnent l’affichage suivant dans le na­vi­ga­teur Web :

Close

L’extrait de texte apparaît, con­for­mé­ment au flux des éléments, dans l’angle supérieur gauche de son élément parent. Le texte et la couleur d’arrière-plan com­men­cent sans marge sur le côté gauche de la fenêtre du na­vi­ga­teur et occupent toute la surface dis­po­nible. L’arrière-plan s’arrête exac­te­ment au bord du texte.

Un tel design est peu es­thé­tique et rend la lecture plus difficile. La propriété padding permet donc aux Web­de­sig­ners de définir une marge in­té­rieure afin de séparer les éléments de texte des éléments de mise en forme qui les entourent.

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

Ajoutée au jeu de règles, la dé­cla­ra­tion padding: 10px; entraîne la mo­di­fi­ca­tion suivante dans l’affichage côté frontend :

Close

Le na­vi­ga­teur Web applique une marge in­té­rieure de 10 px sur les quatre côtés de la content box. En com­plé­ment, il est possible d’ajouter une bordure comme élément de mise en forme.

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

Dans l’exemple de code, la propriété border est utilisée pour ajouter à l’élément un cadre bordeaux, continu.

Close

Ainsi, un cadre est séparé du contenu par la valeur de padding.

Con­for­mé­ment au flux naturel des éléments, la boîte ainsi mise en forme se place sans espace dans l’angle supérieur gauche de l’élément parent. La propriété margin permet d’aérer le design d’un site Web grâce à une marge ex­té­rieure. Pour cela, il suffit d’ajouter la dé­cla­ra­tion cor­res­pon­dante au jeu de règles existant :

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

Dans le na­vi­ga­teur Web, une marge ex­té­rieure de 40 px est appliquée comme suit :

Close

Comme al­ter­na­tive à l’in­di­ca­tion d’une valeur, la propriété margin peut être définie avec la valeur auto. Dans ce cas, la boîte s’aligne au­to­ma­ti­que­ment au centre, ho­ri­zon­ta­le­ment, à l’intérieur de l’élément parent. Ver­ti­ca­le­ment, auto n’a aucun effet.

Mise en forme de la boîte avec float

Si la boîte à mettre en forme est une boîte de type bloc, les boîtes suivantes passent au­to­ma­ti­que­ment à la ligne suivante, con­for­mé­ment au flux des éléments.

Le retour à la ligne au­to­ma­tique après une boîte de type bloc n’est pas toujours souhaité en pratique et peut être empêché à l’aide de la propriété float. Celle-ci retire les boîtes de type bloc du flux normal des éléments et les place à l’endroit souhaité.

Une boîte avec une mise en forme float est appelée float.

Lorsque plusieurs éléments flottants se ren­contrent, ils sont disposés dans l’ordre où ils ap­pa­rais­sent dans le code source HTML, de gauche à droite (float: left) ou de droite à gauche (float: right).

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

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

Lorsqu’elle est appliquée à deux éléments HTML, ceux-ci sont retirés du flux du document et alignés à gauche l’un à côté de l’autre :

<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>

Close

Le grand espace s’explique par le fait que les marges externes des deux boîtes s’ad­di­tion­nent. Sans float, les marges des éléments adjacents se fu­sion­ne­raient.

Créer un Webdesign res­pon­sive avec CSS

Pour concevoir un Webdesign res­pon­sive, le langage de feuilles de style propose deux tech­niques de mise en page modernes : Flexbox et Grid. Ces deux systèmes adaptent les contenus de manière dynamique aux dif­fé­rentes tailles d’écran. En com­bi­nai­son avec les Media Queries CSS, il est également possible d’ajuster les mises en page de façon ciblée à dif­fé­rents appareils et largeurs d’écran.

Flexbox

Avec CSS Flexbox (Flexible Box Layout), il est par­ti­cu­liè­re­ment simple de concevoir des mises en page uni­di­men­sion­nelles. Flexbox aligne les contenus ho­ri­zon­ta­le­ment ou ver­ti­ca­le­ment, ce qui en fait une solution idéale pour les na­vi­ga­tions, les galeries ou des zones de contenu mo­du­laires.

Un conteneur flex est défini via la propriété display: flex;. Tous les éléments enfants directs de­vien­nent au­to­ma­ti­que­ment des « flex items », dont il est possible de contrôler de manière flexible le po­si­tion­ne­ment, l’ordre et la taille.

Un exemple simple montre l’agen­ce­ment ho­ri­zon­tal des éléments avec un es­pa­ce­ment uniforme :

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

Les règles s’ap­pli­quent au code HTML suivant :

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

De plus, il est également possible de contrôler in­di­vi­duel­le­ment le com­por­te­ment de certains flex items. Avec la propriété flex, vous pouvez par exemple définir dans quelle mesure un élément peut s’agrandir ou se réduire par rapport aux autres. Ici, la valeur 2 cor­res­pond à un dou­ble­ment :

.item1 {flex: 2; }

Mise en page en grille (Grid)

Avec un CSS Grid, les contenus d’un site Web peuvent être disposés dans une grille bi­di­men­sion­nelle. Le système de grille permet un contrôle précis des lignes et des colonnes, ce qui facilite la mise en place de mises en page complexes de manière simple et flexible. Pour créer une grille, on attribue à un élément parent la propriété display: grid;. Tous les éléments enfants directs de ce conteneur de­vien­nent au­to­ma­ti­que­ment des grid items. Ensuite, la grille peut être ajustée à l’aide d’un grand nombre de pro­prié­tés.

Un exemple montre la structure d’une grille avec trois colonnes de même largeur et deux lignes, à l’aide de valeurs fr uniformes :

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}

Chaque grid item peut également être po­si­tionné de manière ciblée, par exemple pour s’étendre sur plusieurs colonnes ou lignes. Pour cela, les pro­prié­tés grid-column et grid-row sont dis­po­nibles. On indique la ligne de début (inclusive) et la ligne de fin (exclusive), séparées par un slash (/). Dans l’exemple suivant, l’élément s’étend sur deux colonnes et une ligne.

.item1 {
grid-column: 1 / 3; 
grid-row: 1; 
}

Media queries

Les media queries per­met­tent d’appliquer des règles CSS en fonction des ca­rac­té­ris­tiques de l’appareil. Ainsi, la mise en page peut différer sur smart­phone, tablette et écran d’or­di­na­teur, sans né­ces­si­ter plusieurs fichiers HTML. Une media query permet d’activer ou d’écraser des styles de manière ciblée dès que certaines con­di­tions sont remplies. L’usage le plus courant est l’adap­ta­tion à dif­fé­rentes largeurs de viewport, pour laquelle les valeurs suivantes sont né­ces­saires :

Un exemple montre comment une media query peut être utilisée pour modifier la mise en page en dessous d’une certaine largeur :

/ *Mise en page standard pour les écrans plus grands* /
.container {display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/ *Adaptation pour les écrans plus petits* /
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}

Plusieurs con­di­tions peuvent aussi être combinées, par exemple pour modifier les mises en page uni­que­ment sur les tablettes en mode portrait :

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
body {
font-size: 1.1em;
}
}

Exploiter les variables CSS

Les variables CSS (aussi appelées custom pro­per­ties) per­met­tent de stocker des valeurs de manière cen­tra­li­sée et de les réu­ti­li­ser plusieurs fois dans la feuille de style. Vous pouvez ainsi modifier des couleurs, des es­pa­ce­ments ou des tailles de police à un seul endroit, sans devoir adapter tout le CSS. Le code est alors plus lisible, plus facile à maintenir et plus cohérent.

Les variables CSS sont définies avec un double tiret (--) et s’utilisent via la fonction var().

Un exemple montre comment définir et utiliser des variables :

:root {
    --main-color: #ff4081;
    --text-color: #333;
    --padding: 10px;
}
button {
    background-color: var(--main-color);
    color: var(--text-color);
    padding: var(--padding);
}

Ici, les variables --main-color, --text-color et --padding sont définies dans :root, donc glo­ba­le­ment pour toute la page. Le bouton utilise ces variables avec var(), de sorte que la couleur d’arrière-plan, la couleur du texte et l’es­pa­ce­ment sont au­to­ma­ti­que­ment repris à partir des valeurs des variables.