CSS est l'abréviation de Cascading Style Sheets, que l'on peut traduire en français par feuilles de style en cascade. Il s'agit d'un langage utilisé pour définir l'apparence visuelle des pages web.
Alors que le HTML permet de structurer le contenu d'un document (titres, paragraphes, images, tableaux, liens, etc.), le CSS permet de contrôler la manière dont ce contenu est affiché dans le navigateur.
Grâce au CSS, il est possible de modifier les couleurs, les polices de caractères, les tailles de texte, les marges, les espacements, l'alignement des éléments et l'organisation générale de la page.
Sans CSS, les pages web seraient fonctionnelles mais très peu agréables à lire. Le CSS joue donc un rôle essentiel dans l'expérience utilisateur.
Le HTML et le CSS sont deux langages fondamentaux du développement web, mais ils n'ont pas le même rôle. Le tableau suivant permet de comparer leurs principales différences.
| Critère | HTML | CSS |
|---|---|---|
| Signification | HyperText Markup Language | Cascading Style Sheets |
| Rôle principal | Structurer le contenu | Mettre en forme le contenu |
| Type de langage | Langage de balisage | Langage de feuilles de style |
| Éléments manipulés | Textes, images, liens, tableaux | Couleurs, tailles, marges, disposition |
| Utilisation seule | Oui (page fonctionnelle mais basique) | Non (CSS dépend du HTML) |
| Objectif | Donner une structure logique | Améliorer l'apparence et l'ergonomie |
Le CSS est utilisé pour améliorer la lisibilité et l'esthétique des pages web. Il permet d'adapter l'apparence d'un site à son public cible et à son contexte d'utilisation.
Par exemple, un site institutionnel utilisera souvent des couleurs sobres et une mise en page claire, tandis qu'un site de divertissement pourra adopter un style plus dynamique et coloré.
Le CSS permet également de séparer clairement le contenu de la présentation. Cette séparation facilite la maintenance du site, car il devient possible de modifier l'apparence globale sans toucher au contenu HTML.
Enfin, le CSS joue un rôle important dans l'accessibilité et l'adaptation aux différents supports (ordinateurs, tablettes, téléphones).
Le terme « en cascade » signifie que plusieurs règles CSS peuvent s'appliquer au même élément HTML. Le navigateur doit alors décider quelle règle utiliser en priorité.
Cette priorité dépend de plusieurs facteurs, notamment l'ordre des règles, leur niveau de spécificité et leur emplacement.
Par exemple, une règle définie directement dans une balise HTML aura généralement plus de priorité qu'une règle définie dans un fichier externe.
Comprendre le fonctionnement de la cascade est essentiel pour éviter des conflits de style et pour écrire un code CSS clair et efficace.
Le CSS externe consiste à écrire les règles de style dans un fichier séparé, généralement nommé style.css.
Ce fichier est ensuite relié à la page HTML grâce à une balise placée dans la partie <head>.
Cette méthode est la plus utilisée dans les projets professionnels, car elle permet de centraliser les styles et de les réutiliser sur plusieurs pages.
Le CSS interne est écrit directement dans le document HTML, à l'intérieur d'une balise <style>.
Cette méthode peut être utile pour des tests ou des pages très simples, mais elle devient vite difficile à maintenir lorsque le site grandit.
Le CSS en ligne consiste à ajouter directement des styles dans les balises HTML à l'aide de l'attribut style.
Cette méthode est déconseillée car elle mélange le contenu et la présentation, ce qui va à l'encontre des bonnes pratiques du développement web.
Le CSS est un langage fondamental du développement web. Il permet de transformer une page HTML basique en une interface claire, lisible et agréable pour l'utilisateur.
La maîtrise du CSS est indispensable pour concevoir des sites web modernes, adaptables et maintenables.
Dans la suite du cours, le CSS pourra être approfondi avec des notions plus avancées comme la mise en page, les animations ou le responsive design.