PROPRÉTÉS CSS

La couleur de fond en css

La bordure en css
La marge en css
La couleur de fond en css

Objectifs :

Comprendre ce qu'est le << la couleur de fond >>

Apprendre a changer la couleur de fond avec << Background-color >>
D'écouvrir les différentes valeurs prises par background-color.
 Bordure en CSS

Objectifs :

Comprendre ce qu'est la << bordure >>

Apprendre a encadrer des éléments en html grâce a la proprieter CSS <<border >>
 La marge en css

En CSS ,la marge est l'espace blanc vide qui entoure un élément html. Elle est utilisée pour
définir la distance entre les éléments et leur environnement

Objectifs :
Savoir définir les marges d'un élément avec la propriété CSS << margin >>
LE POSITIONNEMENTEN EN CSS
Positionnement absolu
Positionnement fixe
Positionnement relatif
 Positionnement absolu:

Le positionnement absolu est utilisé pour positionner un élément de manière précise dans la page,
indépendamment de sa position d'origine dans le flux du document. Pour cela, vous devez définir la
propriété de positionnement sur "absolute" et définir les valeurs de top, bottom, left et right.
 Positionnement fixe:

Le positionnement fixe est utilisé pour positionner un élément de manière fixe dans la page, même lorsque
l'utilisateur fait défiler la page. Pour cela, vous devez définir la propriété de positionnement sur "fixed" et
définir les valeurs de top, bottom, left et right. L'élément sera alors positionné par rapport au viewport,
c'est-à-dire la partie visible de la page. Cela signifie que l'élément restera à la même position, même si
l'utilisateur fait défiler la page.
 Positionnement relatif:

Le positionnement relatif est la méthode de positionnement par défaut en CSS. Lorsque vous
définissez la propriété de positionnement sur "relative", l'élément est positionné relativement
à sa position d'origine dans le flux du document. Vous pouvez déplacer l'élément en utilisant
les propriétés top, bottom, left et right. Par exemple, si vous définissez "top: 10px" et "left:
20px", l'élément sera déplacé de 10 pixels vers le bas et de 20 pixels vers la droite à partir de
sa position d'origine.
MISE EN PAGE CSS
les grilles en css
les flexbox en css
les grilles en css
En CSS, la grille (ou grid) est une fonctionnalité qui permet de créer des mises en page complexes et
flexibles pour les pages web. La grille CSS repose sur un système de lignes et de colonnes, qui
permet de positionner les éléments HTML de manière précise.

Pour créer une grille en CSS, on peut utiliser la propriété "display: grid;" sur le conteneur parent
(généralement une div). On peut ensuite définir le nombre de lignes et de colonnes souhaitées en
utilisant les propriétés "grid-template-rows" et "grid-template-columns". On peut également
définir la taille et l'espacement des cellules en utilisant les propriétés "grid-row-gap" et "grid-
column-gap".

Une fois la grille définie, on peut positionner les éléments HTML en utilisant les propriétés "grid-
row" et "grid-column", qui spécifient la ligne et la colonne où l'élément doit être placé. On peut
également utiliser la propriété "grid-area" pour définir la zone dans laquelle un élément doit être
placé.
 les flexbox en css

Les flexbox (ou Flexible Box Layout) en CSS sont une fonctionnalité qui permet de créer des mises en page flexibles et
adaptatives pour les pages web. Les flexbox reposent sur un système de conteneurs flexibles et d'éléments flexibles,
qui permettent de positionner les éléments HTML de manière précise.

Pour utiliser les flexbox en CSS, on peut appliquer la propriété "display: flex;" sur le conteneur parent (généralement
une div). Ensuite, on peut définir le sens de la disposition (horizontale ou verticale) en utilisant la propriété "flex-
direction". On peut également définir la taille et l'espacement des éléments flexibles en utilisant les propriétés "flex-
grow", "flex-shrink" et "flex-basis".

Une fois les éléments HTML définis comme flexibles, on peut les positionner en utilisant les propriétés "justify-
content" et "align-items", qui permettent de les aligner horizontalement et verticalement dans le conteneur. On peut
également utiliser la propriété "align-self" pour positionner un élément flexible spécifique dans le conteneur.
Tech et Cie.

Merci !
N'hésitez pas à nous contacter si vous avez des questions.