Dans cette section, vous pourrez apprendre tout ce qu'il y a à savoir sur CSS en partant de zéro. Les différents articles contiendront à la fois des éléments théoriques et des exemples pratiques afin de vous aider à devenir un brillant développeur.
Bienvenue dans cette introduction à CSS.
Ce tutoriel a été réalisé afin de vous guider dans le monde merveilleux du CSS. Si vous n'avez aucune idée de ce que peut être le CSS, nous vous encourageons grandement à jeter un œil sur l'article Les bases du CSS, celui-ci vous apportera les connaissances minimum nécessaires pour débuter. Ce tutoriel correspond à la prochaine étape de votre parcours et se concentre sur la théorie nécessaire pour comprendre le fonctionnement des différents concepts. Si vous préférez plutôt la pratique à la théorie, vous pouvez directement aller à la liste des articles « Comment faire… » qui vous aideront à utiliser le CSS quotidiennement.
Allons-y !
Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets) est un langage qui définit la façon dont les documents sont présentés aux utilisateurs. Ce langage est officiellement spécifié (ou défini) par le W3C.
Un document est habituellement un fichier texte qui est structuré en utilisant un langage de balises tel que HTML, SVG, or XML.
Présenter un document à un utilisateur signifie que ce document doit être converti en un format utilisable pour le public. Les navigateurs, comme Firefox, Chrome ou Internet Explorer sont conçus pour présenter des documents visuellement, par exemple, sur l'écran d'un ordinateur, un projecteur ou via une imprimante.
Note : Précisons qu'un document n'est pas nécessairement la même chose qu'un fichier. Le document que vous êtes en train de lire en ce moment n'est pas stocké dans un fichier. Lorsque votre navigateur web sollicite cette page, le serveur interroge une base de données puis génère le document, en assemblant de nombreux fichiers. Toutefois, lors de votre apprentissage, vous travaillerez essentiellement avec des documents stockés dans des fichiers.
Les navigateurs web appliquent des règles CSS à un document afin que ceux-ci soient affichés correctement. Une règle CSS est une liste de propriétés associées à un sélecteur. Une liste de règles de CSS est contenue dans une feuille de style qui définit la mise en forme d'une page. La notion de « cascade » fait référence aux règles de priorité qui existent entre les différents sélecteur. C'est un aspect très important car on peut « facilement » avoir des milliers de règles CSS lorsqu'on gère un site complexe.
Si le paragraphe précèdent vous semble incompréhensible, ne vous inquiétez pas ! Le tutoriel qui suit va tâcher de clarifier tout ça.
Utiliser le CSS
Voyons rapidement comment lier une feuille de style CSS à un document HTML. Cet exemple constituera une base que vous utiliserez pour manipuler CSS dans les prochains articles.
Note : Pour pouvoir tester la suite correctement, vous aurez besoin d'un éditeur de texte et d'un navigateur web. Si vous ne vous sentez pas suffisamment à l'aise pour mettre en place un tel environnement de travail, vous pouvez utiliser Thimble, un outil d'apprentissage créé par Mozilla. Si vous commencez un projet à partir de zéro avec cet outil, celui-ci gérera toutes les étapes de configuration.
Tour d'abord, nous avons besoin de 2 fichiers :
- un fichier HTML (son nom sera
index.html) - une feuille de style CSS que nous appellerons
style.css
Créez ces 2 fichiers dans un même répertoire sur votre machine.
index.html devrait contenir le code suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mon essai avec CSS</title> <link href="style.css" rel="stylesheet"> </head> <body> Hello World! </body> </html>
style.css devrait contenir la règle suivante :
body {
font-size: 3em;
color: green;
}
Sauvegardez ces 2 fichiers puis ouvrez ensuite index.html grâce à votre navigateur, vous pourrez alors observer ce résultat :
Votre parcours d'apprentissage
Bravo ! Vous avez créé votre première feuille de style CSS. Il est maintenant temps d'approfondir. À ce niveau, il vous faut faire un choix : souhaitez-vous continuer avec la théorie ou plutôt vous salir les mains avec la pratique ? Ne vous inquiétez pas, il n'y a pas de bonne ou de mauvaise réponse. Vous pourrez fréquemment et facilement passer de l'une à l'autre, il s'agit uniquement de votre préférence.
La théorie
- Comment fonctionne le CSS ?
- Cet article est une balade dans les coulisses. Il explique comment les navigateurs web utilisent le CSS pour transformer le HTML afin d'obtenir un résultat plus complexe.
- La syntaxe du CSS
- Tout ce que vous avez besoin de savoir pour écrire une feuille de style CSS propre et qui fonctionne n'importe où, n'importe quand.
- Les sélecteurs CSS
- Les sélecteurs permettent de sélectionner des zones d'une page afin de les mettre en forme, ils représentent donc une caractéristique essentielle de CSS. Les sélecteurs sont accompagnés d'une syntaxe riche, difficile à maîtriser.
- Le modèle de cascade et l'héritage
- La cascade CSS décrit comment les règles CSS se chevauchent et comment chacune hérite des propriétés des autres. Connaître ce pilier fera la différence entre un amateur et un professionnel.
- Le modèle de boîtes
- Le modèle de boîtes CSS correspond à la façon dont CSS gère les espaces pris par chaque élément. C'est un concept clef de CSS et aussi une des premières sources de problème qu'on aura à affronter. Apprenez son fonctionnement pour être plus robuste.
- Introduction à la mise en page CSS
- Construire un plan, déplacer des éléments d'un endroit à un autre de la page : c'est la partie la plus intéressante mais aussi la plus complexe. Allons-y étape par étape en commençant avec cette introduction.
- Autres concepts clefs du CSS
- Cet article énumère une liste de termes et de concepts clefs qui sont importants à connaître lorsque vous vous êtes familiarisé-e avec CSS
La pratique
- Comment mettre en forme du texte ?
- La stylisation du texte est le cœur du CSS, cet article aborde le haut de l'iceberg des éléments de mise enforme nécessaires qui permettent d'afficher du texte de façon agréable.
- Comment créer des boites élégantes ?
- Tous ce que vous avez besoin de savoir sur les bordures et les notions d'arrières-plans pour créer de belles boites.
- Comment gérer la couleur et les images ?
- Les valeurs des couleurs utilisées sont importantes lorsqu'il s'agit de mettre en forme du contenu. CSS possède différentes méthodes pour gérer cela. Dans cet article, nous verrons la différence entre les couleurs et celles qui sont utilisées comme des images.
- Comment personnaliser une liste d'éléments ?
- Créer des listes d'éléments est plutôt simple, en revanche les rendre agréables à lire et à utiliser constitue un défi intéressant. Cet article montre comment faire.
- Comment personnaliser les tableaux HTML ?
- En HTML, les tableaux ont une structure difficile à maitriser. En CSS, il existe aussi de nombreux pièges qui pourraient vous compliquer la vie. Cet article vous aidera à manier ces concepts comme Indiana Jones manie son fouet.