Tutoriel CSS et études de cas

CSS (Cascading Style Sheet) est une grammaire de règles pour définir la présentation d'un document. C'est un standard du Web reconnu par tous les navigateurs qui permet la séparation du contenu des pages et leur présentation.

Le format des documents est indifférent: cela peut être HTML, XHTML, XML ou tout autre format dès lors qu'un moteur de rendu peut traiter les règles et les appliquer sur un média. Le langage d'interface graphique XUL basé sur le moteur de rendu Gecko utilise CSS.

L'évolution du format des pages Web, tend dans HTML 5 vers la suppression totale des éléments de présentation tels que <b> (gras) <i> (italique), tandis qu'apparaissent de nouvelles balise de contenu (video) ou de structure (section).

La séparation du contenu et de la présentation améliore considérablement la productivité en permettant de placer la définition de cette dernière dans un fichier réutilisable avec des contenus différents, avec chaque page Web.

Et à l'inverse, il est possible de personnaliser la présentation en changeant le fichier CSS, au choix de l'utilisateur notamment, pour favoriser l'accessibilité, ce que permettent les CMS.
La présentation peut encore être adaptée selon le média. Un format standard est définit qui reconnaît entre autre l'écran (screen), l'impression (print), les mobiles (handheld), la synthèse vocale (speech) ou tout média (all).

Cascade

Les styles sont en cascades, ce qui veut dire que l'on peut préciser une règle déjà définie et la surcharger dans un style, l'adapter à un contexte.
Par exemple, si on a définit un style pour la balise <a>, on peut le modifier lorsque cette balise est contenue dans une table avec la règle "<table> <a>".

L'ordre des déclarations est important. Une nouvelle règle dans un même fichier ou par rapport à un fichier importé, annule et remplace la précédente pour chaque propriété définie dans la nouvelle règle.

Les règles et propriétés

Syntaxe CSS.
Les sélecteurs CSS 2 et 3.
Box-shadow.
Comment ajouter une ombre à une boite de texte ou une image en CSS 3.
On peut aussi ajouter une ombre en CSS 2.
background. Mettre une image en fond de page.
display. Propriété de mise en forme
position. Combinaison entre le conteneur et les éléments contenus.
float. Son effet dépend de l'ordre dans le code.
clear. Fonctionne en conjonction avec float.
clip. Recadrer une image ou créer des vignettes.
padding et margin.
fieldset. Personnaliser la balise et résoudre les problèmes de compatibilité.
white-space. Contrôle les espaces et retours à la ligne. Les tabulations dans une page web.
overflow: Contrôler l'alignement dans un bloc conteneur.
!important. Surclasser les précédences.
z-index. Propriété de mise en forme, elle permet aussi des effets spéciaux.
opacity. Transparence et superposition.
transition. Des effets graphiques en CSS.
Glossaire.

Démonstrations et études de cas

Du texte sur une image.

Fenêtre sur un paysage.

Voir un panoramique dans une fenêtre, avec effet de relief.

Lightbox CSS.

Une lightbox sans JavaScript.

Liste personnalisée

Les listes peuvent devenir des éléments graphiques pour enrichir une page Web.

Graphe en barres

Compléter simplement une page avec un graphe en barres, sans framework.

Histogramme

Version spécialisée du graphe avec des années (ou autres libellés de taille identique).

Galerie d'images déroulantes sans JavaScript

Présente une série d'images dans une fenêtre.

Bordure avec texture

Comment attribuer une texture aux cadres entourant les boites de texte ou les images.

Table HTML d'apparence professionnelle

Sans framework, avec une fonction JavaScript.

Menu Apple et plus

Bouton en CSS sans JavaScript

Comment réaliser des boutons pour l'interface d'un site, et démonstration d'une barre de boutons.

CSS et CMS

Le développement croissant des systèmes de gestion de contenu augmente encore l'intérêt des feuilles de style. Il est facile à un utilisateur d'installer des templates comprenant feuille de style et images, et changer l'apparence du site instantanément.

Des logiciels tels que Drupal permettent à chaque utilisateur de choisir son template et donc l'apparence du site pour lui-même.

Compatibilité

La spécification CSS 2.0 du W3C est implémentée par tous les navigateurs actuels.

La version 3 est en cours d'implémentation. Elle l'est entièrement par Safari 4. Des éléments de CSS3 peuvent être ajoutés aux styles des pages actuelles avec une définition alternative non standard pour Internet Explorer.

Compatibilité dans IE6 et IE7.

Compatibilité des navigateurs. (Anglais). Lien externe. Montre l'implémentation dans les navigateurs.