Comprendre les feuilles de style en cascade (CSS) et la propriété d’affichage
Les feuilles de style en cascade, ou CSS, constituent un langage essentiel pour façonner la présentation visuelle des documents HTML et XML. Grâce à CSS, les créateurs de sites web ont la possibilité de contrôler l’aspect et l’organisation des éléments sur une page web.
Par exemple, il est possible de modifier les polices, les couleurs, les fonds, les effets de survol et même d’adapter les pages web à différentes tailles d’écran et appareils. De plus, CSS offre aux marques et aux développeurs une solution pour garantir une cohérence stylistique et chromatique sur l’ensemble de leurs pages web.
Lorsque l’on construit un document HTML standard, les éléments apparaissent dans l’ordre précis où ils sont écrits dans le code source. C’est ce qu’on appelle le flux normal.
Dans ce flux normal, si la disposition des éléments HTML n’a pas été modifiée, on peut regrouper les éléments en deux catégories distinctes, basées sur leur mode d’affichage :
Ces deux catégories sont les éléments « en ligne » et les éléments « de bloc ». Examinons ces catégories pour comprendre comment les éléments HTML sont rendus.
Pour commencer, créez un nouveau dossier, puis à l’intérieur, deux fichiers : `index.html` et `app.css`. Vous pouvez leur donner les noms que vous souhaitez, mais assurez-vous de conserver les extensions `.html` et `.css`.
Ouvrez le fichier HTML dans votre éditeur de code et copiez-y le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Propriété d'affichage CSS</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
</body>
</html>
Ce code établit une base HTML, une structure de départ pour la création de pages web. Il établit également une connexion entre `index.html` et `app.css`, ce qui permet d’ajuster et de contrôler l’affichage des éléments HTML grâce à CSS.
Tout le code HTML utilisé dans cet article sera inséré à l’intérieur des balises `<body></body>`. Notre fichier CSS sera initialement vide.
Les éléments de bloc
Les éléments de bloc s’étendent sur toute la largeur disponible de leur conteneur, ce qui génère un saut de ligne avant et après l’élément. Ils ont également une hauteur correspondant à celle de leur contenu, formant ainsi des blocs.
Les éléments de bloc courants incluent les `<div>`, `<p>`, `<ul>`, `<ol>`, `<li>`, et les titres comme `<h1>`, `<h2>`, `<h3>`, etc.
Voici un exemple :
<body>
<h1>VotreSiteWeb.fr</h1>
<p>VotreSiteWeb.fr est une publication en ligne qui produit des articles de grande qualité sur la technologie, le business et la finance, dans le but d'aider les entreprises et les particuliers à se développer. Parmi les sujets abordés, on retrouve :</p>
<p>Voici quelques-uns des sujets traités sur VotreSiteWeb.fr :</p>
<ul>
<li>Programmation</li>
<li>Cybersécurité</li>
<li>Informatique légale</li>
<li>Productivité</li>
<li>Jeux vidéo</li>
</ul>
</body>
Si vous ouvrez ce code HTML dans un navigateur et que vous inspectez la page, le résultat affiché sera le suivant :
Remarquez que le `<h1>`, contenant le titre VotreSiteWeb.fr, occupe toute la largeur disponible et que le paragraphe qui suit est rejeté sur une nouvelle ligne. C’est le comportement typique d’un élément de bloc.
Les éléments en ligne
Les éléments en ligne s’intègrent au flux du texte, en occupant seulement l’espace nécessaire à leur contenu. Ils ne commencent pas sur une nouvelle ligne et ne forcent pas les autres éléments à passer à la ligne suivante.
Les éléments en ligne ne brisent pas le flux de texte. Ils s’y insèrent sans créer de blocs distincts. Les éléments en ligne les plus courants sont les `<span>`, `<a>`, `<input>` et `<time>`, parmi d’autres.
Voyez le code ci-dessous, qui utilise des éléments en ligne :
<body>
<h1>VotreSiteWeb.fr</h1>
<p>VotreSiteWeb.fr <span>JE SUIS UN SPAN</span> est une publication en ligne qui produit des articles de qualité sur la technologie, le business et la finance, dans le but d'aider les entreprises et les particuliers à se développer. Parmi les <a href="https://wilku.top/which-css-display-style-is-best-for-you/toptips.fr.com">sujets</a> abordés, on retrouve :</p>
<p>Voici quelques-uns des sujets traités sur VotreSiteWeb.fr :</p>
<ul>
<li>Programmation</li>
<li>Cybersécurité</li>
<li>Informatique légale</li>
<li>Productivité</li>
<li>Jeux vidéo</li>
</ul>
</body>
Le résultat de l’inspection de cette page HTML est le suivant :
Notez comment l’élément `<span>` s’insère dans la ligne du texte sans en perturber le flux. C’est le comportement typique d’un élément en ligne.
La propriété d’affichage
Comme on vient de le voir, les éléments HTML sont soit des éléments de bloc, soit des éléments en ligne, par défaut. Cela détermine leur comportement et leur impact sur le flux du contenu d’une page HTML.
Il est possible de modifier ce comportement par défaut. Autrement dit, on peut forcer un élément de bloc à se comporter comme un élément en ligne, ou inversement. Par exemple, on peut souhaiter qu’un titre `<h1>` se comporte comme un élément en ligne, ou qu’un `<span>` se comporte comme un élément de bloc.
Pour ce faire, on utilise la propriété CSS `display`. Cette propriété permet de définir comment un élément doit être traité, soit comme un élément en ligne, soit comme un élément de bloc.
Il est ainsi possible de transformer le comportement d’un élément de bloc en élément en ligne, et inversement.
Pour voir comment cela fonctionne, ajoutez le code suivant à votre fichier CSS, puis actualisez la page HTML dans votre navigateur :
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
Ce code utilise la propriété `display` pour forcer les éléments `<h1>` et `<p>`, des éléments de bloc par défaut, à se comporter comme des éléments en ligne. Il modifie également le comportement du `<span>`, en le transformant en élément de bloc. Enfin, il ajoute des couleurs de fond afin de les distinguer plus facilement. Le résultat final après ces modifications :
Notez que l’élément `<h1>`, qui occupait auparavant un bloc entier, partage désormais la même ligne que l’élément `<p>`, qui occupait lui aussi un bloc entier. L’élément `<span>` avec son fond vert olive, occupe désormais un bloc entier, alors qu’il se comportait auparavant comme un élément en ligne.
Distinction importante entre les éléments en ligne et de bloc
Outre leur impact sur le flux du contenu, il existe une autre différence fondamentale entre les éléments en ligne et les éléments de bloc.
Pour les éléments en ligne, les propriétés `width` et/ou `height` sont ignorées. Il est impossible de modifier la largeur ou la hauteur d’un élément en ligne.
De plus, si vous ajoutez une marge à un élément en ligne, cette marge sera prise en compte seulement horizontalement. La marge verticale est ignorée.
De même, un remplissage ajouté à un élément en ligne ne sera pris en compte que horizontalement. Le remplissage apparaîtra aussi verticalement, mais il ne sera pas pris en compte par les éléments adjacents. Le remplissage n’affectera pas le positionnement des éléments situés au-dessus et au-dessous de l’élément en ligne.
Pour mieux comprendre, supprimez ou commentez tout le code de votre fichier CSS et ajoutez le code suivant :
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
Voici le résultat dans le navigateur :
Remarquez que malgré les propriétés `height` et `width` définies pour l’élément `<span>`, sa hauteur et sa largeur n’ont pas changé. De plus, la marge ajoutée est uniquement appliquée horizontalement.
Pour l’élément `<a>`, même avec un remplissage appliqué, cela n’affecte que le contenu sur la même ligne. Les éléments situés au-dessus n’ont pas été affectés.
En ce qui concerne les éléments de bloc, les propriétés `width` et `height` sont respectées. Les marges et les remplissages appliqués aux éléments de bloc sont également pris en compte dans toutes les directions.
Pour le constater, ajoutez le code suivant à votre fichier CSS :
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
Voici le résultat dans le navigateur :
Notez que la largeur, la hauteur, la marge et le remplissage appliqués à `<h1>`, un élément de bloc, ont tous été respectés dans toutes les directions.
En se basant sur les différences d’application de la largeur, hauteur, marges et remplissages entre les éléments en ligne et de bloc, il existe une troisième valeur de `display` : `inline-block`.
Les éléments de bloc en ligne
Un élément `inline-block` se comporte comme un élément en ligne : il s’intègre au flux du contenu et ne force pas de saut de ligne. Cependant, contrairement aux éléments en ligne, la largeur, la hauteur, les marges et les remplissages sont respectés.
Utilisez `inline-block` lorsque vous voulez qu’un élément se comporte comme un élément en ligne, mais tout en ayant le contrôle sur sa largeur, sa hauteur, ses marges et ses remplissages, comme pour un élément de bloc.
Pour voir comment ça marche, supprimez ou commentez tout le code de votre fichier CSS et ajoutez ce qui suit :
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
Ce code CSS définit la propriété `display` de l’élément `<span>` comme `inline-block`. Le code ajoute ensuite la largeur, la hauteur, la marge et le remplissage à l’élément `<span>`. Voici le résultat dans le navigateur :
Notez que la largeur, la hauteur, la marge et le remplissage ajoutés à l’élément `<span>` sont tous respectés, et que l’élément `<span>` est toujours affiché comme un élément en ligne.
C’est le comportement typique d’un élément `inline-block`. Auparavant, nous avions essayé d’ajouter les mêmes propriétés à l’élément `<span>`, mais elles n’étaient pas respectées car `<span>` était alors un élément en ligne.
Inline vs Inline-Block
Les différences entre `inline` et `inline-block` sont résumées dans le tableau ci-dessous :
| Caractéristiques | Inline | Inline-Block |
| Comportement de l’affichage | Affecté par la propriété line-height. Respecte les marges horizontales et les remplissages. | Respecte les marges horizontales et les remplissages. |
| Largeur et hauteur | Ignore les propriétés de largeur et de hauteur. | Respecte les propriétés de largeur et de hauteur. |
| Marges et remplissage | Ignore les marges verticales et le remplissage vertical. | Respecte les marges et remplissages. |
| Flux dans le contenu | Ne démarre pas sur une nouvelle ligne. | Ne démarre pas sur une nouvelle ligne. |
| Hauteur de ligne | Est affecté par la propriété line-height. | Est affecté par la propriété line-height. |
| Disposition horizontale | Ignore les propriétés text-align et text-justify. | Répond aux propriétés text-align et text-justify. |
Comme vous le voyez, les éléments en ligne et en bloc en ligne diffèrent dans la façon dont certaines propriétés CSS sont appliquées.
Quand utiliser Inline et Inline-Block
En tant que développeur, utilisez `inline` lorsque vous voulez que votre contenu HTML se déroule sur la même ligne sans provoquer de saut de ligne. Par exemple, lorsque vous travaillez avec des éléments textuels comme `<a>`, `<strong>` et `<span>`, il est logique d’utiliser `inline`, qui est leur comportement par défaut.
À l’inverse, utilisez `inline-block` lorsque vous voulez qu’un élément se comporte comme un élément de bloc, tout en continuant à s’intégrer au flux de texte sans provoquer de saut de ligne et sans repousser les autres éléments à la ligne suivante. Utilisez `inline-block` si vous voulez contrôler la largeur, la hauteur, les marges et les remplissages d’un élément, tout en faisant en sorte qu’il fasse partie du flux de contenu.
Conclusion
CSS propose trois options d’affichage : `inline`, `block` et `inline-block`, permettant de modifier et contrôler la façon dont les éléments sont affichés sur une page web. Nous utilisons la propriété `display` pour définir un élément comme étant `inline`, `block` ou `inline-block`.
En tant que développeur web, il est essentiel de comprendre la différence entre les éléments `inline`, `block` et `inline-block`. Utilisez cet article pour vous familiariser avec eux, et commencez à utiliser la propriété `display` dans vos projets pour vous entraîner.
Vous pouvez également explorer des générateurs de grilles CSS pour créer des mises en page plus complexes visuellement.