css: Syntaxe de base

📌 1. Structure d'une règle CSS
📌 2. Les sélecteurs
📌 3. Les propriétés
📌 4. Les valeurs
📌 5. Les commentaires
📌 6. Le groupement de sélecteurs
📌 7. La cascade et l'ordre
📌 8. Les unités de mesure
📌 9. Les couleurs en CSS
📌 10. Exercices pratiques

📌 1. Structure d'une règle CSS

Une règle CSS se compose de 3 parties :

Sélecteur

{ }

Déclaration

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

📌 Sélecteur

Cible l'élément HTML à styliser (h1, p, .classe, #id)

📌 Propriété

Ce qu'on veut modifier (color, font-size, margin, etc.)

📌 Valeur

La nouvelle valeur de la propriété (blue, 24px, center, etc.)

📌 Déclaration

Propriété + Valeur (color: blue;)

📌 Règle

Sélecteur + Déclarations (entre { })

📖 Règles de syntaxe à retenir

✅ Règles fondamentales

Chaque déclaration se termine par un point-virgule (;)
La propriété et la valeur sont séparées par deux-points (
Les déclarations sont dans des accolades { }
Les espaces et retours à la ligne sont ignorés (lisibilité)
Le CSS est insensible à la casse pour les propriétés (mais pas pour les valeurs)

📌 2. Les sélecteurs

Un sélecteur indique quel(s) élément(s) HTML vont être stylisés.

Sélecteur	Syntaxe	Exemple	Cible
Universel	`*`	`* { margin: 0; }`	Tous les éléments
Type (balise)	`nom`	`p { color: red; }`	Tous les paragraphes
Classe	`.nom`	`.important { bold; }`	class="important"
ID	`#nom`	`#header { background: gray; }`	id="header"
Attribut	`[attr]`	`input[type="text"]`	Champs texte

<!-- HTML -->
<h1>Titre principal</h1>
<p class="introduction">Ceci est une introduction</p>
<p id="special">Un paragraphe unique</p>
<a href="https://example.com" target="_blank">Lien externe</a>

/* CSS correspondant */
h1 { color: navy; }                    /* Sélecteur de type */
.introduction { font-size: 1.2em; }     /* Sélecteur de classe */
#special { background-color: yellow; }  /* Sélecteur d'ID */
a[target="_blank"] { color: orange; }   /* Sélecteur d'attribut */

⚠️ Important : Un ID doit être UNIQUE dans la page. Une classe peut être réutilisée plusieurs fois.

📌 3. Les propriétés CSS

Les propriétés CSS définissent ce que vous voulez modifier.

🎨 Texte et police

color - couleur du texte
font-size - taille de police
font-family - type de police
font-weight - gras (bold/normal)
font-style - italique
text-align - alignement
text-decoration - soulignement
line-height - interligne

📦 Espacement

margin - marge extérieure
padding - marge intérieure
border - bordure
width - largeur
height - hauteur
gap - espace entre éléments

🎨 Arrière-plan

background-color - couleur de fond
background-image - image de fond
background-size - taille du fond
background-position - position du fond

✨ Bordures et ombres

border-radius - coins arrondis
box-shadow - ombre de boîte
text-shadow - ombre de texte

📌 4. Les valeurs CSS

Les valeurs définissent comment modifier la propriété.

🔢 Valeurs numériques

font-size: 16px; margin: 10px;

width:
            100%;

📝 Mots-clés

color: red; text-align: center; display: block;

🎨 Couleurs

color: #ff0000; color: rgb(255,0,0); color: hsl(0,100%,50%);

📐 Fonctions

width: calc(100% - 20px);

transform:
            rotate(45deg);

background: linear-gradient(red,
            blue);

/* Exemples de valeurs */
h1 {
    font-size: 24px;           /* numérique avec unité */
    font-weight: bold;         /* mot-clé */
    color: #3498db;            /* hexadécimal */
    background: rgb(52,152,219); /* RGB */
    width: calc(100% - 40px);  /* fonction calc() */
    transform: rotate(10deg);  /* fonction rotate() */
}

📌 5. Les commentaires

Les commentaires sont ignorés par le navigateur. Ils servent à :

📝 Expliquer votre code
🔍 Organiser votre fichier CSS
⚠️ Désactiver temporairement du code

/* Ceci est un commentaire sur une ligne */

/*
    Ceci est un commentaire
    sur plusieurs lignes
*/

/* Organisation du fichier */
/* ========== HEADER ========== */
header {
    background: #2c3e66;
}

/* ========== MAIN CONTENT ========== */
.content {
    padding: 20px;
}

/* Désactiver temporairement une règle */
/*
.button {
    background: red;
}
*/

💡 Bonnes pratiques : Commentez votre code, cela aide la relecture et la maintenance !

📌 6. Le groupement de sélecteurs

Pour appliquer les mêmes styles à plusieurs sélecteurs, utilisez une virgule.

/* Sans groupement - code répétitif */
h1 { color: blue; font-family: Arial; }
h2 { color: blue; font-family: Arial; }
h3 { color: blue; font-family: Arial; }

/* Avec groupement - code optimisé */
h1, h2, h3 {
    color: blue;
    font-family: Arial;
}

❌ Avant (redondant)

.titre1 { font-size: 24px; color: red; }
.titre2 { font-size: 24px; color: red; }
.titre3 { font-size: 24px; color: red; }

✅ Après (optimisé)

.titre1, .titre2, .titre3 {
    font-size: 24px;
    color: red;
}

💡 On peut aussi grouper des sélecteurs de types différents : h1, .special, #main { }

📌 7. La cascade et l'ordre

En CSS, l'ordre compte : si deux règles s'appliquent au même élément, la dernière l'emporte.

/* CSS */
p { color: red; }      /* S'applique d'abord */
p { color: blue; }     /* Écrase la précédente */

/* Le texte sera BLEU car la dernière règle l'emporte */

🎯 Ordre de priorité :

!important (force la priorité - à utiliser rarement)
CSS inline (style="...")
ID (#mon-id)
Classe, attribut, pseudo-classe (.ma-classe, [type="text"], :hover)
Type (balise) (p, h1, div)
CSS par défaut du navigateur

<p id="para" class="texte">Bonjour</p>

/* CSS */
p { color: gray; }        /* Priorité 5 (balise) */
.texte { color: green; }  /* Priorité 4 (classe) → l'emporte */
#para { color: red; }     /* Priorité 3 (ID) → l'emporte encore plus */

📌 8. Les unités de mesure

Unité	Signification	Exemple
`px`	Pixels (absolu)	`font-size: 16px;`
`em`	Relatif à la police parente	`padding: 2em;`
`rem`	Relatif à la police racine	`margin: 1rem;`
`%`	Pourcentage	`width: 50%;`
`vw`	1% de la largeur de la fenêtre	`font-size: 5vw;`
`vh`	1% de la hauteur de la fenêtre	`height: 100vh;`

/* Exemples d'unités */
.pixels {
    width: 300px;        /* Largeur fixe en pixels */
}

.relatif {
    width: 50%;          /* 50% de l'élément parent */
    font-size: 1.2rem;   /* 1.2 × taille police racine */
}

.responsive {
    width: 100vw;        /* 100% de la largeur de l'écran */
    height: 100vh;       /* 100% de la hauteur de l'écran */
}

💡 Recommandation : Utilisez rem pour les polices et px pour les bordures.

📌 9. Les couleurs en CSS

Il existe plusieurs façons de définir une couleur en CSS :

Mots-clés

color: red; color: blue;

color:
            green;

Hexadécimal

color: #3498db; color: #ff0000;

color:
            #fff;

RGB

color: rgb(52,152,219);

color:
            rgba(52,152,219,0.5);

HSL

color: hsl(210,70%,53%);

color:
            hsla(210,70%,53%,0.5);

/* Les différentes notations */
h1 {
    color: red;                        /* Nom de couleur */
    color: #ff0000;                    /* Hexadécimal 6 chiffres */
    color: #f00;                       /* Hexadécimal 3 chiffres */
    color: rgb(255, 0, 0);             /* RGB (0-255) */
    color: rgba(255, 0, 0, 0.5);       /* RGB avec transparence */
    color: hsl(0, 100%, 50%);          /* HSL (Teinte, Saturation, Luminosité) */
    color: hsla(0, 100%, 50%, 0.5);    /* HSL avec transparence */
}

📌 10. Exercices pratiques

🎯 Exercice 1

Écrivez une règle CSS qui rend tous les titres h1 bleus et centrés.

📖 Voir la solution

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

🎯 Exercice 2

Créez une classe ".carte" avec : fond gris clair, padding 20px, coins arrondis 10px.

📖 Voir la solution

.carte {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

🎯 Exercice 3

Optimisez ce code en utilisant le groupement :

.menu a { color: white; }
.menu span { color: white; }
.menu button { color: white; }

📖 Voir la solution

.menu a, .menu span, .menu button {
    color: white;
}

🎯 Exercice 4

Écrivez une règle qui cible uniquement les paragraphes avec la classe "important".

📖 Voir la solution

p.important {
    /* vos styles ici */
}

🎯 Exercice 5

Donnez la couleur rouge en utilisant les 4 notations (mot-clé, hexa, rgb, hsl).

📖 Voir la solution

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);

📝 Résumé - Ce qu'il faut retenir

✅ Une règle CSS = sélecteur { propriété: valeur; }
✅ Les sélecteurs : * (universel), p (type), .classe, #id
✅ Chaque déclaration se termine par un point-virgule (;)
✅ Groupez les sélecteurs avec une virgule (,)
✅ Les commentaires : /* ... */
✅ Unités : px, em, rem, %, vw, vh
✅ Couleurs : mots-clés, hexadécimal (#), rgb(), hsl()

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

🎯 Exemple : p { color: blue; font-size: 16px; }