COURS ULTRA COMPLET : TOUTES LES PROPRIÉTÉS CSS (A → Z)

(Pour apprendre à maîtriser le CSS comme un vrai développeur senior)

1️⃣ Propriétés de texte & police

✔ color – couleur du texte

p {
  color: red;
}

✔ font-size – taille du texte

p {
  font-size: 20px;
}

✔ font-weight – épaisseur du texte

h1 {
  font-weight: bold; /* 100 → 900 */
}

✔ font-style – style italique

p {
  font-style: italic;
}

✔ font-family – police d’écriture

p {
  font-family: "Montserrat", sans-serif;
}

✔ text-align – alignement du texte

p {
  text-align: center;
}

✔ text-decoration

• underline

• line-through

• overline

a {
  text-decoration: underline;
}

✔ text-transform

• uppercase

• lowercase

• capitalize

p {
  text-transform: uppercase;
}

✔ line-height – hauteur de ligne

p {
  line-height: 1.5;
}

✔ letter-spacing – espacement entre lettres

p {
  letter-spacing: 2px;
}

✔ word-spacing – espacement entre mots

p {
  word-spacing: 10px;
}

2️⃣ Propriétés des couleurs & arrière-plan

✔ background-color

div {
  background-color: #6c63ff;
}

✔ background-image

div {
  background-image: url("image.jpg");
}

✔ background-size

div {
  background-size: cover; 
}

✔ background-position

div {
  background-position: center;
}

✔ background-repeat

div {
  background-repeat: no-repeat;
}

3️⃣ Dimensions : largeur & hauteur

✔ width – largeur fixe

div {
  width: 300px;
}

✔ height – hauteur fixe

div {
  height: 200px;
}

✔ % – proportion du parent

div {
  width: 50%;
}

✔ max-width, min-width, max-height, min-height

img {
  max-width: 100%;
}

4️⃣ Marges & espaces internes

✔ margin – espace extérieur

div {
  margin: 20px;
}

✔ padding – espace intérieur

div {
  padding: 20px;
}

Raccourcis :

margin: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 30px 40px;

5️⃣ Bordures & arrondis

✔ border

div {
  border: 2px solid black;
}

✔ border-radius – arrondir les coins

button {
  border-radius: 10px;
}

✔ box-shadow

div {
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

6️⃣ Affichage & positionnement

✔ display

• block

• inline

• inline-block

• none

• flex

• grid

div {
  display: flex;
}

✔ position

• static

• relative

• absolute

• fixed

• sticky

div {
  position: absolute;
  top: 20px;
  left: 30px;
}

✔ top, right, bottom, left

Avec position: relative/absolute/fixed/sticky.

✔ z-index

Détermine la profondeur.

div {
  z-index: 999;
}

7️⃣ Flexbox (les propriétés les plus importantes)

Container Flex

.container {
  display: flex;
}

✔ justify-content

Aligne horizontalement

• flex-start

• center

• flex-end

• space-between

• space-around

justify-content: center;

✔ align-items

Aligne verticalement

align-items: center;

✔ flex-direction

• row

• column

flex-direction: column;

✔ gap – espace entre éléments

gap: 20px;

✔ Éléments enfants

flex-grow

.flex {
  flex-grow: 1;
}

flex-shrink

flex-basis

Raccourci :

flex: 1; /* grow | shrink | basis */

8️⃣ CSS Grid (bases)

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

✔ grid-template-rows

✔ grid-template-columns

✔ row-gap, column-gap

✔ Position d’un élément :

.item {
  grid-column: 1 / 3;
}

9️⃣ Propriétés d'opacité, curseur & overflow

✔ opacity

img {
  opacity: 0.5;
}

✔ cursor

button {
  cursor: pointer;
}

✔ overflow

• visible

• hidden

• scroll

• auto

div {
  overflow: auto;
}

🔟 Animations CSS

✔ transition

button {
  transition: 0.3s ease;
}
button:hover {
  transform: scale(1.1);
}

✔ transform

div {
  transform: rotate(45deg);
}

✔ animation

div {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

1️⃣1️⃣ Propriétés avancées

✔ filter

img {
  filter: blur(5px);
}

✔ backdrop-filter

div {
  backdrop-filter: blur(10px);
}

✔ mix-blend-mode

img {
  mix-blend-mode: multiply;
}

✔ object-fit

img {
  object-fit: cover;
}

✔ pointer-events

div {
  pointer-events: none;
}

🎯 RÉCAP GLOBAL

🔥 Propriétés texte

color, font-size, font-weight, text-align, text-transform, …

🔥 Dimensions

width, height, max-width, …

🔥 Espacements

margin, padding

🔥 Bordures

border, border-radius, box-shadow

🔥 Positionnement

display, position, z-index, …

🔥 Flexbox

justify-content, align-items, gap, flex

🔥 Grid

grid-template-columns, grid-column

🔥 Animation

transition, transform, animation

🔥 Avancées

filter, backdrop-filter, object-fit, …