Introduction.Design By Numbers.Processing.Actionscript.PHP.C++.Java.HTML.DHTML.XHTML.
CSS.Javascript.XML.AIML.
Css Débutant est une bonne référence
pour démarrer.Pour aller plus loin:
CSS : on reprend tout à zéro ! est un
dossier en 12 épisodes réqlisé initialement par Joe Gillespie, et traduit ici sur le site Pompage, qui contient un bon nombre d'excellentes traductions inédites d'articles anglo-saxons, notamment sur les CSS.
Layout Gala propose des pages "templates" bien conçues qui vous aideront à expérimenter des solutions.
CSS Zen garden est un très impressionnant exercice de CSSproposant des déclinaisons graphiques d'un même contenu,
à l'initiative de David Shea.
HTML a été conçu par Tim Berners-Lee pour STRUCTURER LE CONTENU d'une page web à l'aide de balises.
AUjourd'hui, CSS (Cascading Style Sheets ou Feuilles de style en cascade) est utilisé pour DÉCRIRE LA PRÉSENTATION d'un document HTML ou XHTML, son descendant naturel.
CSS a vu le jour avec le HTML 4 pour palier aux limites graphiques des balises HTML.
Toutes les informations destinées aux comportements graphiques des contenus peuvent désormais être définies par des instructions spécifiques, permettant le contrôle de la cohésion et de l'aspect des pages.
On appelle ces instructions "feuilles de style en cascade" car on peut définir plusieurs style, et en cas de redondance, un ordre de priorité est donné au navigateur. Séparant la présentation du contenu, les feuilles de style permettent un chargement plus rapide des pages, et facilitent les manipulations graphiques sur des ensembles de pages. Cette approche est généralisée dans le cas de sites dynamiques (blogs, spip, etc) et autres systèmes de gestion de contenus.
Il est possible de définir des caractéristiques rigoureuses de mise en forme pour chaque élément et de les appliquer à des ensembles de pages, ou à un site entier: contrôle des polices (fonte, taille, graisse, couleur, etc), contrôle de la distance entre les lignes, contrôle des marges et des indentations, positionnement au pixel près du texte et/ou des images, etc.
La définition de ces "styles" peut être inclue dans la page HTML (entre les balises <head>) ou en dehors de celle-ci, dans un fichier séparé portant l'extension .css. Dans ce cas, il suffit donc de changer un style pour agir automatiquement sur tous les éléments HTML correspondants, dans l'entièreté du site.
Il existe 3 méthodes pour utiliser une feuille de styles :
Je vous recommande définitivement de naviguer avec Firefox et SURTOUT son extension Web developer qui permet une manipulation et une consultation optimale des CSS.
Firebug est également un outil intéressant pour la compréhension et la gestion des CSS.
Enfin, HTML Validator (disponible uniquement sous Windows) permet une visualisation très claire des blocs CSS.
Voir une capture d'écran ici.
Css Débutant.
Un bon point de départ, par Pascale Lambert-Charreteur.
CSS : on reprend tout à zéro ! Une série en 15 excellents articles de Joe Gillespie traduits sur Pompage.
L'ensemble
des propriétés CSS. Une documentation proposée sur Media-box.
W3 School CSS Tutorial. Apprentissage et exemples.
Comprendre le positionnement des éléments en CSS. Tuto sur AlsaCréations.
CSS Cheat Sheet. Aide-mémoire des propriétés CSS.
Openweb. Un bon répertoire d'articles bien documentés.
Alsacréations. Cours, astuces et tutoriels XHTML et CSS.
CSS Vault. Catalogue de feuilles de styles, par Paul Scrivens.
Présentation des feuilles de style. Historique, syntaxe, implantation sur Comment ça marche ?
Feuilles de style en cascade. Un article sur Wikipedia.
Les feuilles de style. Un dossier du CERIG. Voir aussi la typographie du web et les CSS.
Maîtriser le HTML. Chapitre CSS, sur le site de référence de Luc Van Lancker.
Cybercodeur. Une argumentation convaincante en faveur des CSS.
Mise en page sans tableau pas à pas. Recommendations W3.
Écrire des feuilles de styles efficaces. Un dossier traduit par Pompage.
Quirksmode. Le site de Peter-Paul Koch, nombreuses ressources, CSS, javascript, etc.
Well styled. Par Petr Stanicek.
W3 CSS homepage. Infos et actualités CSS sur le site W3. Voir aussi Learning CSS.
W3 CSS validator. Service de validation CSS.
En voici une traduction, contenant elle-même le lien vers leur version respective et officielle du W3:
Recommandations CSS (niveau 1) du W3 en français. Sur Yoyo Design.
Recommandations CSS (niveau 1) du w3 en français (PDF). Sur Syntaxorror.
Recommandations CSS (niveau 2) du W3 en français. Sur Yoyo Design.
Recommandations CSS (niveau 2) du w3 en français (PDF). Sur Syntaxorror.
Cybercodeur. Une argumentation convaincante en faveur des CSS suprimant la mise en page par tableaux.
Layout Gala. Différentes mises en pages sans tableaux.
The layout reservoir. Des codes source de CSS plutôt élégantes.
Les colonnes factices. Un article de Dan Cederholm sur Pompage.
Faire une mise en page sans tableaux. Conseils et tutos sur AlsaCréations.
Page fluide avec 3 colonnes.
Css Maxdesign. Excellent tuoriaux spécialisés par Anna Gregg et Russ Weakley de MaxDesign.
Float tutorial. Tutorial dédié à la commande "float" de CSS par Russ Weakley.
Selectutorial. Tutorial dédié aux sélecteurs d'attributs de CSS par Russ Weakley.
CSS edge. Des modèles de CSS sur Meyer Web.
Brain jar. Tutos CSS (entre autres) sur ce site d'expérimentations.
Tabs. Navigation entre tableaux en CSS sur Brain jar.
CSS Positioning. Tutoriel complet sur les boîtes fixes ou flottantes, sur Brain jar.
The simplest way to horizontally and vertically center a DIV. Tuto sur DezingnerFolio.
CSS layout technique. Exemples et commentaires de Eric Costello sur Glish.com.
Menus dynamiques. Un menu horizontal et un vertical par Batiste Bieler sur son site doSimple.
Menus en CSS. Conseils et tutos sur AlsaCréations.
Une image réactive en CSS avec une seule image et sans javascript.Tuto sur AlsaCréations.
Listamatic. Tutorial de liste avec CSS par Russ Weakley.
Listamatic2. Tutorial de liste avec CSS par Russ Weakley.
Listutorial. Tutorial de liste avec CSS par Russ Weakley.
CSS Design: Taming Lists. Contrôler une liste de liens.
Mini-Tab Shapes. Tutorial de menus avec CSS par Dan Cederholm.
Sliding Doors of CSS. Un article de Douglas Bowman sur A List Apart.
Typetester. Outil en ligne de comparaison de fontes. sur maratz.com.
Font Tester. Outil en ligne de comparaison de fontes.
Jeff Howard: Font Comparison. Outil en ligne de comparaison de fontes.
Table of most used web-fonts. Un Tableau de comparaison sur maratz.com.
Cadres arrondis. Conseils et tutos sur AlsaCréations.
CSS: un cadre en image. Un tutoriel de Laurent Jouanneau.
Bords arrondis extensibles en XHTML/CSS.
Doug's 4 Rounded Corners. Coins arrondis en XHTML + CSS.
RoundedCorners. Coins arrondis avec CSS sur CSS-discuss Wiki.
Curvelicious. Coins arrondis sur Meyer Web.
Style switcher. Passer d'une feuille de style à l'autre en un clic, par Paul Sowden sur A list apart.
Working With Alternate Style Sheets. Permettre un choix de style à l'utilisateur.
Gérer les modèles de boîtes CSS standard et Microsoft. Tuto sur Openweb.
A propos du Modèle de boîte Microsoft (ou "quirks"). Tuto sur AlsaCréations.
Gérer les modèles de boîtes CSS standard et Microsoft. Tuto "expert" sur mandragor.
CSS: décoration de boutons. Un tutoriel de Laurent Jouanneau.
Slantastic. Cadre avec forme irrégulière sur Meyer Web.
Ragged Float. Le texte suit le contour d'une image sur Meyer Web.
Holy CSS Zeldman ! Liens CSS collectés par Andrew Fernandez.
CSS pointers. Une liste de liens utiles et très complète.
Web monkey. Tutoriel complet.
XHTML and CSS guide. Association de CSS et XHTML pour plus de compatibilité.
CSS et WordPress : Comment créer son thème de A à Z.
A List Apart. Design, développement et signification des contenus web, standards et bonnes pratiques.
StopDesign. Webdesign fonctionnel et CSS de Douglas Bowman.
SimpleBits. Webdesign fonctionnel et CSS de Dan Cederholm.
CSS, a guide for unglued. Une liste de liens de référence sur le très documenté the noodle incident.
Simple Css. Éditeur de CSS (Mac OSX, Windows et linux). gratuit, simple. Le télécharger ici.
NotePad++. Éditeur de code (Windows). Voir une description sur Framasoft.
Smultron. Éditeur de code (Mac OSX). Voir une description sur Framasoft.
KompoZer. Logiciel libre de création et d’administration de pages web. Voir une description sur Framasoft.
Anyedit. Éditeur de code pour Windows capable de lire et de souligner en couleur n’importe quel code.
CSS Edit. Éditeur de CSS.
Top style Lite. Éditeur de CSS assez efficace (Windows), gratuit dans la version “lite”. Le télécharger ici.
Générateur de CSS. Proposé par Mammouth land. Voir aussi CSS débutant.
Générateur de CSS. Proposé par Webyo.
Générateur de CSS. Proposé par jejavascript et téléchargeable !
Color Schemes generator.
Grid Layout. Système de grille basé sur JQuery.
Grid calculator. Calcul de la surface d'une page.
Grid systems in Web Design.
Grid Computing… and Design. Un article de Khoi Vinh sur substraction.
Layers Cake. Un article de Khoi Vinh sur substraction.
AUjourd'hui, CSS (Cascading Style Sheets ou Feuilles de style en cascade) est utilisé pour DÉCRIRE LA PRÉSENTATION d'un document HTML ou XHTML, son descendant naturel.
CSS a vu le jour avec le HTML 4 pour palier aux limites graphiques des balises HTML.
Toutes les informations destinées aux comportements graphiques des contenus peuvent désormais être définies par des instructions spécifiques, permettant le contrôle de la cohésion et de l'aspect des pages.
On appelle ces instructions "feuilles de style en cascade" car on peut définir plusieurs style, et en cas de redondance, un ordre de priorité est donné au navigateur. Séparant la présentation du contenu, les feuilles de style permettent un chargement plus rapide des pages, et facilitent les manipulations graphiques sur des ensembles de pages. Cette approche est généralisée dans le cas de sites dynamiques (blogs, spip, etc) et autres systèmes de gestion de contenus.
Il est possible de définir des caractéristiques rigoureuses de mise en forme pour chaque élément et de les appliquer à des ensembles de pages, ou à un site entier: contrôle des polices (fonte, taille, graisse, couleur, etc), contrôle de la distance entre les lignes, contrôle des marges et des indentations, positionnement au pixel près du texte et/ou des images, etc.
La définition de ces "styles" peut être inclue dans la page HTML (entre les balises <head>) ou en dehors de celle-ci, dans un fichier séparé portant l'extension .css. Dans ce cas, il suffit donc de changer un style pour agir automatiquement sur tous les éléments HTML correspondants, dans l'entièreté du site.
 |
Télécharger un dossier .zip avec des exemples et des tests (81 Ko). Voir ces exemples en ligne : |
 |
Télécharger le PDF de la projection utilisée en classe (PDF - 1,1 Mo). |
Il existe 3 méthodes pour utiliser une feuille de styles :
|
1 - Un fichier CSS externe : |
|
Très pratique lorsque vos styles doivent s'appliquer à l'ensemble d'un site. |
|
2 - Une feuille de styles interne : |
|
Cette méthode est plus appropriée lorsque l'on souhaite définir des styles plus ponctuellement.
<head> <p class="code">Ce texte s'affichera selon les propriétés CSS choisies et leur valeur</p> |
|
3 - Des styles intégrés ponctuellement aux balises : |
|
Cette solution (complexe à gérer massivement) peut être utile dans certains cas.
<p style="color:#000000; margin-left:20px"> |
Je vous recommande définitivement de naviguer avec Firefox et SURTOUT son extension Web developer qui permet une manipulation et une consultation optimale des CSS.
Firebug est également un outil intéressant pour la compréhension et la gestion des CSS.
Enfin, HTML Validator (disponible uniquement sous Windows) permet une visualisation très claire des blocs CSS.
Voir une capture d'écran ici.
Documents à consulter en priorité :
Css Débutant.
Un bon point de départ, par Pascale Lambert-Charreteur.CSS : on reprend tout à zéro ! Une série en 15 excellents articles de Joe Gillespie traduits sur Pompage.L'ensemble
des propriétés CSS. Une documentation proposée sur Media-box.
W3 School CSS Tutorial. Apprentissage et exemples.Comprendre le positionnement des éléments en CSS. Tuto sur AlsaCréations.CSS Cheat Sheet. Aide-mémoire des propriétés CSS.Openweb. Un bon répertoire d'articles bien documentés.Alsacréations. Cours, astuces et tutoriels XHTML et CSS.CSS Vault. Catalogue de feuilles de styles, par Paul Scrivens.Présentation des feuilles de style. Historique, syntaxe, implantation sur Comment ça marche ?Feuilles de style en cascade. Un article sur Wikipedia.Les feuilles de style. Un dossier du CERIG. Voir aussi la typographie du web et les CSS.Maîtriser le HTML. Chapitre CSS, sur le site de référence de Luc Van Lancker.Cybercodeur. Une argumentation convaincante en faveur des CSS.Mise en page sans tableau pas à pas. Recommendations W3.Écrire des feuilles de styles efficaces. Un dossier traduit par Pompage.Quirksmode. Le site de Peter-Paul Koch, nombreuses ressources, CSS, javascript, etc.Well styled. Par Petr Stanicek.
CSS Box Model Demo :
|
Alsa Creations : Comment positionner les éléments en CSS : |
Documents de référence (W3C) :
W3 CSS homepage. Infos et actualités CSS sur le site W3. Voir aussi Learning CSS.W3 CSS validator. Service de validation CSS.En voici une traduction, contenant elle-même le lien vers leur version respective et officielle du W3:
Recommandations CSS (niveau 1) du W3 en français. Sur Yoyo Design.Recommandations CSS (niveau 1) du w3 en français (PDF). Sur Syntaxorror.Recommandations CSS (niveau 2) du W3 en français. Sur Yoyo Design.Recommandations CSS (niveau 2) du w3 en français (PDF). Sur Syntaxorror.
Mise en page sans tableau :
Cybercodeur. Une argumentation convaincante en faveur des CSS suprimant la mise en page par tableaux.Layout Gala. Différentes mises en pages sans tableaux.The layout reservoir. Des codes source de CSS plutôt élégantes.Les colonnes factices. Un article de Dan Cederholm sur Pompage.Faire une mise en page sans tableaux. Conseils et tutos sur AlsaCréations.Page fluide avec 3 colonnes.Css Maxdesign. Excellent tuoriaux spécialisés par Anna Gregg et Russ Weakley de MaxDesign.Float tutorial. Tutorial dédié à la commande "float" de CSS par Russ Weakley.Selectutorial. Tutorial dédié aux sélecteurs d'attributs de CSS par Russ Weakley.CSS edge. Des modèles de CSS sur Meyer Web.Brain jar. Tutos CSS (entre autres) sur ce site d'expérimentations.Tabs. Navigation entre tableaux en CSS sur Brain jar.CSS Positioning. Tutoriel complet sur les boîtes fixes ou flottantes, sur Brain jar.The simplest way to horizontally and vertically center a DIV. Tuto sur DezingnerFolio.CSS layout technique. Exemples et commentaires de Eric Costello sur Glish.com.Listes et menus :
Menus dynamiques. Un menu horizontal et un vertical par Batiste Bieler sur son site doSimple.Menus en CSS. Conseils et tutos sur AlsaCréations.Une image réactive en CSS avec une seule image et sans javascript.Tuto sur AlsaCréations.Listamatic. Tutorial de liste avec CSS par Russ Weakley.Listamatic2. Tutorial de liste avec CSS par Russ Weakley.Listutorial. Tutorial de liste avec CSS par Russ Weakley.CSS Design: Taming Lists. Contrôler une liste de liens.Mini-Tab Shapes. Tutorial de menus avec CSS par Dan Cederholm.Sliding Doors of CSS. Un article de Douglas Bowman sur A List Apart.Fontes :
Typetester. Outil en ligne de comparaison de fontes. sur maratz.com.Font Tester. Outil en ligne de comparaison de fontes.Jeff Howard: Font Comparison. Outil en ligne de comparaison de fontes.Table of most used web-fonts. Un Tableau de comparaison sur maratz.com.Cadres avec coins arrondis :
Cadres arrondis. Conseils et tutos sur AlsaCréations.CSS: un cadre en image. Un tutoriel de Laurent Jouanneau.Bords arrondis extensibles en XHTML/CSS.Doug's 4 Rounded Corners. Coins arrondis en XHTML + CSS.RoundedCorners. Coins arrondis avec CSS sur CSS-discuss Wiki.Curvelicious. Coins arrondis sur Meyer Web.Permettre le choix d'un style :
Style switcher. Passer d'une feuille de style à l'autre en un clic, par Paul Sowden sur A list apart.Working With Alternate Style Sheets. Permettre un choix de style à l'utilisateur.Hacks Internet Explorer :
Gérer les modèles de boîtes CSS standard et Microsoft. Tuto sur Openweb.A propos du Modèle de boîte Microsoft (ou "quirks"). Tuto sur AlsaCréations.Gérer les modèles de boîtes CSS standard et Microsoft. Tuto "expert" sur mandragor.Divers :
CSS: décoration de boutons. Un tutoriel de Laurent Jouanneau.Slantastic. Cadre avec forme irrégulière sur Meyer Web.Ragged Float. Le texte suit le contour d'une image sur Meyer Web.Holy CSS Zeldman ! Liens CSS collectés par Andrew Fernandez.CSS pointers. Une liste de liens utiles et très complète.Web monkey. Tutoriel complet.XHTML and CSS guide. Association de CSS et XHTML pour plus de compatibilité.CSS et WordPress : Comment créer son thème de A à Z.Inspiration :
A List Apart. Design, développement et signification des contenus web, standards et bonnes pratiques.StopDesign. Webdesign fonctionnel et CSS de Douglas Bowman.SimpleBits. Webdesign fonctionnel et CSS de Dan Cederholm.CSS, a guide for unglued. Une liste de liens de référence sur le très documenté the noodle incident.Éditeurs :
Simple Css. Éditeur de CSS (Mac OSX, Windows et linux). gratuit, simple. Le télécharger ici.NotePad++. Éditeur de code (Windows). Voir une description sur Framasoft.Smultron. Éditeur de code (Mac OSX). Voir une description sur Framasoft.KompoZer. Logiciel libre de création et d’administration de pages web. Voir une description sur Framasoft.Anyedit. Éditeur de code pour Windows capable de lire et de souligner en couleur n’importe quel code.CSS Edit. Éditeur de CSS.Top style Lite. Éditeur de CSS assez efficace (Windows), gratuit dans la version “lite”. Le télécharger ici.Générateurs en ligne :
Générateur de CSS. Proposé par Mammouth land. Voir aussi CSS débutant.Générateur de CSS. Proposé par Webyo.Générateur de CSS. Proposé par jejavascript et téléchargeable !Color Schemes generator.Grilles :
Grid Layout. Système de grille basé sur JQuery.Grid calculator. Calcul de la surface d'une page.Grid systems in Web Design.Grid Computing… and Design. Un article de Khoi Vinh sur substraction.Layers Cake. Un article de Khoi Vinh sur substraction.
M'écrire - Newsletter - À propos de ce site