Comprendre et utiliser les CSS

Basée sur une expérience quotidienne du débogage d’entreprise, l’approche choisie part du principe que tout commence par une bonne structuration du contenu des pages web. 

Pour optimiser et faciliter l’implémentation des CSS, il est indispensable de bien comprendre l’utilisation et le rôle du HTML. La particularité de cette approche est de rester, durant toutes les étapes, sur une ligne d’exploration objective en vue de mieux comprendre les bases des principaux outils, au lieu de proposer des listes de trucs et astuces ou divers hacks classiques permettant de corriger çà et là des problèmes très ou trop spécifiques.

Dans le présent volume, pour lequel certains pré-requis sont souhaitables, nous commençons par faire le tour des acteurs, des langages et des outils qui composent l’univers des CSS. Nous explorons ensuite un à un divers thèmes qui constituent les éléments de base de la création CSS au jour le jour.

N’hésitez pas à vous exprimer via les commentaires sur le site de video2brain afin de livrer vos retours d’utilisation et d’expérience !

Vue d’ensemble de la formation :

Avant de commencer

Avant d'aborder le sujet des CSS, il est toujours bon de faire un tour d'horizon des acteurs majeurs de ce secteur, les langages ou les technologies, ainsi que les outils nécessaires pour travailler dans de meilleures conditions.

Les standards et l'univers des CSS

Prenons le temps de regarder ces standards, de comprendre qui ils sont et le rôle de chacun.

Les navigateurs

Controversés pour certains, incontournables pour d'autres, les validateurs, qu'ils soient de code ou de navigateur, permettent quoi qu'il en soit de se donner une idée de la validité de nos pages ou de nos applications.

Document HTML - xHTML

On entend souvent parler de HTML ou de xHTML, de transitionnal ou de strict. Qu'en est-il ? Lequel utiliser et pourquoi ?

DOCTYPE

Premier élément de la page HTML : le Doctype. Il donne le tempo et la mesure. Basculons en mode Quirk ou affrontons de plein fer les standards.

Mise en pages en tableau ou tableau en CSS ?

Aujourd'hui, la séparation contenu / contenant nous permet de libérer et d'adapter beaucoup plus facilement la créativité visuelle en adoptant les CSS. Pourtant, beaucoup de sites aujourd'hui utilisent des CSS et donnent une représentation en tableau du contenu.

Le positionnement

Comment positionner les éléments dans l'espace et le volume de la page ? Il existe diverses possibilités qui apportent chacune des avantages et des inconvénients. Nous allons les explorer une à une.

La floataison et le flux du document

Parfois, les objectifs d'affichage sont compromis par le flux du document : il faut veiller autant que possible à ne pas tomber dans une interaction entre contenu et contenant.

Qu'est-ce qu'une grille ?

Commençons par définir ce qu'est une grille, comment cela fonctionne, et quels peuvent en être les avantages et les inconvénients.

Modèles et Templates

Il existe sur le web diverses sources de modèles qui nous permettent de rapidement mettre en place des structures d'interface et de pouvoir ensuite décliner.

Les sélecteurs

Les CSS sans les sélecteurs ne seraient qu'à moitié fonctionnels. Voyons quels sont les outils de sélection d'éléments que nous avons à disposition et qui nous permettent bien souvent d'éviter une classite importante.

Sémantique et micro-formats

Sans entrer dans la véritable partie sur le web sémantique en abordant l'ontologie et des langages comme OWL, nous allons voir qu'il peut être intéressant de se poser la question sur la manière de nommer nos classes et IDs.

Éléments de liens et boutons

Seules balises interactives du HTML, les liens peuvent être utilisés de manière assez optimisée pour gérer nos boutons, barres de menus et cartes interactives. Nous allons en explorer quelques applications possibles.

Les barres de menus

Il est possible de n'utiliser qu'une seule image pour gérer l'ensemble de nos barres de menus ou d'autres éléments graphiques qui sont interactifs.

Gestion des listes, ul / li ou dt / dd ?

Comment utiliser des listes élémentaires UL / OL-LI .zuz ? Quand faire appel à des listes de définitions DL-DT / DD ? Nous allons au cours de ce tutoriel vidéo approcher les mécaniques de chacune.

Conclusion

Bien d'autres sujets restent à explorer : les formulaires, la gestion des médias, les diverses destinations des CSS, le DOM Scripting et les CSS, l'accessibilité et les CSS, le XML et XSL, des trucs et astuces ou encore des cas d'étude, et bien plus encore !