CSS, ou Cascading Style Sheets, est un langage utilisé pour décrire la
présentation d'un document écrit en HTML ou XML. Il permet de contrôler
l'apparence des pages web, notamment les couleurs, les polices, les
espacements, les dispositions et bien plus encore. Grâce à CSS, les
développeurs peuvent créer des sites web attrayants et cohérents en
séparant le contenu (HTML) de la présentation (CSS).
1. Sélecteurs CSS
Sélecteurs de type : p, h1, div, etc.
Sélecteurs de classe : .classe
Sélecteurs d'identifiant : #identifiant
Sélecteurs d'attribut : a[href]
2. Boîte de Modèle (Box Model)
Margins : Espace extérieur.
Borders : Bordures.
Paddings : Espace intérieur.
Content : Contenu réel.
3. Propriétés Courantes
Couleurs : color, background-color
Texte : font-size, font-family, text-align
Disposition : display, position, float, flex, grid
4. Flexbox et Grid
Flexbox : Pour des mises en page flexibles. Propriétés comme display: flex;,
justify-content, align-items.
Grid : Pour des grilles complexes. Propriétés comme display: grid;, grid-
template-columns, grid-template-rows.
5. Media Queries
Pour créer des designs responsives :
css
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
6. Pseudo-classes et Pseudo-éléments
Pseudo-classes : :hover, :focus, :nth-child
Pseudo-éléments : ::before, ::after
Le CSS (Cascading Style Sheets) est un langage de style utilisé pour décrire la présentation
d'un document HTML. Voici quelques propriétés clés du CSS :
1. Propriétés de mise en forme du texte
font-family : Définit la police de caractères.
font-size : Définit la taille de la police.
font-weight : Définit l'épaisseur de la police (normal, bold, etc.).
color : Définit la couleur du texte.
text-align : Aligne le texte (gauche, droite, centre, justifié).
2. Propriétés de mise en page
margin : Définit l'espace extérieur autour d'un élément.
padding : Définit l'espace intérieur entre le contenu et la bordure d'un élément.
border : Définit la bordure autour d'un élément.
width et height : Définit la largeur et la hauteur d'un élément.
3. Propriétés de fond
background-color : Définit la couleur de fond d'un élément.
background-image : Définit une image de fond.
background-size : Définit la taille de l'image de fond.
4. Propriétés de positionnement
position : Définit le type de positionnement (static, relative, absolute, fixed, sticky).
top, right, bottom, left : Définit la position d'un élément par rapport à son conteneur.
5. Propriétés d'affichage
display : Définit comment un élément est affiché (block, inline, inline-block, flex, grid).
visibility : Contrôle la visibilité d'un élément (visible, hidden).
overflow : Gère le contenu qui déborde d'un élément (visible, hidden, scroll, auto).
6. Propriétés de flexbox et grid
flex : Définit les propriétés flexibles d'un élément dans un conteneur flex.
grid-template-columns et grid-template-rows : Définit la structure d'une grille.
7. Propriétés d'animation et de transition
transition : Définit la transition entre deux états d'un élément.
animation : Définit les animations CSS.
1. Propriétés de mise en forme du texte
font-family
Description : Définit la police de caractères à utiliser.
Exemple :
css
Copier
p {
font-family: Arial, sans-serif;
}
font-size
Description : Définit la taille de la police.
Exemple :
css
Copier
h1 {
font-size: 24px;
}
font-weight
Description : Définit l'épaisseur de la police.
Exemple :
css
Copier
strong {
font-weight: bold;
}
color
Description : Définit la couleur du texte.
Exemple :
css
Copier
p {
color: #333;
}
text-align
Description : Aligne le texte à gauche, à droite, au centre ou justifié.
Exemple :
css
Copier
h2 {
text-align: center;
}
2. Propriétés de mise en page
margin
Description : Définit l'espace extérieur autour d'un élément.
Exemple :
css
Copier
div {
margin: 20px;
}
padding
Description : Définit l'espace intérieur entre le contenu et la bordure d'un
élément.
Exemple :
css
Copier
button {
padding: 10px 20px;
}
border
Description : Définit la bordure autour d'un élément.
Exemple :
css
Copier
img {
border: 2px solid #000;
}
width et height
Description : Définit la largeur et la hauteur d'un élément.
Exemple :
css
Copier
.container {
width: 100%;
height: 300px;
}
3. Propriétés de fond
background-color
Description : Définit la couleur de fond d'un élément.
Exemple :
css
Copier
body {
background-color: #f0f0f0;
}
background-image
Description : Définit une image de fond.
Exemple :
css
Copier
header {
background-image: url('[Link]');
}
background-size
Description : Définit la taille de l'image de fond.
Exemple :
css
Copier
.banner {
background-size: cover;
}
4. Propriétés de positionnement
position
Description : Définit le type de positionnement d'un élément.
Exemple :
css
Copier
.absolute {
position: absolute;
top: 10px;
left: 20px;
}
top, right, bottom, left
Description : Définit la position d'un élément par rapport à son
conteneur.
Exemple :
css
Copier
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
5. Propriétés d'affichage
display
Description : Définit comment un élément est affiché.
Exemple :
css
Copier
.inline {
display: inline;
}
visibility
Description : Contrôle la visibilité d'un élément.
Exemple :
css
Copier
.hidden {
visibility: hidden;
}
overflow
Description : Gère le contenu qui déborde d'un élément.
Exemple :
css
Copier
.scroll {
overflow: scroll;
}
6. Propriétés de flexbox et grid
flex
Description : Définit les propriétés flexibles d'un élément dans un
conteneur flex.
Exemple :
css
Copier
.flex-container {
display: flex;
justify-content: space-between;
}
grid-template-columns et grid-template-rows
Description : Définit la structure d'une grille.
Exemple :
css
Copier
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
7. Propriétés d'animation et de transition
transition
Description : Définit la transition entre deux états d'un élément.
Exemple :
css
Copier
button {
transition: background-color 0.3s ease;
}
animation
Description : Définit les animations CSS.
Exemple :
css
Copier
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade {
animation: fadeIn 1s;
}
