Introduction.Design By Numbers (DBN).HTML.DHTML (Dynamic HTML).
CSS (cascading style sheets).Java.Javascript.Actionscript.PHP.C++.XML.AIML.
CSS Zen garden est un impressionnant exercice de CSSproposant des déclinaisons graphiques d'un même contenu,
à l'initiative de David Shea.
Voir le style présenté ci-dessus.
L'ensemble
des propriétés CSS est une documentationproposée sur Media-box.
Pompage contient un bon nombre d'excellentes traductions inédites d'articles anglo-saxonssur les CSS.
À l'origine, le langage HTML a été conçu par Tim Berners-Lee pour structurer et définir le contenu d'une page web à l'aide de balises. Avec l'évolution naturelle de ce langage, liée aux progrès techniques des réseaux, les feuilles de styles ou CSS (Cascading Style Sheets) ont vu le jour avec le HTML 4 pour palier aux limites graphiques des balises HTML. Aujourd'hui, le XHTML (EXtensible HyperText Markup Language) précise encore cette tendance grâce à une syntaxe plus stricte.
Toutes les informations destinées aux comportements graphiques des contenus peuvent être désormais stockées en dehors du fichier html, dans une feuille de styles séparée. Ces feuilles de style externes (.css) permettent de contrôler l'aspect des pages en modifiant uniquement le fichier CSS associé aux documents. Il est possible de définir des styles spécifiques, des caractéristiques rigoureuses de mise en forme pour chaque élément (typo, taille, marges, comportement, couleur, etc) et les appliquer à des ensembles de pages, ou à un site entier. Pour faire des modifications générales sur la globalité d'un site, il suffit donc de changer un style pour agir automatiquement sur tous les éléments HTML correspondants.
On appelle ces instructions "feuilles de style en cascade" car on peut en définir plusieurs, et en cas de redondance de style, un ordre de priorité est donné au navigateur. Les feuilles de style permettent l'homogènéité d'un site, des chargements de page plus rapides, et facilitent les manipulations graphiques sur des ensembles de pages en séparant la présentation du contenu. Cette approche est généralisée dans le cas de sites dynamiques (weblogs, spip, etc) et autres systèmes de gestion de contenus.
Les documents de référence concernant les CSS sont publiés sur le site du W3.
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.
CSS Cheat Sheet. Récapitulatif des commandes CSS à télécharger (PDF)
Documentation CSS. Documents à télécharger (PDF) sur Comment ça marche ?
Documentation CSS. Documents à télécharger (PDF ou.doc) sur Maîtriser le HTML.
Pour terminer cette introduction, je vous recommande définitivement de naviguer avec Firefox
et son extension Web developer qui permet une manipulation et une consultation optimale des CSS.
Présentation des feuilles de style. Historique, syntaxe, implantation sur Comment ça marche ?
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.
CSS Zen garden. Bon nombre d'idées et d'exemples, à l'initiative de David Shea.
CSS Vault. Catalogue de feuilles de styles, par Paul Scrivens.
Introduction aux feuilles de styles. Un tutoriel sur Aide Javascript.
Utilisation des feuilles de styles. Dossier sur Aide Javascript.
Cybercodeur. Une argumentation convaincante en faveur des CSS.
Openweb. Un bon répertoire d'articles bien documentés.
Alsacréations. Cours, astuces et tutoriels XHTML et CSS.
Mise en page sans tableau pas à pas. Recommendations W3.
Écrire des feuilles de styles efficaces. Un dossier traduit par Pompage.
Conseils CSS. Par El Moskito.
Un roll over en CSS avec une seule image. Par El Moskito.
Quirksmode. Le site de Peter-Paul Koch, nombreuses ressources, CSS, javascript, etc.
Well styled. Par Petr Stanicek.
Générateur de feuille de style. Proposé par Mammouth land. Voir aussi CSS débutant.
Générateur de CSS. Proposé par Webyo.
Comment positionner les éléments d'une page avec les CSS. Traduction sur Aide Javascript.
CSS: un cadre en image. Un tutoriel de Laurent Jouanneau.
CSS: décoration de boutons. Un tutoriel de Laurent Jouanneau.
The layout reservoir. Des codes source de CSS plutôt élégantes.
CSS edge. Des modèles de CSS sur Meyer Web. Voir Curvelicious, Slantastic ou Ragged Float.
StopDesign. Le webdesign fonctionnel et CSS de Douglas Bowman.
SimpleBits. Le webdesign fonctionnel et CSS de Dan Cederholm.
CSS layout technique. Exemples et commentaires de Eric Costello sur Glish.com.
Holy CSS Zeldman ! Liens CSS collectés par Andrew Fernandez.
Sliding Doors of CSS. Un article de Douglas Bowman sur A List Apart.
Css Maxdesign. Excellent tuoriaux spécialisés. Voir Listamatic, listutorial ou Float tutorial.
XHTML and CSS guide. Association de CSS et XHTML pour plus de compatibilité.
Web monkey. Tutoriel complet.
Cascading style sheets. Infos et actualités CSS sur le site W3.
CSS, a guide for unglued. Une liste de liens de référence.
CSS pointers. Une liste de liens utiles et très complète.
Working With Alternate Style Sheets. Permettre un choix de style à l'utilisateur.
CSS Design: Taming Lists. Contrôler une liste de liens.
CSS User interfaces. Par Ivan Bueno.
Style switcher. Passer d'une feuille de style à l'autre en un clic, par Paul Sowden sur A list apart.
CSS Edit. Un logiciel belge d'édition de CSS.
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.
Web Standards. Portail d'infos sur les standards du W3.
W3 CSS homepage. La page dédiée aux CSS sur le site W3. Voir aussi Learning CSS.
CSS validator.
Une série d'infos détaillées figure sur le site de Macromedia:
Conseils d'utilisation des CSS dans Dreamweaver MX.
Avantages des styles CSS.
Mise en page sans tableaux avec des CSS.
Utilisation de CSS sur macromedia.com
Toutes les informations destinées aux comportements graphiques des contenus peuvent être désormais stockées en dehors du fichier html, dans une feuille de styles séparée. Ces feuilles de style externes (.css) permettent de contrôler l'aspect des pages en modifiant uniquement le fichier CSS associé aux documents. Il est possible de définir des styles spécifiques, des caractéristiques rigoureuses de mise en forme pour chaque élément (typo, taille, marges, comportement, couleur, etc) et les appliquer à des ensembles de pages, ou à un site entier. Pour faire des modifications générales sur la globalité d'un site, il suffit donc de changer un style pour agir automatiquement sur tous les éléments HTML correspondants.
On appelle ces instructions "feuilles de style en cascade" car on peut en définir plusieurs, et en cas de redondance de style, un ordre de priorité est donné au navigateur. Les feuilles de style permettent l'homogènéité d'un site, des chargements de page plus rapides, et facilitent les manipulations graphiques sur des ensembles de pages en séparant la présentation du contenu. Cette approche est généralisée dans le cas de sites dynamiques (weblogs, spip, etc) et autres systèmes de gestion de contenus.
Il existe trois méthodes pour utiliser une feuille de styles:
Un fichier externe.
Très pratique lorsque vos styles doivent s'appliquer à un nombre important de pages.
Cette méthode nécessite de faire appel à ce fichier externe dans chaque document .
Pour cela, il faut utiliser la balise <link> et la placer dans l'en-tête
entre les deux balises <head> et </head>:
<head>
<link rel="stylesheet" type="text/css" href="adresse/mafeuilledestyles.css">
</head>
Exemple: la feuille de style externe de multimedialab.be
Une feuille de styles interne.
Cette méthode est plus appropriée lorsque l'on souhaite définir des styles pour une ou quelques pages.
Au lieu d'utiliser un fichier externe, il faut définir les styles dans le fichier html en utilisant la balise <style> placée dans l'en-tête du document de la manière suivante :
<head>
<style type="text/css">
body {background-color: white}
p {margin-right: 20px}
</style>
</head>
Des styles intégrés ponctuellement aux balises (possible, mais déconseillé: complexe à gérer).
Pour cela il suffit d'insérer l'attribut style au sein de votre tag:
<p style="color: #000000; margin-left: 20px">
Ceci est un paragraphe dont la police sera noire et la taille de la marge de gauche sera de 20 pixels.
</p>
Un fichier externe.Très pratique lorsque vos styles doivent s'appliquer à un nombre important de pages.
Cette méthode nécessite de faire appel à ce fichier externe dans chaque document .
Pour cela, il faut utiliser la balise <link> et la placer dans l'en-tête
entre les deux balises <head> et </head>:
<head>
<link rel="stylesheet" type="text/css" href="adresse/mafeuilledestyles.css">
</head>
Exemple: la feuille de style externe de multimedialab.be
Une feuille de styles interne.Cette méthode est plus appropriée lorsque l'on souhaite définir des styles pour une ou quelques pages.
Au lieu d'utiliser un fichier externe, il faut définir les styles dans le fichier html en utilisant la balise <style> placée dans l'en-tête du document de la manière suivante :
<head>
<style type="text/css">
body {background-color: white}
p {margin-right: 20px}
</style>
</head>
Des styles intégrés ponctuellement aux balises (possible, mais déconseillé: complexe à gérer).Pour cela il suffit d'insérer l'attribut style au sein de votre tag:
<p style="color: #000000; margin-left: 20px">
Ceci est un paragraphe dont la police sera noire et la taille de la marge de gauche sera de 20 pixels.
</p>
Les documents de référence concernant les CSS sont publiés sur le site du W3.
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.CSS Cheat Sheet. Récapitulatif des commandes CSS à télécharger (PDF)Documentation CSS. Documents à télécharger (PDF) sur Comment ça marche ?Documentation CSS. Documents à télécharger (PDF ou.doc) sur Maîtriser le HTML.
Pour terminer cette introduction, je vous recommande définitivement de naviguer avec Firefox
et son extension Web developer qui permet une manipulation et une consultation optimale des CSS.
Présentation des feuilles de style. Historique, syntaxe, implantation sur Comment ça marche ?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.CSS Zen garden. Bon nombre d'idées et d'exemples, à l'initiative de David Shea.CSS Vault. Catalogue de feuilles de styles, par Paul Scrivens.Introduction aux feuilles de styles. Un tutoriel sur Aide Javascript.Utilisation des feuilles de styles. Dossier sur Aide Javascript.Cybercodeur. Une argumentation convaincante en faveur des CSS.Openweb. Un bon répertoire d'articles bien documentés.Alsacréations. Cours, astuces et tutoriels XHTML et CSS.Mise en page sans tableau pas à pas. Recommendations W3.Écrire des feuilles de styles efficaces. Un dossier traduit par Pompage.Conseils CSS. Par El Moskito.Un roll over en CSS avec une seule image. Par El Moskito.Quirksmode. Le site de Peter-Paul Koch, nombreuses ressources, CSS, javascript, etc.Well styled. Par Petr Stanicek.Générateur de feuille de style. Proposé par Mammouth land. Voir aussi CSS débutant.Générateur de CSS. Proposé par Webyo.
Comment positionner les éléments d'une page avec les CSS. Traduction sur Aide Javascript.CSS: un cadre en image. Un tutoriel de Laurent Jouanneau.CSS: décoration de boutons. Un tutoriel de Laurent Jouanneau.The layout reservoir. Des codes source de CSS plutôt élégantes.CSS edge. Des modèles de CSS sur Meyer Web. Voir Curvelicious, Slantastic ou Ragged Float.StopDesign. Le webdesign fonctionnel et CSS de Douglas Bowman.SimpleBits. Le webdesign fonctionnel et CSS de Dan Cederholm.CSS layout technique. Exemples et commentaires de Eric Costello sur Glish.com.Holy CSS Zeldman ! Liens CSS collectés par Andrew Fernandez.Sliding Doors of CSS. Un article de Douglas Bowman sur A List Apart.Css Maxdesign. Excellent tuoriaux spécialisés. Voir Listamatic, listutorial ou Float tutorial.XHTML and CSS guide. Association de CSS et XHTML pour plus de compatibilité.Web monkey. Tutoriel complet.Cascading style sheets. Infos et actualités CSS sur le site W3.CSS, a guide for unglued. Une liste de liens de référence.CSS pointers. Une liste de liens utiles et très complète.Working With Alternate Style Sheets. Permettre un choix de style à l'utilisateur.CSS Design: Taming Lists. Contrôler une liste de liens.CSS User interfaces. Par Ivan Bueno.Style switcher. Passer d'une feuille de style à l'autre en un clic, par Paul Sowden sur A list apart.CSS Edit. Un logiciel belge d'édition de CSS.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.Web Standards. Portail d'infos sur les standards du W3.W3 CSS homepage. La page dédiée aux CSS sur le site W3. Voir aussi Learning CSS.CSS validator.Une série d'infos détaillées figure sur le site de Macromedia: Conseils d'utilisation des CSS dans Dreamweaver MX.
Avantages des styles CSS.
Mise en page sans tableaux avec des CSS.
Utilisation de CSS sur macromedia.com
M'écrire - Newsletter - À propos de ce site