🌐 Qu’est-ce que le CSS ?

Le CSS permet de dĂ©crire l’apparence visuelle d’un document HTML : couleurs, polices, tailles, marges, alignements, etc.

📚 CSS = Cascading Style Sheets = Feuilles de style en cascade
đŸ§± Il sĂ©pare le contenu (HTML) de la prĂ©sentation (CSS).

🔌 Comment intĂ©grer le CSS Ă  une page HTML ?

Il existe trois méthodes :

  1. CSS interne (dans une balise <style> dans le <head>)
  2. CSS en ligne (inline) (dans l’attribut style d’une balise)

CSS externe (recommandé) :

<link rel="stylesheet" href="styles.css">
✅ PrĂ©fĂ©rer le CSS externe : plus clair, rĂ©utilisable, mieux organisĂ©.

đŸ§· Syntaxe de base

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

Exemple :

h1 {
  color: blue;
}

🎯 Cibler les bons Ă©lĂ©ments avec les sĂ©lecteurs

Voici les principaux types de sélecteurs CSS :

Type Exemple Description
Balise (type) p {} Cible toutes les balises <p>
Classe .highlight {} Cible les éléments avec class="highlight"
ID #main-title {} Cible l'élément avec id="main-title"
Imbriqué header p {} Cible les <p> dans un <header>
Pseudo-classes a:hover {} Cible un lien au survol de la souris

đŸ§± PropriĂ©tĂ©s CSS de base

🎹 Couleurs

color: red;              /* texte */
background-color: gray;  /* fond */

Formats acceptés : noms (red), hexadécimal (#FF5733), rgb(), rgba().

📝 Texte

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: none;

🔗 Liens

a {
  color: darkblue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

đŸ–Œïž Exemple de styles.css

body {
  background-color: #f4f4f4;
  color: #333;
  font-family: Arial, sans-serif;
}

h1 {
  color: darkslateblue;
  text-align: center;
}

h2 {
  color: #444;
  border-bottom: 2px solid #444;
  margin-bottom: 10px;
}

p {
  line-height: 1.6;
  margin: 10px 0;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

📩 Le Box Model (Modùle de boüte CSS)

Chaque élément HTML est une boßte composée de :

[margin]
  [border]
    [padding]
      [content]
  • padding: espace interne (entre le contenu et la bordure)
  • margin: espace externe (autour de l’élĂ©ment)
  • border: bordure de l’élĂ©ment

Exemple :

section {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}

🧭 Positionnement des Ă©lĂ©ments

🔄 Float (flottement)

Permet de faire flotter un Ă©lĂ©ment Ă  gauche ou Ă  droite et d’avoir du texte autour.

.profile-photo {
  float: left;
  margin: 0 15px 15px 0;
  width: 150px;
}
đŸ§Œ Si le contenu suivant se glisse sous l’image, on peut ajouter :
footer { clear: both; }

📍 Position

Type Description
static par défaut (flux normal)
relative position ajustĂ©e par rapport Ă  la position d’origine
absolute position par rapport à un parent positionné
fixed position par rapport Ă  la fenĂȘtre

🧠 À retenir

  • Le CSS est essentiel pour donner vie Ă  une page HTML.
  • Il est sĂ©parĂ© du HTML, ce qui rend le code plus propre et rĂ©utilisable.
  • Bien cibler les Ă©lĂ©ments avec les sĂ©lecteurs est la base d’un bon style.
  • Le box model et les positions sont fondamentaux pour organiser visuellement une page.

🔗 Ressources utiles