🎨 Aide-mémoire CSS

🔤 Sélecteurs de base

• Sélecteur universel:*
• Balise spécifique:p
• Classe:.classe
• ID:#id
• Enfant direct:div > p
• Descendant:div p
• Frère immédiat:p + span
• Frères généraux:p ~ span

🎯 Propriétés essentielles

• colorbackground
• font-sizefont-weight
• paddingmarginborder
• widthheight
• displaypositionz-index
• overflowvisibilityopacity

🧱 Box model

div {
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
  box-sizing: border-box;
}

📦 Flexbox

display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;

• justify-content : Alignement horizontal
• align-items : Alignement vertical
• flex-wrapgap

🔲 Grid

display: grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;

• grid-template-rows/columns
• grid-areagrid-column

🖼️ Positionnement

position: relative;
position: absolute;
top: 10px;
left: 50px;

🌀 Transitions & animations

transition: all 0.3s ease;

@keyframes glisse {
  from { left: 0; }
  to { left: 100px; }
}

🔧 Responsive Design

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

• Utiliser des unités relatives : emrem, %
• Grilles fluides + media queries

🧩 Pseudo-classes & éléments

• :hover:focus:nth-child()
• ::before::after

a::after {
  content: ' →';
  color: red;
}

🛠️ Outils utiles

• CanIUse : compatibilité navigateurs
• CSS Tricks : documentation claire
• Autoprefixer : préfixes auto

📋 Bonnes pratiques

• Utiliser un reset CSS (normalize.css)
• Modulariser avec BEM ou utilitaires
• Limiter la spécificité excessive