Tutorial de plus de 10h, consacré à l'apprentissage du CSS. Il s'agit ici d'une véritable formation au CSS!
Basée sur une expérience de tous les jours en débogage d’entreprise,l’approche choisie propose un angle de vision qui s’appuie sur le fait que tout commence par une bonne structuration du contenu de nos pages web.
Pour optimiser et faciliter l’implémentation de nos CSS, il faut avant tout commencer par bien comprendre l’utilisation et le rôle du HTML.
La complexité du choix de cette approche a été de rester, durant toutes les étapes, sur une ligne d’exploration objective pour mieux comprendre les bases des principaux outils, et non de proposer des listes de trucs et astuces ou encore d’approcher les divers hacks classiques permettant de corriger ci et là des problèmes très ou trop spécifiques.
Vue d’ensemble de la formation :
- Avant de commencer
Avant d'aborder le sujet des CSS, il est toujours bon de faire un tour d'horizon des acteurs majeurs de ce secteur, les langages ou les technologies, ainsi que les outils nécessaires pour travailler dans de meilleures conditions. - Les standards et l'univers des CSS
Prenons le temps de regarder ces standards, de comprendre qui ils sont et le rôle de chacun. - Les navigateurs
Controversés pour certains, incontournables pour d'autres, les validateurs, qu'ils soient de code ou de navigateur, permettent quoiqu'il en soit de se donner une idée de la validité de nos pages ou de nos applications. - Document HTML - xHTML
On entend souvent parler de HTML ou de xHTML, de transitionnal ou de strict. Qu'en est-il ? Lequel utiliser et pourquoi ? - DOCTYPE
Premier élément de la page HTML : le Doctype. Il donne le tempo et la mesure.Basculons en mode Quirk ou affrontons de plein fer les standards. - Mise en page en tableau ou tableau en CSS ?
Aujourd'hui la séparation contenu / contenant nous permet de libérer et d'adapter beaucoup plus facilement la créativité visuelle en adoptant les CSS.Pourtant beaucoup de sites aujourd'hui utilisent des CSS et donnent une représentation en tableau du contenu. - Le positionnement
Comment positionner les éléments dans l'espace et le volume de la page ? Il existe diverses possibilités qui apportent chacune des avantages et des inconvénients. Nous allons les explorer une à une. - La floataison et le flux du document
Parfois,les objectifs d'affichage sont compromis par le flux du document, il faut veiller autant que possible à ne pas tomber dans une interaction entre contenu et contenant. - Qu'est-ce qu'une grille ?
Commençons par définir ce qu'est une grille, comment cela fonctionne, et quels peuvent en être les avantages et les inconvénients. - Modèles et Templates
Il existe sur le web diverses sources de modèles qui nous permettent derapidement mettre en place des structures d'interface et de pouvoir ensuite décliner. - Les sélecteurs
Les CSS sans les sélecteurs ne seraient qu'à moitié fonctionnels. Voyons quels sont les outils de sélection d'éléments que nous avons à disposition et qui nous permettent bien souvent d'éviter une classite importante. - Sémantique et micro-formats
Sansentrer dans la véritable partie sur le web sémantique en abordant l'ontologie et des langages comme OWL, nous allons voir qu'il peut être intéressant de se poser la question sur la manière de nommer nos classes et IDs. - Éléments de liens et boutons
Seules balises interactives du HTML, les liens peuvent être utilisés de manière assez optimisée pour gérer nos boutons, barres de menus et cartes interactives. Nous allons en explorer quelques applications possibles. - Les barres de menus
Il est possible de n'utiliser qu'une seule image pour gérer l'ensemble de nos barres de menus ou d'autres éléments graphiques qui sont interactifs. - Éléments de liens et boutons
Seules balises interactives du HTML, les liens peuvent être utilisés de manière assez optimisée pour gérer nos boutons, barres de menus et cartes interactives. Nous allons en explorer quelques applications possibles. - Gestion des listes, ul / li ou dt / dd ?
Comment utiliser des listes élémentaires UL / OL-LI .zuz ? Quand faire appel à des listes de définitions DL-DT / DD ? Nous allons au cours de ce tutoriel vidéo approcher les mécaniques de chacune. - Conclusion
Bien d'autres sujets restent à explorer : les formulaires, la gestion des médias, les diverses destinations des CSS, le DOM Scripting et les CSS,l'accessibilité et les CSS, le XML et XSL, des trucs et astuces ou encore des cas d'étude, et bien plus encore !
Jetez un oeil à ces autres tuto CSS
Effet d' opacité
Dans ce tuto CSS, en video, vous apprendrez à réaliser un…
Créer une ombre
Dans ce tuto CSS, nous allons voir ensemble qu'il est possible…
Ombrage box-shadow
Dans ce tuto CSS, en vidéo, nous verrons comment utiliser…
Coins arrondis
Dans ce tuto CSS en vidéo, vous apprendrez à utiliser CSS…
Créez et intégrez un menu…
De la création du visuel sous Photoshop à l'intégration HTML/CSS,…
Tuto CSS
S’il ne s’agit plus seulement de technique mais aussi de…
Créer un formulaire
Demander à l'internaute des renseignements : une présentation…
Créer un menu horizontal
Un menu graphiquement sympathique invite l'internaute à naviguer…
- Objectifs et présentation 00:07:46
- Séparation de contenu, de visuel etc. 00:03:27
- Les standards et l'univers des CSS 00:08:14
- Les outils de création nécessaires 00:04:26
- Installation de l'environnement 00:14:08
- Réaliser une grille de repères 00:04:03
- Les navigateurs 00:17:58
- Les validateurs 00:06:57
- Utiliser CSS3 dès aujourd'hui ? 00:04:09
- Document HTML - xHTML 00:13:53
- xHTML 2 ou HTML 5 ? 00:05:22
- DOCTYPE 00:12:26
- Les balises HTML et leur familles 00:14:16
- La nature du contenu de la page 00:10:27
- Les balises 00:08:33
- La structure globale des pages et du site 00:12:14
- Nettoyage HTML 00:11:08
- CSS3 : Quoi de neuf sous le capot ? 00:10:24
- Boîte de type Bloc 00:11:32
- Boîte de type Inline 00:05:16
- Les diverses unités 00:15:20
- Divers types de valeurs d'unité 00:08:08
- Unités utilisées pour la typographie 00:10:03
- Unités de base et propriétés prédéfinies 00:08:18
- La feuille de réinitialisation par défaut 00:09:36
- Ecriture courte VS écriture longue 00:07:44
- Les feuilles en cascade 00:21:10
- Le poids des règles 00:04:00
- Mise en page en tableau ou tableau en CSS ? 00:05:01
- Le positionnement par bloc 00:11:11
- Centrage des blocs et Inline 00:10:43
- Le mode display 00:18:11
- La propriété haslayout de IE de 5 à 7 00:05:30
- Le positionnement par floataison 00:10:55
- La floataison et le flux du document 00:05:08
- Le nettoyage de floataison 00:10:36
- Positionnement par position relative 00:03:47
- Positionnement par position absolue 00:04:02
- Positionnement par position fixe 00:11:32
- Qu'est-ce qu'une grille ? 00:05:15
- Premier pas avec 960px 00:14:46
- Modèles et Templates 00:02:11
- Les types d'interface 00:04:17
- Utilisation des modèles Dreamweaver 00:08:54
- Les divers types 00:11:56
- Les imbrications 00:08:59
- Le filtrage par attributs 00:08:07
- Les pseudo-classes - partie 1 00:13:54
- Les pseudo-classes - partie 2 00:24:36
- Les expressions d'Internet Explorer 00:10:33
- Les commentaires conditionnels 00:10:46
- Gestion des styles par les navigateurs 00:05:52
- Idée d'une signature CSS 00:04:03
- Sémantique dans les nommages 00:05:07
- Définitions des micro-formats 00:12:09
- L'idée du web sémantique 00:02:32
- Les pseudo-classes de liens 00:14:24
- Créer un bouton par couleur et typo 00:07:23
- Créer un bouton par image 00:08:44
- Les barres de menus 00:14:06
- Les cartes-image 00:14:01
- Gestion des listes 00:11:56
- Les listes de définitions 00:05:49
- Les listes à onglets 00:06:30
- Report de liste sur un menu 00:15:15
- Conclusion 00:00:49
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS de 10 heures 20 minutes est proposée dans une résolution plus grande que l’extrait suivant :
video2brain
a vendu plus de 1.500 tutos, éditeur professionnel.
video2brain est une jeune entreprise innovante qui produit des formations vidéo en ligne de haute qualité pour logiciels, photographie et langages de programmation. Video2brain est également le fournisseur officiel de tutoriels certifiés Adobe.
Birnou Sébarte, auteur dans cette formation
Birnou Sébarte découvre en 1987, aux Etats-Unis, les métiers du multimédia. Il travaille principalement au début sur des applications avec des outils comme Director. La migration vers le web se fait dès 1996, et l’utilisation des standards du web le conduit progressivement à des interfaces plus riches.
Tuto du même éditeur
Objectifs et présentation
Au cours de cette étape nous définirons les objectifs de l'ensemble de ces chapitres et nous présenterons…
Séparation de contenu, de visuel etc.
Utiliser les CSS fait partie d'un processus global de séparation de contenu, de visuel et de fonctionnel.…
Les standards et l'univers des CSS
Prenons le temps de regarder ces standards, de comprendre qui ils sont et le rôle de chacun.
Les outils de création nécessaires
Voici une présentation d'une partie des outils disponibles sur le marché. Autant du côté propriétaire…
Notes attribuées par les utilisateurs

Les avis / Questions des utilisateurs
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto CSS d’une durée de 10 heures 20 minutes a reçu une note moyenne de 4/5.
Ce tuto a été publié par video2brain, éditeur professionnel, ayant reçu une note moyenne de 3,8/5 pour l’ensemble de ses vidéos.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Cette formation qui se présente sous la forme de plusieurs vidéos,
vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.














(n'a pas acheté le tuto)
" Dommage, dans l'extrait, on ne "voit" rien du tout, on entend juste une personne faire une courte présentation !
Comme ça, ça ne donne pas du tout envie de l'acheter ! "
(a acheté le tuto)
" Formation intéressante et détaillée mais il faut déjà avoir une base pour bien pouvoir suivre et ne pas trop être perdu. "