Introduction à CSS3

Introduction Sélecteurs Mise en page Avancé
CSS (Cascading Style Sheets) est le langage utilisé pour styliser et mettre en forme les pages web.

Syntaxe de base

sélecteur {
    propriété: valeur;
    autre-propriété: valeur;
}

/* Exemple */
.ma-classe {
    color: #333;
    font-size: 16px;
    margin: 10px;
}

Sélecteurs CSS

  • élément - Sélecteur de type
  • .classe - Sélecteur de classe
  • #id - Sélecteur d'ID
  • parent > enfant - Sélecteur d'enfant direct
  • élément[attribut] - Sélecteur d'attribut

Flexbox et Grid

Flexbox

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1;
    margin: 10px;
}

Grid

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.item {
    grid-column: span 2;
}

Nouveautés CSS3

  • Variables CSS (custom properties)
  • Animations et transitions
  • Flexbox et Grid
  • Media queries
  • Transformations et filtres

Bonnes pratiques

  • Utiliser une méthodologie (BEM, SMACSS)
  • Minimiser la spécificité
  • Organiser le code par composants
  • Utiliser des préprocesseurs (Sass, Less)
  • Optimiser les performances

Ressources utiles