Cours CSS

Introduction à CSS

CSS, ou Cascading Style Sheets, est le langage utilisé pour décrire la présentation d'un document HTML. Imagine que HTML est la structure de ta maison, alors CSS est la décoration et le style qui rendent ta maison belle et accueillante. Avec CSS, tu peux changer les couleurs, les polices, et même la disposition des éléments sur une page web.

Historique et Contexte

CSS a été proposé par Håkon Wium Lie en 1994 et est devenu un standard du web. Il permet de séparer le contenu de la présentation, facilitant ainsi la gestion et la mise à jour des sites web. Aujourd'hui, CSS est utilisé pour créer des designs web attrayants et réactifs, permettant aux sites de s'adapter à différentes tailles d'écran.

Sélecteurs et Propriétés

Les sélecteurs permettent de cibler des éléments HTML pour appliquer des styles. Par exemple, tu peux utiliser un sélecteur pour changer la couleur de tous les titres de ta page. Les propriétés définissent les caractéristiques de style, comme la couleur et la taille de la police.

Liste de Sélecteurs Courants

* : Sélecteur universel, cible tous les éléments.
element : Sélecteur de type, cible tous les éléments du type spécifié (ex : p pour les paragraphes).
.class : Sélecteur de classe, cible tous les éléments avec la classe spécifiée.
#id : Sélecteur d'identifiant, cible l'élément avec l'identifiant spécifié.

Liste de Propriétés Courantes

color : Définit la couleur du texte.
font-size : Définit la taille de la police.
background-color : Définit la couleur de fond.
margin : Définit l'espace extérieur d'un élément.
padding : Définit l'espace intérieur d'un élément.

Exercice Pratique

Stylise une page HTML en utilisant CSS. Applique des styles aux titres, paragraphes, et liens pour améliorer l'apparence de la page. Par exemple, tu peux changer la couleur des titres en bleu et augmenter la taille de la police des paragraphes.

Exemple de Code


<!DOCTYPE html>
<html>
<head>
    <title>Page Stylisée</title>
    <style>
        h1 { color: blue; }
        p { font-size: 18px; }
        a { color: green; text-decoration: none; }
    </style>
</head>
<body>
    <h1>Bienvenue sur ma page stylisée !</h1>
    <p>Ce paragraphe est maintenant stylisé avec du CSS.</p>
    <a href="#">Clique ici</a>
</body>
</html>

Exercice d'Application

Essaie de modifier la page ci-dessus en ajoutant un fond de couleur à la page et en centrant le texte. Utilise les propriétés background-color et text-align pour cela. Par exemple, tu peux utiliser background-color: lightgray; pour un fond gris clair et text-align: center; pour centrer le texte.

Résumé du Cours

CSS est essentiel pour styliser les pages web. En maîtrisant les sélecteurs et les propriétés, tu peux créer des designs attrayants et cohérents. N'oublie pas que chaque propriété a un effet spécifique, et en les combinant, tu peux créer des styles uniques et personnalisés.

Mini Lexique CSS

Sélecteur: Syntaxe permettant de cibler des éléments HTML pour appliquer des styles.
Propriété: Caractéristique de style que l'on peut définir (ex : color, font-size).
Box Model: Modèle de boîte qui définit les marges, bordures, et padding des éléments.
Flexbox: Module CSS permettant de créer des mises en page flexibles et réactives.
Grid Layout: Module CSS permettant de créer des mises en page en grille.

Anecdote

"CSS a été inspiré par les feuilles de style utilisées dans l'édition de documents imprimés, permettant de séparer le contenu de la présentation pour une gestion plus facile."