À quoi sert le CSS ?

Le CSS est utilisé pour :

• 
  – Modifier la mise en page d’un document HTML
• – Définir les couleurs, polices, tailles de texte, arrière-plans…
• – Appliquer des styles personnalisés à des éléments HTML spécifiques
• – Gérer la disposition des éléments à l’écran (grilles, colonnes, flexbox…)
• – Créer des animations, des effets de transition, des boutons interactifs
• – Adapter l’affichage selon le type d’appareil (responsive design)

Sans CSS, une page web serait entièrement brute, en noir et blanc, sans structure visuelle.

Comment fonctionne le CSS ?

Le CSS fonctionne en appliquant des règles de style à des éléments HTML à l’aide de sélecteurs, de propriétés et de valeurs :

/* Exemple de règle CSS */
h1 {
color: #333;
font-size: 36px;
margin-bottom: 20px;
}

Structure d’une règle CSS :

• 
  – Sélecteur : cible l’élément HTML (h1)
• – Propriétés : aspects à modifier (color, font-size, margin-bottom)
• – Valeurs : définissent le style à appliquer (#333, 36px, etc.)

Où écrire le CSS ?

1. Dans une feuille de style externe (.css)

<link rel="stylesheet" href="style.css">

Méthode recommandée pour les sites professionnels, car elle sépare le style du contenu.

2. Dans l’en-tête HTML (style interne)

<style>
body { background-color: #f5f5f5; }
</style>

3. En ligne (attribut style sur un élément HTML)

<p style="color: red;">Texte rouge</p>

À éviter pour garder une structure propre.

Les bases du CSS à connaître

• 
  – Sélecteurs CSS : div, #id, .classe, *, ul li, etc.
• – Propriétés courantes :
  
  • color, font-family, font-size (texte)
  • margin, padding, border (espacements)
  • display, position, flex, grid (mise en page)
• 
  – Pseudoclasses : :hover, :focus, :nth-child(), etc.
• – Animations CSS : transition, @keyframes, etc.
• – Médias queries : pour adapter le style à différents écrans (mobile, tablette, desktop)

Le principe de « cascade » dans le CSS

Le mot « cascading » signifie que plusieurs règles CSS peuvent s’appliquer à un même élément. Si deux règles entrent en conflit, le navigateur applique celle avec la plus haute priorité :

1. 
   1) Style en ligne (le plus prioritaire)
2. 2) Feuille de style interne
3. 3) Feuille de style externe
4. 4) Valeurs par défaut du navigateur

Le W3C (World Wide Web Consortium) est l’organisme qui définit les standards CSS (CSS1, CSS2, CSS3, CSS4…).

Avantages du CSS

• 
  – Séparation claire entre structure (HTML) et présentation
• – Code plus propre et plus facile à maintenir
• – Réutilisation des styles sur plusieurs pages
• – Optimisation du temps de chargement
• – Possibilité de créer des designs modernes et adaptatifs
• – Meilleure accessibilité et compatibilité multi-navigateurs

CSS et création de sites web

Le CSS est indispensable pour tout développement web, que ce soit :

• 
  – Un blog ou un site vitrine
  – Un site WordPress personnalisé
  – Un site e-commerce avec WooCommerce
  – Une application web responsive
  – Une refonte graphique