Les CSS forment un langage informatique permettant de contrôler facilement les règles de mise en forme d'une page web, sans en changer le code HTML/XHTML.
CSS ne contrôle pas la mise en forme proprement dite, mais les règles de mise en forme.
Pour cela, le langage des CSS est fondé sur la notion de style - expliquant son nom "Cascading Style Sheet", signifiant littéralement "feuilles de styles en cascades".
Une feuille de style est une somme de styles destinée à contrôler la présentation de la ou les pages qui s'y réfèrent. Grâce à une feuille de style on obtient une séparation complète entre les données et leur règles de présentation.
Les CSS sont un standard d'internet formalisé par le W3C - l'instance normative d'internet.
Lectures INDISPENSABLES
Pour les débutants comme pour les utilisateurs confirmés, ces lectures expliquent les enjeux et les options de mise en oeuvre des feuilles de style CSS.- Jongler avec les standards: les options disponibles Erreur 404 le 13/06/04 [fr], par LaurentDenis.
- Cette page a le mérite d'exister, pourtant elle me semble très imparfaite :
- il est difficile de se rendre compte de quels navigateurs seront compatibles avec chaque solution
- certains commentaires laissent le lecteur perplexe, par ex. les dernières lignes de la solution 3 semblent la rejeter sur une question de principe (NS4 et IE4 ne gèrent pas parfaitement CSS1) alors qu'il s'agit d'une solution de compromis (ou il faut évidement utiliser uniquement les instructions CSS1 gérées par ces navigateurs) -- EricSegui
- Cette page a le mérite d'exister, pourtant elle me semble très imparfaite :
- Quelques propos rapides [fr], tirés d'un entretien avec Jeffrey Zeldman, sur l'intérêt des CSS, les rapports entre tableaux et "box model" CSS2, le support actuel des navigateurs.
- Une page d'exemple Erreur 404 le 13/06/04 [en], par Eric A. Meyer, montrant les nombreuses possibilités des feuilles de style.
- CSS Zen Garden [fr], de grande qualité graphique, par Dave Shea : un menu vous permet de sélectionner votre feuille de style. Visite guidée à travers 29 exemples choisis pour leur diversité graphique et technique :
- design original de la page : http://www.csszengarden.com/
- rouge onirique : http://www.csszengarden.com/?cssfile=http://joeblade.com/zen/spanky/zengarden-spanky.css
- vert gazéifié : http://www.csszengarden.com/?cssfile=http://www.snooble.com/zen/feet/zengarden.css
- industriel : http://www.csszengarden.com/?cssfile=035%2F035%2Ecss
- ludique : http://www.csszengarden.com/?cssfile=031%2F031%2Ecss
- visage coloré (design horizontal) : http://www.csszengarden.com/?cssfile=037%2F037%2Ecss
- petit déjeuner (menus déroulants) : http://www.csszengarden.com/?cssfile=057%2F057%2Ecss
- l'oeil du lézard : http://www.csszengarden.com/?cssfile=054%2F054%2Ecss
- punk moderne : http://www.csszengarden.com/?cssfile=051%2F051%2Ecss
- chronospost : http://www.csszengarden.com/?cssfile=052%2F052%2Ecss
- vidéo : http://www.csszengarden.com/?cssfile=066%2F066%2Ecss
- css zen garden tribune ! : http://www.csszengarden.com/?cssfile=091%2F091%2Ecss
- radio zen : http://www.csszengarden.com/?cssfile=058%2F058%2Ecss
- orange : http://www.csszengarden.com/?cssfile=026%2F026%2Ecss
- bois : http://www.csszengarden.com/?cssfile=http://home.comcast.net/~glyphfoundry/zengarden/zengarden.css
- biseaux : http://www.csszengarden.com/?cssfile=040%2F040%2Ecss
- 70's bleu : http://www.csszengarden.com/?cssfile=071%2F071%2Ecss
- idéographique : http://www.csszengarden.com/?cssfile=http://www.ict-id.nl/wisbin/html/websites/redesign/csszengarden/orange_delight.css
- minimal : http://www.csszengarden.com/?cssfile=http://www.lodger2.fsnet.co.uk/gus/zengarden/rake.css
- floral : http://www.csszengarden.com/?cssfile=http://www.prade.org/nicolas/zen/tremiere/tremiere.css
- un design, du vin, une CSS : http://www.csszengarden.com/?cssfile=http://www.underslept.com/zengarden/001/001.css
- compact (noir et blanc) : http://www.csszengarden.com/?cssfile=http://deep.etherealtf.net/zen/ezen.css
- retour au papier : http://www.csszengarden.com/?cssfile=/095/095.css&page=0
- architecture moderne : http://www.csszengarden.com/?cssfile=/094/094.css&page=0
- coloré et tendance : http://www.csszengarden.com/?cssfile=077%2F077%2Ecss
- xfiles ? (fond fixe) http://www.csszengarden.com/?cssfile=http://www.madcowwwebdesign.com/zen/tjk.css
- navigation par onglets : http://www.csszengarden.com/?cssfile=http://www.prade.org/nicolas/zen/lighthouse/lighthouse.css
- éclairé : http://www.csszengarden.com/?cssfile=http://www.qviri.net/zen/styl.css
- fou ! http://www.csszengarden.com/?cssfile=http://www.danikkdesign.com/zengarden/text.css
- de plus en plus fou : http://csszengarden.com/?cssfile=/099/099.css&page=0
- La rubrique CSS du site openweb.eu.org [fr] : le site de référence en la matière.
- Why tables for layout is stupid [en], par Bill Merikallio et Adam Pratt : un diaporama très clair et très complet sur la question des CSS et du marquage structurel : un document incontournable...
- Le Tao du web designer (fr) , ou l'interêt de séparer le fond de la forme, car web et papier ne sont pas pareil. Pour bien comprendre la philosopie qui guide l'usage des CSS.
La norme
- Recommandation CSS1 du W3C (1996, révisée en 1999) [fr] (en version PDF (267 Ko), par Gilles Accad)
- Recommandation CSS2 du W3C (1998) [fr] (en version PDF (1648 Ko), par Gilles Accad)
- Appendice B de CSS2 : les changements depuis CSS1 [fr]
- Document de travail sur la future recommandation CSS2.1 [en]
- Extrait du précédent document, CSS2.1 versus CSS2 [en], une courte introduction.
- Extrait du précédent document, Appendice C. Changes (between CSS2.1 and CSS2) [en], présentation détaillée des changements.
- Document de travail sur la future recommandation CSS3 [en]
- Le W3C propose en outre un service permettant de valider la conformité d'une feuille CSS avec la norme [fr]
- Le tao du web designer, ou l'intéret de séparer le fond de la forme, car papier et web ne sont pas pareil.
Livres
Cours et tutoriels
- Tutoriel CSS pour débutants [fr]
- Cours et Tutoriaux variés : créer un menu, centrer un site, modèles de mises en page,... [fr]
- Un cours complet détaillant chaque attribut, avec de nombreux exemples [fr]
- D'autres tutoriels très didactiques [fr]
- Beaucoup de tutoriels spécialisés [en] : mise en page 2, 3 ou 4 colonnes, centrages, etc.
- floatutorial [en] : une série de tutoriels simples présentant différentes mises en page avancées en CSS. Les mises en page sont effectuées pas à pas ; le code est publié dans le corps du texte. (A voir absolument.)
- Techniques et astuces pratiques pour une mise en page CSS [fr]
- Les tutoriels d'Alsacréations [fr], nombreux, variés et de bonne facture.
Forums
- Les forums d'Alsacréations [fr], Standards web et CSS.
Listes de diffusion
Éditeurs et outils relatifs aux feuilles de style CSS
- CaScadeS [en] (logiciel libre, multi plateformes), éditeur pour Mozilla. L'intégration à Mozilla permet, à partir de la petite "palette" flotante composant son interface, de visualiser les modifications en temps réel sur la page affichée en second plan (cette
d'une version ancienne donne une petite idée du résultat). - TopStyle Lite pour Windows [en]
- CssEditors [en] : liste d'éditeurs CSS sur le wiki de CSS-discuss.
- Web Development Bookmarklets [en] : plus d'une quinzaine d'outils indispensables en JavaScript. Des outils vraiment incontournables : "edit style" (pour Mozilla), par exemple, permet de modifier en temps réel la feuille de style d'une page ; "computed styles" calcule et liste tous les styles affectés à un élément, permettant de déboguer facilement un comportement inattendu ; etc.
- La dernière version de Dreamweaver, "MX 2004", semble offrir un support intéressant des CSS [fr].
- La "Web Developer extension" [en], indispensable extension pour Mozilla destinée à tous les développeurs web en général et CSS en particulier.
- NVU [en] : la reprise du composer de Mozilla. La version est encore en développement mais promet un bel avenir. -- JeanMorlet
- Scite [fr], est un éditeur de texte multi-plateforme qui offre la coloration syntaxique du code CSS, indique en rouge les erreurs syntaxiques et permet la complétion des propriétés CSS.
Générateurs de code CSS en ligne
- Layout-o-matic [en] : génère le code CSS d'une mise en page en une, deux ou trois colonnes (assure la compatibilité avec les navigateurs au support CSS défaillant)
- List-o-matic [en] : génère le code CSS pour des éléments d'interface à base de listes : menus divers, onglets, etc.
Quelques retours d'expériences sur les CSS
- Conversion du site Wired en XHTML + CSS [en], où Douglas Bowman détaille la mise en oeuvre et les gains quantitatifs et qualitatifs.
- Emmanuel Clément refont le site Nantes.fr [fr] et détaille tous les gains (poids de pages, images, etc.)
- Un autre exemple [en], par Eric A. Meyer.
- Un petit essai de mise en conformité [fr] de la page d'accueil du Ministère de l'éducation nationale : mise en oeuvre détaillée et gains, par LaurentDenis.
- Netscape DevEdge Redesign: CSS [en]. Eric A. Meyer explique pas à pas le redesign du site.
- Le site brésilien tableless.com.br [pt] montre une demi-douzaine d'exemples de sites institutionnels codés à partir de tables et leur équivalent codé sans table avec des CSS : de visu, il n'y a aucune différence ; mais la différence au niveau du code source est flagrante : gains de poids et lisibilité.
- Gallerie de sites tout en CSS [en] : permet d'évaluer la richesse et la diversité des possibilités graphiques offertes par les CSS.
Le support des CSS dans les divers navigateurs
- Mozilla (1.0 et suivants) et Opera 7 sont unanimement reconnus comme les navigateurs supportant le mieux les feuilles de styles CSS1 et CSS2. Mozilla semble même s'offrir le luxe de gérer d'ores et déjà des attributs CSS3 comme dans cet exemple.
- Un tableau assez complet sur le support CSS2 [en] où l'on observe, d'un strict point de vue quantitatif (discutable), qu'Opera 7 devance Mozilla d'une courte tête, ces deux derniers surpassant largement, dans l'ordre, Konqueror, Opera? 5 et 6, Internet Explorer 5 Mac, IE 6, etc. On notera la différence importante entre IE 5 Mac et IE 6 Win, à l'avantage du premier...
- Will the browser apply the rule(s)? [en] : tableau synthétique du support par les principaux navigateurs des attributs permettant le contournement de leurs bogues.
- Un test remarquablement simple pour savoir si votre navigateur préféré est compatible avec le fameux "box model" introduit dans les CSS2.
- Un contournement du bogue d'IE (5-5.5) relatif au tailles dans le modèle de boîte CSS1 [en].
- Windows Explorer vs. the Standards [en], liste tous les bogues d'Internet Explorer relatifs au support des standards.
- Box Model Fix [en] est un JavaScript capable de convertir à la volée du code CSS valide en code bogué à la Internet Exporer. La page propose une démonstration, preuve à l'appui.
- Spécifications supportées par Opera 7.
- Spécifications CSS 2.1 supportées par khtml 3.1 (Konqueror et potentiellement Safari).
- Spécifications CSS 1.0 et CSS 2.0 non supportées par Safari.
- Navigateurs supportant les CSS pour l'impression [en].
- Les navigateurs textuels, comme LynX ou Links, ne supportent pas les CSS.
Les pratiques
- Gérer les modèles de boîtes CSS standard et Microsoft [fr], par LaurentDenis.
- Un script PHP pour éviter le Box Model Hack [fr], par Batiste Bieler.
- Le wiki de CSS-Discuss [en] est le lieu incontournable pour parler des pratiques sur les CSS.
- Overflow avec fond fixe en CSS [fr], par Olivier Meunier : ou comment gérer du texte dans une boite avec ascenseur dans une page Web.
- Initiation au centrage en CSS [fr], par LaurentDenis.
- Employer correctement l'attribut title avec des feuilles de style externes [en/fr], par Eric A. Meyer (trad. française LaurentDenis).
- Changer de présentation à la volée [en] avec un aiguilleur de feuilles de style en JavaScript, par Paul Sowden. On lira en outre, une application de cette technique [en] par Eric A. Meyer et Susie Wyshak, ainsi que l'impressionante page d'exemple d'Eric A. Meyer.
- Avec ou sans tableaux ???
- le couperet [en] d'Evolt.org, introduit en français par Denis Boudreau.
- Une instructive réponse [fr], de LaurentDenis, à travers un exemple concrêt.
- Une autre réponse [en] sur le wiki de CSS-Discuss, très simple et claire, à travers un exemple didactique.
- Un exemple de tableau en CSS [fr] par Karl Dubost, qui inspire à Tristan Nitot une "mise au point" [fr] synthétique sur le sujet.
- Les problèmes de la mise en page par tableaux [fr], par Mathieu Pillard : un document incontournable.
- Habillage de tableaux avec des CSS, par Pascale Lambert.
- Why tables for layout is stupid [en], par Bill Merikallio et Adam Pratt : un diaporama très clair et très complet sur la question.
- L'usage d'unités de taille relatives (em et %) [en], par Ian Hixie ; commenté en français par Tristan Nitot. Le Wiki de CSS-Discuss propose une série d'articles sur le sujet, en page d'accueil [en] (cf. "Sizing text").
- Karl Dubost nous guide dans la lecture de la norme et nous dit tout sur la propriété CSS width [avec] float [fr].
- Properly Using CSS and JavaScript in XHTML Documents [en], par Bob Clary.
- Des onglets de navigation en CSS [en] (non supporté par Netscape 4.7 (le contenu est néanmoins correctement affiché, sous la forme de puces)).
- Un tutoriel complet sur les menus en CSS [en], par Al Sparber.
- Liens vers des sites externes en CSS [en]. Cet article de Shirley E. Kaiser offre une bonne synthèse des différents moyens de réaliser des liens visuellement différenciés vers les sites externes d'un site donné.
- Plus de trente patrons CSS prêts à l'emploi [en], pour une mise en page en 1, 2 ou 3 colonnes ; par le Nemesis Project.
- Les mini-icônes et boutons en CSS :
- Advert Buttons using pure CSS v2.0 [en], par Mike Golding (avec des jeux de boutons représentant les normes du W3C, etc.).
- Buttons without Javascript [en].
- Des boutons représentant les normes du W3C [en].
- Une autre série [en], par Petr Stanicek.
- Mini-icônes en CSS [en].
- Listamatic [en], LE panorama complet des techniques pour styler des listes (avec le code, les exemples visuels et un tableau de support des navigateurs).
- Listutorial [en] est un tutoriel complet pour la création de listes stylées.
- Zoomer une image [fr] au passage de la souris sur l'image, uniquement via des CSS. Par Pascale Lambert-Charreteur.
- Des tableaux plus simples [fr], par Frédéric Cavazza.
- Des formulaires plus simples [fr], par Frédéric Cavazza.
- Méthodologie pour résoudre les problèmes d'affichage en CSS [fr].
Fournisseurs commerciaux compétants en matière de design web nouvelle génération
Les sociétés ici listées sont compétentes sur les techniques de design avancées avec des CSS.- Alsacréations : "Alsacréations est un prestataire de choix spécialisé dans les petites structures et les sites Grand-Public. [...] L'accessibilité est un facteur essentiel de la réussite des sites Grand Public. C'est pour cela qu'il existe des Standards du Web et que nous essayons de les respecter...". Alsacréation propose par ailleurs de nombreux tutoriels CSS sur leur site.
- ceforweb [fr], centre de Formation à l'accessibilité et aux standards du Web. Le site web laisse présager une offre sérieuse sur la base de connaissances éprouvées.
L'avenir avec les CSS
- Les CSS2 sont encore loin d'être complètement intégrées par les navigateurs, notamment sur des points intéressant fortement l'ergonomie des sites. CSS3, quant à lui, mûrit en laboratoire et nous en proposerons ici un apperçu.
- Les améliorations ergonomiques de CSS2 :
- des menus déroulant exclusivement en CSS [en] (sans JavaScript) (MoZilla seulement)
- des puces graphiques systématisées [fr] pour tout style donné (MoZilla, Opera ? autres ?)
- des notes de pied de page [en] (Mozilla et Safari)
- Le support des navigateurs des propriétés CSS 3 [en], par CodeBitch?.
- Des exemples très avant-gardistes [en]
- Why the Web will look better with Safari 1.1 [en], par Frank Limbacher. Où l'auteur montre le support de propriétés CSS3 par Safari qui permettent de créer des ombrages complexes et des effets de transparence.
- CSS3 est "candidat à recommandation" [en] (11/05/2003).
Faq sur les CSS
1. CSS ?
"CSS" est l'abbréviation de l'expression anglophone "Cascading Style Sheet". Cette expression signifie littéralement des "Feuilles de style en cascades".En français l'usage est de dire "les CSS". Par exemple
2. Quelle différence y-a-t'il entre les CSS1 et les CSS2 ?
[tentative de réponse à préciser]Nous listons ici les apports principaux de CSS2 :
- CSS2 introduit des propriétés avancées de positionnement des éléments dans la page (en plus du positionnement statique existant, par défaut, dans CSS1, les positionnements relatifs, absolus, fixes)
- CSS2 améliore les règles d'écriture des cultures extra-occidentales (textes bidirectionnels, style de numérotage, marques de citation)
- CSS2 introduit les types de média, permettant une mise en forme différente du même contenu selon le type de média
- CSS2 introduit les "média paginés" (sorties sur imprimante) en plus des "média continus" (affichage dans un navigateur) : il devient possible de faire de la mise en page fine pour ces média
3. Quels navigateurs gèrent complètement CSS1 ?
- Opera 7 se targue de gérer complètement CSS1.