Introduction à CSS

CSS, ou Cascading Style Sheets (en français : feuilles de style en cascade), est un langage de mise en forme utilisé pour définir l'apparence d'une page web.

📜 Origines (1994-1996)

Avant CSS : Les premiers sites Web utilisaient uniquement HTML pour structurer les pages. Il n'y avait pas de véritable moyen de contrôler l'apparence (couleurs, polices, mise en page).

1994 : Le développeur Håkon Wium Lie propose pour la première fois un système de feuilles de style pour le Web.

1996 : Le W3C (World Wide Web Consortium) adopte officiellement CSS1, la première version de CSS. Elle permettait de :

Changer les polices, couleurs et tailles de texte,
Ajouter des marges et des espacements,
Styliser les liens et les paragraphes.

🚀 CSS2 (1998)

CSS2 ajoute de nombreuses fonctionnalités :

Mise en page avec le positionnement (absolute, relative, fixed),
Support des médias (media types),
Introduction du z-index,
Apparition des pseudo-classes comme :hover.

Mais à cette époque, les navigateurs Web (Internet Explorer, Netscape...) n'interprètent pas toujours CSS de la même manière, ce qui complique le travail des développeurs.

🧱 CSS2.1 (2004-2011)

CSS2.1 est une version révisée et corrigée de CSS2, qui stabilise les fonctionnalités les plus utilisées.

Elle sert de base solide pour les navigateurs modernes.

✨ CSS3 (à partir de 2011)

CSS3 est une révolution : le langage est découpé en modules, chacun étant développé séparément.

Exemples de modules CSS3 :

Sélecteurs CSS avancés (nth-child, not, etc.),
Transitions et animations,
Flexbox et Grid Layout pour la mise en page,
Media queries pour le responsive design,
Effets visuels : ombres, dégradés, transformations 2D/3D, etc.

🔄 CSS aujourd’hui

CSS continue d’évoluer : de nouvelles fonctionnalités comme CSS Variables, container queries, subgrid, etc., sont en cours d’adoption.

Il est désormais indispensable pour créer des sites Web modernes, responsives, accessibles et interactifs.

🧩 Syntaxe de CSS

1. Structure d'une règle CSS

Une règle CSS est composée de trois parties :

Sélecteur : pour cibler l'élément HTML
Propriété : ce que l'on veut modifier (ex : couleur, taille...)
Valeur : la valeur que l'on applique à la propriété

Exemple :

p {
            color: red;
            font-size: 16px;
            }

2. Exemple de sélecteurs

Voici différents types de sélecteurs CSS :

/* Sélecteur par balise */
            h1 {
            color: blue;
            }

            /* Sélecteur par classe */
            .titre {
            font-weight: bold;
            }

            /* Sélecteur par identifiant */
            #menu {
            background-color: #eee;
            }

            /* Sélecteur combiné */
            div p {
            margin: 10px;
            }

3. Syntaxe générale

sélecteur {
            propriété1: valeur1;
            propriété2: valeur2;
            /* etc. */
            }

4. Exemple complet

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

            h1 {
            color: #3498db;
            text-align: center;
            }

            p {
            line-height: 1.6;
            color: #333333;
            }

💡 Mon site : Avant et après l'ajout de CSS

🔲 Version sans CSS

Sans CSS, le site est brut, sans couleurs ni mise en page.

🎨 Version avec CSS

Avec CSS, le site devient plus esthétique, structuré et agréable à utiliser.