Les meilleurs tutoriels et cours CSS

Ce cours, destiné en priorité au grand débutant, a pour but de vous présenter les feuilles de style et de vous guider dans la réalisation de vos propres CSS.

Il est très important d'intégrer les bases en CSS, afin d'éviter les écueils par la suite. À la fin de cet article, vous saurez quels sont les types d'éléments, leurs différences, ce qu'est le flux, comment le modifier, et ce qu'est l'héritage en CSS.

Qu'est-ce que c'est ? Comment les utiliser ? Les CSS (Cascading Style Sheets, c'est à dire "feuilles de styles en cascade") permettent de définir la présentation des pages Web. Désormais, votre code HTML ne vous servira qu'à définir la structure de vos contenus tandis que les CSS vous permettront de créer vos styles et votre mise en page.

CSS Globe démarre une série de petits articles appelés "Ce qu'il faut et ne pas faire en CSS". Ces séries ont pour but de pointer les mauvaises habitudes lorsqu'on utilise le CSS et en général les standards du Web. On tentera de répondre aux questions les plus fréquentes relatives au CSS. Cette première partie portera sur la sélection CSS.

Cet article marque le début d'une série qui fournit une introduction au nouveau standard CSS3, qui est conçu pour remplacer le CSS2. Nous commencerons par le tout début, comme si vous n'aviez jamais entendu parler du CSS3, pour vous amener à vous sentir prêt à le mettre en oeuvre.

Pour la deuxième partie de cette série d'articles sur le CSS3, nous allons nous pencher sur les bordures. Toute personne ayant utilisé le CSS connait les propriétés de bordure. C'est un excellent moyen de structurer le contenu, créer des effets autour des images et d'améliorer la mise en page.

La troisième partie de cette série d'articles sur le CSS3 traitera des nouveaux effets de texte. La typographie, est sans aucun doute, l'un des plus importants aspects pour obtenir une bonne mise en page lors de sa conception. La typographie peut, grâce à la page, attirer le lecteur, donner une certaine impression, offrir un impact, être subtile, ou aider à la séparation du contenu.

Ce tutoriel va traiter de certaines des nouvelles possibilités de manipuler l'interface utilisateur avec le CSS3. Mais qu'entendons-nous par interface utilisateur ?

Les multiples colonnes sont une façon importante de présenter le texte, les journaux les ont employées pendant des décennies. Cette mise en page est si courante qu'il est étonnant qu'actuellement ce genre de méthode soit l'une des techniques les plus complexes à comprendre pour un nouveau designer.

Pour la dernière partie de notre série d'introduction à CSS3, nous allons regarder de plus près les nouvelles propriétés de fond. Cela inclus la taille du fond, la possibilité d'utiliser plus d'un fond par élément et de définir l'origine du fond (qui affecte la position d'un fond).

Cet article a pour but de vous donner une technique pour créer une barre de progression animée en utilisant que du code CSS.

Ce tutoriel vous présentera deux méthodes distinctes pour réaliser un système de préchargement d'images en utilisant uniquement du CSS.

Ce tutoriel a pour but de vous montrer comment personnaliser vos boutons avec des images et que du CSS.

Cet article a pour but de vous donner des méthodes pour centrer vos blocs à l'aide du CSS.

Cet article explique les bases des CSS à travers différents trucs et astuces.

Ce tutoriel a pour but de vous donner une technique pour créer vos propres info-bulles en utilisant que du CSS.

Cet article décrit la méthode pour remplacer les puces par défaut des listes ul li par des images.

Une technique émerge de plus en plus du net, c'est la création d'une liste, ayant un contenu plus que conséquent, survolable en utilisant des balises a. Ce tutoriel aura donc pour unique but de vous la présenter.

Cet article montre que dans certains cas, l'utilisation des tableaux est impossible. Impossible en gardant une page grammaticalement valide. Propositions de solutions avec mise en page CSS.

Ce tutoriel aborde le contrôle de la taille des vignettes qui figurent sur votre site web. Il nous arrive parfois de ne pas avoir suffisamment d'espace pour intégrer des vignettes de grande taille et pourtant on souhaite éviter les petites images à peine reconnaissables. En utilisant cette astuce on peut modifier les dimensions de base de la vignette, pour l'afficher en grand au survol de la souris.

Cet article vous propose une introduction sur les bienfaits de l'utilisation des titres (X)HTML (h1, h2, etc.) pour vos divers documents.

Les feuilles de style CSS sont très pratiques pour séparer le fond et la forme mais il leur manque la possibilité de déclarer des variables que l'on pourrait réutiliser tout au long d'un projet web. Heureusement pour nous PHP est là et nous allons voir comment l'utiliser pour dynamiser nos CSS.

Cet article vous montre comment mettre en place facilement des curseurs de réglage de type "Facebook" en utilisant les technologies JavaScripts (Mootools) et les feuilles de style.

Ce tutoriel va vous expliquer comment positionner en CSS un élément de manière fixe, aussi bien sur Firefox ou les autres navigateurs alternatifs que sur Internet Explorer 6 et 7.

La visualisation de données est réalisée le plus souvent par des applications flash ou avec l'aide de certains langages de programmation. Ces solutions sont-elles le seul moyen de présenter, disons un simple graphique de données ? Et si on essayait rien qu'avec du bon vieux CSS ?

Cet article décrit une technique permettant de simuler, en apparence, un cadre HTML avec du CSS. La raison qui justifie la création d'une technique de cadres CSS est, bien sûr, la volonté d'abandonner l'utilisation des cadres HTML.

Cet article a pour but de vous donner des méthodes pour centrer vos blocs à l'aide du CSS.

La mise en page en utilisant des tableaux est fortement déconseillée. Mais comment faire autrement ? Cet article va vous expliquer pas à pas comment arriver aux même résultats, le plus simplement du monde.

Cet article a pour but de vous montrer comment créer, à partir d'une liste non numérotée, une barre de navigation.

Cet article explique comment se passer de JavaScript pour construire un menu déroulant, en utilisant uniquement des propriétés CSS sur un document XHTML.

Cet article propose une explication de deux méthodes pour obtenir une navigation par onglets, jolie et avec sémantiquement du sens, en mixant CSS et listes.

Cet article vous expliquera comment créer un menu Web 2.0 avec le style Digg-like.

Un des plus grands défis d'un concepteur web est de trouver un moyen de placer beaucoup d'informations sans perdre de lisibilité. Les onglets sont un bon moyen de gérer ce type de problème. Depuis l'avènement du Web 2.0, on voit une quantité phénoménale de blogs utilisant cette technique. Nous allons donc voir comment créer une boîte d'onglets en HTML et en y ajoutant des fonctionnalités à l'aide de CSS, JavaScript et jQuery. Cet article est la première partie d'un autre utilisant que du JavaScript : Créer une boîte d'onglets à la mode Web 2.0 avec jQuery - Partie 2 : le code JavaScript.

Cet article vous présentera différentes techniques CSS pour réaliser des paginations ayant du style.

Cet article vous propose des méthodes de mise en forme des titres (X)HTML et vous montre comment les utiliser dans l'organisation de votre document.

Les boîtes de message sont des éléments des plus utiles de nos jours dans toute application web. Vous en voyez certainement plusieurs centaines chaque semaine à travers Internet si vous naviguez un peu. Alors pour tous ceux qui désirent intégrer des boîtes de message stylisées avec CSS voici le tutoriel qu'il vous faut.

Cet tutoriel vous donnera des techniques pour rendre visible vos liens externes depuis votre site.

Cet article vous explique comment mettre en forme un formulaire avec du CSS sans oublier les balises label, fieldset et optgroup.

N'aviez-vous jamais rêvé de personnaliser intégralement vos formulaires (X)HTML, du simple champ texte en passant par les boutons radio, les listes déroulantes et même les champs file ? Cet article va vous montrer une des nombreuses (pas si nombreuses) méthodes de réaliser ce tour de force.

Les tableaux ont été introduits pour pouvoir afficher des données tabulaires. Il n'est plus question d'utiliser des tableaux pour la mise en page d'un site. Nous allons voir dans cet article, les balises se rapportant aux tableaux ainsi que la façon de rendre son tableau plus beau avec du CSS. Une attention particulière sera portée sur l'accessibilité.

Dans cet article, nous allons voir comment faire des boîtes de message personnalisées en fonction du type de message.

Cet article a pour but de vous faire une introduction aux standards Web pour vos développement en (X)HTML et CSS.

Les avantages des standards web pour vos visiteurs, vos clients et vous !

Cet article montre la compatibilité des propriétés CSS dans les emails au format HTML visualisés dans certains clients mails et webmails. Le résultat est assez surprenant.

Le but de cet article est de vous montrer comment proposer à un visiteur plusieurs styles de présentation différents en utilisant un langage coté serveur tel que PHP.

Cet article a pour but de vous présenter les Frameworks CSS.

Cet article vous propose des méthodes pour le rétablissement du flux (X)HTML dans vos mises en page construites avec du CSS.

Il y a quelques temps, je m'étais interrogé sur les différentes manières de rétablir le flux après un float. A l'époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d'un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j'en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j'assure le service après-vente.

Dans l'article précédent de cette série, nous avons traité du concept de base de l'amélioration progressive ; maintenant, nous pouvons commencer à examiner comment l'utiliser. Il y a de nombreuses façons d'intégrer l'amélioration progressive dans votre travail en utilisant les feuilles de style en cascade (CSS), cet article va couvrir quelques unes de ces techniques et vous amènera à réfléchir sur d'autres moyens pour améliorer progressivement vos sites.

Nous parlons du Web 2.0 depuis si longtemps maintenant que nous savons désormais ce qu'il peut faire ou non. Mais une chose est sûre, de nos jours, il y a énormément de données sur internet. Et comme les Webdesigners, nous concevons beaucoup de sites liés directement aux données.
Nous allons couvrir trois techniques de base pour ajouter un peu de visualisation aux données, directement dans des structures de navigation basées sur les standards. Ces trois techniques commencent par le même socle de navigation HTML : en une liste non ordonnée de liens. Nous allons un peu transformer l'utilisation des balises et ajouter quelques données et quelques artifices pour le look, mais dans chaque cas, le modèle de base est quasiment le même.

Ceci est une traduction de la Recommandation du W3C portant sur le deuxième niveau de l'implémentation des feuilles de style pour le Web (Cascading Style Sheets, level 2). Cependant ce n'est pas la version officielle en français de la Recommandation.