CSS

Tutoriels

La section Apprendre le Web fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.

Introduction à CSS

Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.

Mettre en forme le texte

Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, la graisse, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.

Mettre en forme les boîtes

Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définit des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.

La disposition en CSS

Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (viewport). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (flexbox).

Référence

La référence CSS

Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.

Les concepts majeurs de CSS

Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :

• la syntaxe et les formes du langage
• la spécificité et l'héritage
• le modèle de boîtes
• la fusion des marges
• l'empilement
• les contextes de formatage des blocs
• les concepts de valeur initiale, valeur calculée, valeur utilisée et valeur réelle
• Les propriétés raccourcies
• Les boîtes flexibles CSS (flexbox)
• La grille CSS

Des outils de développement pour CSS

• Le service de validation CSS du W3C permet de vérifier si une feuille de style CSS est valide.
• Les outils de développement Firefox permettent de visualiser, d'éditer une feuille de style en direct grâce à l'inspecteur et à l'éditeur de styles.
• L'extension Firebug pour Firefox est une extension populaire qui permet d'éditer le code CSS des sites visités à la volée. Cette extension est très pratique dans le cadre du développement web.
• D'autres outils, guide pour les débutants.