Tutoriaux et Formations CSS / Feuilles de Styles

Maîtriser les formats d’affichage selon les types de terminaux

21 août 2008

Source : JDN Développeur
Date : 30 juillet 2008
Auteur : Sandy Hacyan

Les feuilles de style CSS permettent d’adapter la présentation des contenus à plusieurs types de terminaux. Des modes de publication qui sont regroupés selon différentes catégories définies par le W3C.

Accéder à ce tutoriel

Comment faire une galerie photos en JavaScript

19 avril 2007

Source : JDN Développeurs
Date : 27 mars 2007
Auteur : JDN Développeurs

Voici une alternative simple au PHP pour la présentation de série de photos sur un site Web. Des codes XHTML et CSS, et une fonction JavaScript. Le tout apportant un gain au niveau de la navigation.

Accéder à ce tutoriel.

Les pseudo-formats

18 mars 2007

Source : Le Site du Zér0
Date : 21 juillet 2005
Auteur : M@teo21

Nous venons de passer en revue un grand nombre de propriétés CSS dans les chapitres précédents. Vous savez maintenant modifier la taille du texte, sa police, sa couleur etc etc… Nous allons voir dans ce chapitre un nouvel aspect du langage CSS qu’on appelle… les pseudo-formats

Accéder à ce tutoriel.



Formatage du texte en CSS (partie 2/2)

18 mars 2007

Source : Le Site du Zér0
Date : 21 juillet 2005
Auteur : M@teo21

Bienvenue dans la seconde partie de ces 2 chapitres dédiés au formatage du texte :) Le CSS vous réserve encore bien des surprises, alors n’attendez pas : foncez !

Accéder à ce tutoriel.

Formatage du texte en CSS (partie 1/2)

18 mars 2007

Source : Le Site du Zér0
Date : 21 juillet 2005
Auteur : M@teo21

Nous arrivons maintenant à un chapitre qui devrait beaucoup vous intéresser :) Non, le “formatage du texte” n’a rien à voir avec la destruction de toutes les données présentes sur votre disque dur :lol: Cela signifie simplement que l’on va modifier l’apparence du texte (on dit qu’on le “met en forme”). Soyez rassurés donc, à la fin de ce chapitre votre disque dur sera toujours vivant :p

Accéder à ce tutoriel.

Mettre en place le CSS

18 mars 2007

Source : Le Site du Zér0
Date : 21 juillet 2005
Auteur : M@teo21

Après avoir passé toute une première partie du cours à ne travailler que sur le XHTML, nous allons maintenant découvrir le CSS que j’avais volontairement mis à l’écart. Le CSS n’est pas plus compliqué que le XHTML, il est juste différent car il sert à réaliser la présentation de votre page web.

Accéder à ce tutoriel.

CSS : comprendre le fonctionnement de float et clear

12 décembre 2006

Source : JDN Développeurs
Date : 30 novembre 2006
Auteur : Xavier Borderie

Propriété reine du placement des éléments d’un site, float a des conséquences encore imprévisibles pour qui n’a pas intégré sa philosophie. clear leur sera d’une aide précieuse. Explications et démonstrations en images.

Accéder à ce tutoriel.

Indentation homogène des listes

23 octobre 2006

Source : Mozilla Developer Center
Date : 23 avril 2006
Auteur : Eric A. Meyer

Le changement de style des listes le plus fréquent consiste à modifier leur indentation, c’est à dire le décalage vers la droite des items de la liste. Mais ceci est souvent frustrant, car ce qui marche dans un navigateur ne produit pas le même effet dans un autre. Si vous déclarez par exemple que les listes n’auront pas de marge gauche, vous obtenez le résultat attendu dans Internet Explorer, mais elles restent obstinément à la même place dans les navigateurs Gecko. Pour comprendre pourquoi cela se produit ainsi, et, plus important, pour éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

Accéder à ce tutoriel.

Comprendre le positionnement des balises en CSS

7 juin 2006

Source : Alsacréations
Date : 25 février 2005
Auteur : Raphaël

es tableaux utilisés pour la mise en forme, ont toujours été déconseillés. Par contre, l’utilisation correcte de chaque balise (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS va petit à petit devenir indispensable. Les éditeurs HTML visuels n’utilisent qu’une infime partie des possibilités des balises (faussement nommées “calques” en général), ce qui les rend souvent peu compatibles et peu pratiques. Voici comment positionner les éléments en CSS de façon optimale, bien que résumé schématiquement.

Accéder à ce tutoriel.

Créer une lettrine sur du texte

6 juin 2006

Source : Alsacréations
Date : 28 février 2005
Auteur : Raphael

Une lettrine est la première lettre d’un paragraphe dans les récits. Large et bien mise en valeur, elle représente en général trois hauteurs de ligne.

Accéder à ce tutoriel.

Inclure un fichier dans un autre, grâce à CSS et PHP

4 juin 2006

Source : Alsacréations
Date : 2 mars 2005
Auteur : Raphael

Les cadres (frames et iframes) sont fréquemment utilisés pour faire une mise en page avec des parties fixes et des parties dynamiques, scrollables. Cependant, cette technique, heureusement peu voire non utilisée par les sites professionnels tout-publics présente de nombreux désavantages, notamment pour le référencement, la mise en favoris, l’impression de page,…

Accéder à ce tutoriel.

Faire un Style switcher (changement d’habillage) en PHP

4 juin 2006

Source : Alsacréations
Date : 8 avril 2005
Auteur : Olivier

La séparation du contenu et de la mise en forme permet de créer différentes mises en pages ou styles en changeant simplement la feuille de style du document. Nous allons voir alors comment créer simplement un style switcher (une liste permettant de choisir entre différents styles) géré en PHP qui gardera en mémoire (via un cookie) le style choisi pour permettre d’afficher ce style à chaque chargement de page.

Accéder à ce tutoriel.

Quelle est la différence entre un DIV et un “calque”

4 juin 2006

Source : Alsacréations
Date : 25 février 2005
Auteur : Raphael

Résumé : les logiciels WYSIWYG automatiques, comme Macromedia Dreamweaver (jusqu’aux versions très récentes), continuent de véhiculer les concepts et termes obsolètes de “calques”. En mode Création de Dreamweaver, il est possible de concevoir sa mise en page soit grâce aux tableaux, soit grâce aux “calques”, c’est à dire - selon lui - les balises layer, div ou span. Or, cet abus de langage est malheureusement demeuré très ancré et induit de nombreux amalgames.

Accéder à ce tutoriel.

Comment débuter avec XHTML et les CSS ? Que sont les standards web ?

2 juin 2006

Source : Alsacréations
Date : 23 septembre 2005
Auteur : Raphael

Vous êtes débutant et voulez concevoir un site web en XHTML et en styles CSS ? Pourquoi ne pas le faire proprement et conformément aux Standards web établis ? Cet article est un explicatif général et un condensé des ressources indispensables pour démarrer du bon pied et trouver toutes les réponses à ses questions.

Accéder à ce tutoriel.

S’affranchir des tableaux HTML en CSS2

5 décembre 2005

Source : JDN Développeurs
Date : 30 mars 2002
Auteur : Jérôme Morlon

Des exemples d’utilisation de feuilles de style et de positionnement de calques pour concevoir une mise en page sans utiliser de tableaux.

Accéder à ce tutoriel.

Dix raisons d’utiliser XHTML, les CSS et le DOM

4 novembre 2005

Source : JDN Développeurs
Date : 21 octobre 2004
Auteur : Xavier Borderie

Sans être la réponse à tous les problèmes (notamment le référencement dans les moteurs de recherche), le trio XHTML / CSS/ DOM - tous trois standards W3C - apporte son lot d’avantages. Nous avons voulu en lister dix, avec l’optique de l’intérêt pratique pour le développeur, son entreprise, et les internautes.

Accéder à ce tutoriel.

Comprendre le “modèle de boîte” de CSS

2 novembre 2005

Source : JDN Développeurs
Date : 18 septembre 2003
Auteur : Xavier Borderie

Le modèle de boîte (box model) décrit la mise en page par “boîtes”, et est au c??ur du moteur de représentation HTML de CSS : la spécification utilise le principe des boîtes imbriquées à l’infini (potentiellement) pour mettre en page le contenu d’une page. Bien comprendre le modèle “boîte” est donc primordial pour construire une mise en page CSS… surtout quand on sait que certains navigateurs divergent largement de la spécification lors de l’application des dimensions. Ce modèle est si important que la prochaine version de CSS, CSS3, prévoie d’y consacrer un module entier.

Accéder à ce tutoriel.

Utilisation des feuilles CSS sur macromedia.com

14 août 2005

Source : Macromedia France
Date : non daté
Auteur : Tim Ong

Comment nous l’avons fait : Utilisation des feuilles CSS sur macromedia.com.

Accéder à ce tutoriel.

Un fil d’actualité déroulant : animation des calques

19 juin 2005

Source : Lycos Webmaster
Date : non daté
Auteur : Dr Benton

L’atelier précédent vous a permis de découvrir les possibilités de mise en forme des listes à puces et l’intégration d’images de fond sur les calques. Il est temps d’animer styles et calques. Plus question ici de théorie, nous allons mettre en place notre menu d’accueil point par point. Et aborder, de manière très sommaire, le DHTML.

Accéder à ce tutoriel.

Un fil d’actualité déroulant : nouvelles mises en forme

19 juin 2005

Source : Lycos Webmaster
Date : non daté
Auteur : Dr Benton

Cet article est le premier d’une série de deux ateliers qui vous feront passer en douceur des feuilles de styles au DHTML. En utilisant à la fois les mises en forme des CSS et quelques lignes de Javascript, vous créerez le menu ci-dessous. A utiliser aussi bien pour un fil d’actualité, une présentation de dossiers ou une page d’accueil. Dans ce premier atelier, vous découvrirez les les motifs de fond des calques et le paramétrage des listes à puces, quelques propriétés très intéressantes pour le webmaster. Ces styles serviront à la mise en forme de la page. Il ne nous restera qu’à animer ces éléments grâce à un petit JavaScript. Mais ça…. c’est pour le prochain atelier !

Accéder à ce tutoriel.