Principes HTML : les éléments de type “block” et “inline”
Avant de comprendre le fonctionnement de la mise en forme grâce à CSS, il faut revenir sur quelques notions de base en html.
Comme vous l’aurez remarqué, lorsqu’on écrit du html, on utilise 2 types d’éléments (ou 2 “familles” de balises) :
- Des balises qui crééent des “blocs” générant automatiquement un retour à la ligne après leur fermeture :
- Cette famille de balises porte un nom bien particulier : ce sont des balises de type block
- Exemples : les balises <p></p>, <h1></h1>, <li></li>, etc.
- La balise “générique” qui permet de créer des blocs avec un retour à la ligne est la balise <div></div>
- Il y a également un autre type de balise que vous pouvez utiliser à l’intérieur de ces blocs pour mettre en exergue du contenu, et qui ne génèrent donc pas de retour à la ligne :
- On les appelle les balises de type inline
- Exemples : les balises <a></a>, <img />, <strong></strong>, etc.
- La balise “générique” de type inline est la balise <span></span>
Cette nuance est importante pour la suite, car vous allez comprendre que, pour créer des structures de pages html bien particulières, il va falloir jouer sur le positionnement de ces éléments les uns par rapport aux autres.
On appelle également ces éléments “block” et “inline” des modèles de boîte.
Modèle de boîte CSS
Tous les modèles de boîte – qu’ils soient de type “block” ou “inline”, sont constitués de 4 parties :
- Une bordure (”border”),
- Une marge extérieure ( “margin”),
- Une marge intérieure (”padding”),
- Et son contenu (”content”).
Par défaut, seul le contenu est visible ; les autres parties, même si elles existent, ne se voient pas.
Pour schématiser, voici à quoi ressemble cette boîte :
- Le contenu peut être du texte, une image, etc.
- Le contenu est entouré par la bordure.
- La zone située entre le contenu et la bordure est le padding.
- La zone située à l’extérieur de la bordure est la marge.
- La bordure peut être visible, cela dépend de la CSS. Mais la marge et le padding sont invisibles.
Voyons maintenant un peu plus en détail comment régler ces propriétés avant d’aller plus loin dans l’organisation générale de la page web.
La Bordure
Comme vous l’avez vu, la bordure de chaque élément est invisible par défaut.
La propriété « border-width » permet de définir la largeur de la bordure.
Sa valeur peut être en px, cm, pt, em, ou prendre l’une des trois valeurs prédéfinies : thin, thick, ou medium.
Outre la largeur de la bordure, nous devons également définir le style de la bordure à l’aide de la propriété « border-style« . La propriété « border-style » peut avoir des valeurs telles que solid, dotted et dashed.
Vous pouvez tester plusieurs variantes sur les différents paragraphes du document html utilisé pour le précédent cours (le voici au cas où vous l’auriez perdu 🙂
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<title>Test css</title>
</head>
<body>
<p id="firstp">Voici un paragraphe à gauche: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nibh ante. Donec quis efficitur eros, et cursus nibh. Praesent ac erat lobortis, pharetra nunc ac, consequat ex. Integer vel maximus quam. Cras quis ex vitae orci luctus cursus. Sed venenatis tincidunt ante ut tempus. Donec et felis tellus. Nam elementum, ante sit amet mollis ultricies, quam ligula placerat lacus, non tincidunt lorem massa eu nisl. Nam tellus tellus, mollis in volutpat eget, dignissim ut erat. Integer sed massa sapien. Praesent sem diam, lobortis quis purus eget, elementum interdum erat. Nunc neque ligula, dapibus id dignissim eu, tempor nec lorem. Fusce congue, eros sit amet consequat luctus, nunc elit congue lacus, in malesuada purus justo quis diam. Aliquam laoreet rutrum dolor, nec sagittis risus varius vel.</p>
<p id="secondp">Voici un paragraphe à droite : Curabitur rutrum consequat justo, ultricies dictum tellus faucibus vitae. Maecenas facilisis molestie lacinia. Vestibulum iaculis sed magna ut iaculis. Vestibulum rutrum augue ut metus auctor, vel ultricies sem tincidunt. Suspendisse erat justo, rutrum at egestas nec, feugiat nec libero. Vivamus ut libero blandit risus luctus malesuada sit amet id lorem. Proin quam eros, blandit at pulvinar nec, placerat ut justo. Quisque arcu enim, pharetra vitae efficitur quis, efficitur et enim. Phasellus consequat lobortis tristique.</p>
<p id="thirdp">Voici un paragraphe centré : Proin vehicula nunc vestibulum orci tempus condimentum. Fusce ornare urna ac nisi placerat, id porttitor dui vehicula. Phasellus iaculis, libero ut ullamcorper posuere, massa sapien tempus arcu, sed imperdiet sem orci ut risus. Suspendisse porta sit amet dui eget dapibus. Aenean vestibulum purus sed vestibulum consequat. Sed varius justo sit amet est porta, eget maximus dolor ultrices. Nulla pulvinar libero at massa egestas lobortis. Ut ut fermentum diam. Etiam eget viverra nulla, sed vestibulum felis.</p>
<p id="fourthp">Voici un paragraphe justifié : Sed elementum ut dolor sit amet pulvinar. Sed semper orci sed purus congue, vel ullamcorper sapien interdum. Aenean turpis mauris, faucibus in blandit vel, commodo et metus. Duis euismod, lacus at ornare tincidunt, est purus fermentum metus, quis sodales mi mi eu ipsum. Fusce bibendum dolor et quam ultrices condimentum. Ut viverra odio ut nunc varius pretium. Nam sollicitudin id nibh at condimentum. Aliquam a varius purus. Cras a feugiat est. Donec pulvinar condimentum luctus. Vivamus id risus vitae ante dictum vehicula et ut lectus. Ut ut justo vitae erat dictum fringilla a ut lorem.</p>
</body>
</html>Et le contenu de sa feuille de styles :
#firstp {
border-width:1px;
border-style:dotted;
}
#secondp {
border-width:3px;
border-style:solid;
text-align: right;
}
#thirdp {
border-width:thin;
border-style:dashed;
text-align: center;
}
#fourthp {
text-align: justify;
}Ça devrait vous donner quelque chose comme ça :
Aparté : raccourcir sa feuille de styles
Certaines propriétés CSS peuvent être raccourcies ; la bordure en fait partie.
Ainsi, plutôt que d’écrire 1 ligne pour chaque règle, on pourrait écrire les règles les unes à la suite des autres comme ceci :
#firstp {
border:1px dotted black;
}Ce genre d’astuce fonctionne aussi par exemple avec la propriété “font” pour définir la typo :
#secondp {
font: bold 12px Impact;
}Cette “astuce” permet de réduire considérablement la taille du fichier CSS ; libre à vous d’essayer, mais en général il vaut mieux déjà être un peu à l’aise avec le CSS avant d’écrire vos propriétés de cette façon !
Les marges extérieures
Pour comprendre l’utilisation des marges, nous allons utiliser la balise <div> qui est une balise générique pour créer un bloc de contenu neutre (en gros, on peut y inclure un peu ce qu’on veut, pas forcément que du texte comme devrait le contenir une balise <p>).
C’est une balise de division qui n’a aucun effet particulier tant qu’on ne lui attribue pas des règles de mise en forme via CSS.
Repartons sur une structure plus simple pour votre fichier index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<title> Test du CSS </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>
<p>Contenu du paragraphe</p>
</div>
</body>
</html>et votre fichier style.css :
div {
border:2px solid black;
}
p {
border:2px solid red;
}En ouvrant la page html dans votre navigateur vous devriez voir ceci :
Le contenu du paragraphe <p> est entouré d’une bordure rouge, et le conteneur <div> est entouré d’une bordure noire.
La zone située entre la ligne rouge et la ligne noire constitue la marge de la balise <p>. Pour définir la marge dans toutes les directions, nous pouvons utiliser la propriété » margin « .
Supprimons maintenant la marge par défaut en définissant sa valeur à 0px :
p {
border: 2px solid red;
margin: 0px;
}Regardez votre page html dans votre navigateur :
Il n’y a plus d’espace entre la ligne rouge et la ligne noire. On dit qu’il n’y a plus de marge extérieure (définie avec le mot “margin”)
Sachez que vous pouvez avoir le contrôle sur les 4 directions de la marge extérieure, à savoir la marge haute, la marge droite, la marge basse et la marge gauche.
Essayez d’appliquer ces propriétés CSS à votre paragraphe :
p {
border: 2px solid red;
margin-top: 0px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 50px;
}Vous aurez comme résultat cet affichage :
NB – on peut également utiliser un raccourci en utilisant la propriété “margin” toute seule de cette manière :
p {
border: 2px solid red;
margin : 0 30px 20px 50px;
}Les 4 valeurs représentent respectivement dans cet ordre : le haut, la droite, le bas, la gauche.
Vous pouvez également appliquer une seule valeur à l’ensemble des marges en utilisant cette façon de faire :
p {
border: 2px solid red;
margin : 10px;
}En attribuant cette valeur à la propriété “margin”, une marge de 10px sera appliquée partout à la fois (haut, droite, bas et gauche)
Les marges intérieures
Les marges intérieures fonctionnent de la même façon que les marges extérieures, à ceci près qu’elles ne concernent que l’espace entre le texte contenu dans la balise <p> et la bordure rouge.
On utilise la propriété “padding” pour définir cette marge intérieure. Essayez !
p {
border: 2px solid red;
padding : 20px;
}Le résultat ressemble à ça :
Comme pour la propriété “margin”, il est possible là aussi de contrôler uniquement le haut, la droite, le bas ou la gauche en utilisant les suffixes –top, –right, –bottom et –left à la propriété “padding”.
Astuce – Comment voir ces “boîtes” dans votre navigateur ?
Pour terminer ce chapitre, je vous propose d’apprendre à manipuler un outil très utile quand on travaille sur un site web : l’inspecteur d’élément.
Recréez une page html avec ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<title>Test css</title>
</head>
<body>
<p id="firstp">Voici un paragraphe à gauche: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nibh ante. Donec quis efficitur eros, et cursus nibh. Praesent ac erat lobortis, pharetra nunc ac, consequat ex. Integer vel maximus quam. Cras quis ex vitae orci luctus cursus. Sed venenatis tincidunt ante ut tempus. Donec et felis tellus. Nam elementum, ante sit amet mollis ultricies, quam ligula placerat lacus, non tincidunt lorem massa eu nisl. Nam tellus tellus, mollis in volutpat eget, dignissim ut erat. Integer sed massa sapien. Praesent sem diam, lobortis quis purus eget, elementum interdum erat. Nunc neque ligula, dapibus id dignissim eu, tempor nec lorem. Fusce congue, eros sit amet consequat luctus, nunc elit congue lacus, in malesuada purus justo quis diam. Aliquam laoreet rutrum dolor, nec sagittis risus varius vel.</p>
<p id="secondp">Voici un paragraphe à droite : Curabitur rutrum consequat justo, ultricies dictum tellus faucibus vitae. Maecenas facilisis molestie lacinia. Vestibulum iaculis sed magna ut iaculis. Vestibulum rutrum augue ut metus auctor, vel ultricies sem tincidunt. Suspendisse erat justo, rutrum at egestas nec, feugiat nec libero. Vivamus ut libero blandit risus luctus malesuada sit amet id lorem. Proin quam eros, blandit at pulvinar nec, placerat ut justo. Quisque arcu enim, pharetra vitae efficitur quis, efficitur et enim. Phasellus consequat lobortis tristique.</p>
<p id="thirdp">Voici un paragraphe centré : Proin vehicula nunc vestibulum orci tempus condimentum. Fusce ornare urna ac nisi placerat, id porttitor dui vehicula. Phasellus iaculis, libero ut ullamcorper posuere, massa sapien tempus arcu, sed imperdiet sem orci ut risus. Suspendisse porta sit amet dui eget dapibus. Aenean vestibulum purus sed vestibulum consequat. Sed varius justo sit amet est porta, eget maximus dolor ultrices. Nulla pulvinar libero at massa egestas lobortis. Ut ut fermentum diam. Etiam eget viverra nulla, sed vestibulum felis.</p>
<p id="fourthp">Voici un paragraphe justifié : Sed elementum ut dolor sit amet pulvinar. Sed semper orci sed purus congue, vel ullamcorper sapien interdum. Aenean turpis mauris, faucibus in blandit vel, commodo et metus. Duis euismod, lacus at ornare tincidunt, est purus fermentum metus, quis sodales mi mi eu ipsum. Fusce bibendum dolor et quam ultrices condimentum. Ut viverra odio ut nunc varius pretium. Nam sollicitudin id nibh at condimentum. Aliquam a varius purus. Cras a feugiat est. Donec pulvinar condimentum luctus. Vivamus id risus vitae ante dictum vehicula et ut lectus. Ut ut justo vitae erat dictum fringilla a ut lorem.</p>
</body>
</html>Puis, dans votre feuille de style, ajoutez quelques propriétés au premier paragraphe :
#firstp {
text-align: left;
margin:10px;
padding:10px;
border:1px solid black;
}Ensuite, rdv dans votre navigateur.
Si vous utilisez Chrome ou Firefox, faites un clic droit sur la page, puis “inspecter” :
Votre fenêtre devrait se scinder en 2, laissant apparaître un volet en bas ou sur le côté.
Nous utiliserons souvent cet outil en cours d’année, gardez-le dans un coin de votre tête 😉 !
Cliquez ensuite sur le bouton qui permet de parcourir le document html :
Puis, une fois l’outil actif, passez la souris sur le 1er paragraphe de votre page – vous devriez voir ceci :
Cet outil vous permet de voir l’invisible : ce que donnent les valeurs attribuées aux propriétés qui permettent de manipuler ces “boîtes” html.
- En orange, vous voyez la marge extérieure (= propriété margin)
- Ensuite, le fin liseret qui entour le paragraphe est sa bordure (= border)
- En vert, vous voyez la marge intérieure (= propriété padding)
- Et en bleu, le contenu, ce que vous avez écrit à l’intérieur de la balise utilisée.
Changez les valeurs dans votre feuille de style, puis repassez sur l’élément avec l’inspecteur pour constater les changements.
Vous verrez que ça sera très utile plus tard de savoir utiliser cet outil, même en travaillant avec des constructeurs de page comme Elementor 😉
En résumé
- Il existe 2 types de modèles de boîte en CSS : les boîtes dites “block” et les boîtes “inline”
- Les blocs prennent toute la largeur de la page et génère donc des retours à la ligne
- Les éléments “inline” peuvent s’insérer dans des boîtes de type “bloc” et ne génèrent pas de retour à la ligne
- Les boîtes de type “block” ou “inline” sont constitués de bordures, de marges intérieures et de marges extérieures
- La bordure peut être définie à l’aide de la propriété abrégée » border » ou de propriétés telles que » border-width « , » border-style « , » border-color « .
- La propriété » margin » est une propriété abrégée utilisée pour définir la marge de différentes manières. Pour définir la marge pour des directions particulières, utilisez » margin-top « , » margin-bottom « , » margin-left » ou » margin-right « .
- La propriété « padding » est une propriété abrégée utilisée pour définir le padding de diverses manières. Pour définir le rembourrage pour des directions particulières, utilisez « padding-top », « padding-bottom », « padding-left » ou « padding-right ».
Dernière étape pour aujourd’hui : personnaliser le fond des éléments html.