Parfois, on voudra appliquer des styles sur une partie spécifique de notre page qui n'est pas nécessairement encadrée par une balise en particulier. On peut utiliser les balises universelles afin de regrouper des éléments d'une page comme on le désire.
<div>La balise <div> permet de regrouper plusieurs autres balises ensemble. Il s'agit d'une balise dite block, au même titre que <main> ou <nav>.
<div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
La plupart du temps, on va préférer utiliser les balises sémantiques (<main>, <article>, etc.) mais si il n'existe pas de bon choix, on peut utiliser un <div> plutôt.
On peut appliquer une bordure à une balise à l'aide de la règle CSS border.
bordermain {
border: 1px solid red;
}
On peut indiquer une largeur à un élément à l'aide de la règle CSS width. Toutes les unités standard CSS sont valides, mais les pixels et les pourcentages sont très souvent utilisés.
widthmain {
width: 800px;
}
On peut également indiquer une largeur minimale ou maximale, qui permettra aux balises de se redimensionner par elles même tout en restant dans les limites imposées.
min-widthmain {
min-width: 600px;
}
max-widthmain {
max-width: 800px;
}
On peut indiquer une hauteur à un élément à l'aide de la règle CSS height. Toutes les unités standard CSS sont valides, mais les pixels et les pourcentages sont très souvent utilisés.
heightmain {
height: 800px;
}
On peut également indiquer une hauteur minimale ou maximale, qui permettra aux balises de se redimensionner par elles même tout en restant dans les limites imposées.
min-heightmain {
min-height: 600px;
}
max-heightmain {
max-height: 800px;
}
Il est possible d'appliquer des marges intérieures à une balise à l'aide de la règle CSS padding. Cette règle CSS peut être utilisée de différentes façon:
padding: 10px; afin d'appliquer une marge intérieure de 10px sur tous les côtéspadding: 5px 10px afin d'appliquer une marge intérieure de 5px verticalement, et 10px horizontalementpadding: 5px 10px 15px 20px afin d'appliquer une marge intérieure de 5px en hauteur, 10px à droite, 15px en bas et 20px à gauche (dans le sens des aiguiles d'une montre)Il existe également des variantes pour chaque côté, soit padding-top, padding-bottom, padding-left, padding-right.
paddingmain {
padding: 20px;
}
Il est possible d'appliquer des marges extérieures à une balise à l'aide de la règle CSS margin. Tout comme padding, cette règle CSS peut être utilisée de différentes façon:
margin: 10px; afin d'appliquer une marge extérieure de 10px sur tous les côtésmargin: 5px 10px afin d'appliquer une marge extérieure de 5px verticalement, et 10px horizontalementmargin: 5px 10px 15px 20px afin d'appliquer une marge extérieure de 5px en hauteur, 10px à droite, 15px en bas et 20px à gauche (dans le sens des aiguiles d'une montre)Il existe également des variantes pour chaque côté, soit margin-top, margin-bottom, margin-left, margin-right.
marginp {
margin-bottom: 20px;
}
Il est souvent nécessaire de centrer un block de contenu sur une page. Ceci peut être accompli à l'aide d'une valeur spéciale de l'attribut margin. Les étapes à suivre sont:
auto à gauche et à droite du bloc .conteneur {
width: 800px;
margin: 0 auto;
}
Si l'on donne à nos balises des dimensions fixes, il est possible que leur contenu dépasse les dimenssions fournies. On peut gérer ce comportement à l'aide de la règle overflow.
overflowp {
overflow: auto;
}
Parfois, il peut être utile de faire "flotter" un élément. C'est souvent utile pour agencer une image dans un paragraphe.
float<p>
<img src="test.png" alt="">
Lorem ipsum dolor sit amet...
</p>
p img {
float: left;
}
Ceci peut toutefois entrainer un problème où le contenu qui est flotté peut dépasser des limites de la balise parent. Pour régler ce problème, on peut appliquer cette classe CSS clearfix à l'élément parent.
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<p class="clearfix">
<img src="test.png" alt="">
Lorem ipsum dolor sit amet...
</p>
Nous allons créer le squelette d'un site web en CSS. Créez une page web avec les éléments suivants:
<div> qui agira à titre de "conteneur" pour tous les éléments de notre page<header> qui contiendra un <h1> avec un titre de votre choix<nav> qui contiendra une liste avec cinq liens fictifs de votre choix<main> qui contiendra un <h2> avec un titre de votre choix et 5 paragraphes de lorem ipsum<aside> qui contiendra l'image d'avatar et un paragraphe de lorem ipsum
<footer> qui contiendra le texte © 2021 Mon Site Web<header>, <nav>, <main>, <aside> et <footer>Afin d'aligner des balises blocs en CSS, on peut utiliser le modèle flexbox. Il est composé de plusieurs règles CSS qui nous permettront d'obtenir n'importe quel résultat.
Le guide Flexbox de CSS-Tricks est un excellent outil de référence pour les règles flexbox.
Afin d'utiliser flexbox, il faut définir un élément qui sera le parent tous les éléments qu'on désire aligner. Par exemple:
<div class="conteneur-flex">
<div class="enfant enfant1">Enfant 1</div>
<div class="enfant enfant2">Enfant 2</div>
<div class="enfant enfant3">Enfant 3</div>
</div>
On utilise ensuite la règle CSS display: flex; afin de commencer à utiliser le modèle flexbox.
.conteneur-flex {
display: flex;
}
Par défaut, l'axe principal est horizontal de gauche à droite. On peut inverser cet ordre, ou encore y mettre un ordre vertical.
flex-direction.conteneur-flex {
display: flex;
flex-direction: column;
}
justify-content.conteneur-flex {
display: flex;
justify-content: center;
}
align-items.conteneur-flex {
display: flex;
align-items: center;
}
flex-wrap.conteneur-flex {
display: flex;
flex-wrap: wrap;
}
gap.conteneur-flex {
display: flex;
gap: center;
}
Jouer à Flexbox Froggy.
À partir du code réalisé à l'exercise 1, ajoutez les fonctionalités suivantes: