Appel à contribution : bien débuter l’étude des comportements CSS

J’ai reçu un email ce matin d’un visiteur du blog qui m’a posé une question très intéressante :

Par quoi commencer l’étude des feuilles de style CSS ?

Pour bien répondre à Loic, je vais donc préparer un « plan de formation » sous la forme d’un billet à venir, mais vos avis m’intéressent aussi grandement pour voir nos divergences ou convergences.

Pour ma part, pour bien commencer, je conseillerai de débuter par… l’html/xhtml. Bien connaitre les balises, leurs interactions, leur type (en-ligne, bloc), leurs différences d’affichage par défaut dans les principaux navigateurs du marché.

Puis, j’attaquerai les CSS par les positionnements qui sont surement ce qui demande le plus de travail et d’expérimentation.

Le tout organisé autour d’un projet directeur, la création d’un site internet personnel, par exemple, un CV en ligne.

Et vous ?

Cordialement,
Aymeric Jacquet

Tags : , , , ,

Be Sociable, Share!

14 Commentaires pour Appel à contribution : bien débuter l’étude des comportements CSS

  • Il serait intéressant de savoir, également, comment TOI tu as fait pour en devenir un expert ?! Allez, c’est TON blog après tout, tu peux TOUT y dire du croustillant stp !.

    Le 1 mai 2007 à 10 h 58 min

  • Florent V.

    Commencer par le HTML, oui. Pas la peine d’aller tout de suite vers les formulaires, les object, et autres subtilités. Mais les div, p, hN, ul et ol, et quelques autres, pour pouvoir faire un document textuel minimal.

    Ensuite, avant d’attaquer le positionnement, je commencerais plus en douceur par une prise en main de la syntaxe CSS via de la mise en forme moins problématique, par exemple la mise en forme du texte, le dimensionnement des blocs, les padding et margin, les border, et les couleurs et images de fond.

    Le positionnement CSS ne viendrait alors que dans un troisième temps, une fois que les bases de (X)HTML et de la syntaxe CSS sont acquises.

    Et pour compléter, je me servirais du billet suivant : Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?.

    Le 1 mai 2007 à 13 h 33 min

  • Certainement pas par du positionnement, malheureux ! Ce serait le meilleur moyen de le dégoûter par excès de complexité (y’a-t-il une structure trois colonnes simple et admise par tout le monde ?) ou d’incohérence entre les navigateurs (pourquoi ça marche pas sous IE ?). Ou alors, il faut commencer très doucement (flotter une image à droite d’un texte) pour que les concepts rentrent et passer progressivement à des designs plus complexes.

    En fait, tout dépend d’où il vient. Pour les anciens (pré-2000), le CSS a d’abord consisté à remplacer les balises FONT ou les attributs border, et les images « spacer.gif » pour les marges et le padding. Après, on a dû désapprendre les tables pour passer au positionnement, et ça a pris de longues années (on n’en est pas encore sorti). Mais à l’époque tout le monde n’était pas convaincu de l’intérêt des CSS, qui ont fait leurs preuves depuis.

    S’il est plus récent, il n’aura pas de mauvaise habitude, donc on pourra peut-être attaquer par le concept de boîte en lui faisant faire un design simple (linéaire) avec quelques DIV (entete, nav, contenu, basdepage) et un contenu bien balisé (h1, h2, p, ul, li…) qu’il va styler/disposer au fur et à mesure par des itérations très simples.

    Le 1 mai 2007 à 18 h 55 min

  • Mike : je ne suis pas un expert, je laisse ça à d’autres, je suis juste un utilisateur « averti ». ;)

    Florent et Damien : je m’attendais un peu à cette réponse à vrai dire.

    J’explique mon choix bien sur.

    Soyons bien d’accord, une fois la logique de séparation de la mise en forme via CSS comprise, les notions de base « d’habillage » sont simples, même si elles contiennent des petites subtilités au niveau de l’héritage parent/enfant.

    La réelle complexité de l’usage des CSS vient bien des positionnements (avec ce qu’ils impliquent au niveau du layout des éléments) car ils remettent parfois en cause, souvent du fait des divergences de rendu des navigateurs, les bases même de l’habillage/décoration via CSS :
    Les problèmes inhérents aux positionnements flotants (doublement de marge…), les problemes au niveau du flux html des éléments en positionnement absolut (parent/enfant), les problèmes de fond pour les éléments en positionnement relatif, etc, etc, etc.

    Certes, ce n’est pas commencer par le plus simple, mais les bugs engendrés par les modes de positionnement en fonction des navigateurs, peuvent avoir un effet très négatif sur des apprentissages de base que l’apprenant pouvait légitimement considérer comme acquis.

    Le 2 mai 2007 à 14 h 22 min

  • Yvan L.

    Hello,

    Y’avais la série d’articles de pompage « on reprend tout à zéro », que j’ai trouvé vraiment pas mal foutus. Allez hop, ça commence par là:

    Le 2 mai 2007 à 16 h 37 min

  • Yvan L.

    Oops, le lien n’a pas fonctionné, on y va à l’ancienne : http://pompage.net/pompe/cssdezero-1/

    Le 2 mai 2007 à 16 h 38 min

  • clb56

    Salut,

    En dehors de la question du squelette du document html qui doit bien être posé dès le départ :

    doctype
    <html>
    <head>
    <title>
    <meta content>
    </head>
    <body>

    </body>
    </html>

    Je pense qu’il est préférable de partir du contenu (texte uniquement) que des éléments html. Dit autrement, ceci :

    <body>
    <p>Hello world !</p>
    </body>

    est un exemple catastrophique.

    Quand je dis « contenu » je parle de vrai contenu, quelque chose qui lu sur le papier ait du sens et un peu de complexité (de richesse).
    A titre d’anecdote, je me suis toujours dit, que si j’avais à trouver ce genre de support, j’utiliserais des recettes de cuisine. C’est parfait car on y trouve du blabla sur le plat, les ingrédients dont il y a besoin, les étapes de la recette.

    Ensuite introduire les éléments html de manière didactiquement logique et efficace.

    1. <p>
    2. <hn>

    faire une pose

    3. <ul> (et éventuellement <ol>)

    Et stop, il y a déjà de quoi faire.
    Réserver les <div> pour plus tard. Perso je mettrais aussi de coté les balises inline parce que j’ai tendance à considérer que faire comprendre ce qu’est une balise inline c’est faire comprendre en quoi elle n’est pas block.

    Les css maintenant :

    Tu dis : « Puis, j’attaquerai les CSS par les positionnements qui sont surement ce qui demande le plus de travail et d’expérimentation. »

    Mmm, tout dépend ce qu’on appelle commencer, il y a quand même quelques petites choses à prévoir dans un premier temps.
    Je verrais donc les choses plutôt ainsi :

    1. Présentation du couple propriété/valeur
    2. Mise en oeuvre très simples (couleur et taille du texte par exemple) via l’attribut style dans les balises (Ouè, ouè, il faut se débrouiller à faire passer la notion d’attribut sans s’y attarder)
    3. Externalisation des css du body = élément style dans le head.
    4. Introduire les notions de id et de class.

    Stop ! Ne pas parler de fichier.css liés tant que l’apprenant ne travaille pas sur plusieurs documents html concernés.

    Sinon je suis d’accord avec toi pour l’angle d’attaque, sauf que parlerais de mise en page plutôt que de positionnement.

    Le 5 mai 2007 à 10 h 14 min

  • clb56

    Ah zut, j’avais préparé mon message précédent sous logiciel texte et dans le copier/coller mes retours de chariots n’ont pas été interprétés.

    Je suis désolé :(

    Si tu peux arranger ça, parce que là mon post n’est vraiment pas lisible.

    Le 5 mai 2007 à 10 h 18 min

  • clb56

    Parfait, je suis sauvé, merci Aymeric :-)

    Le 5 mai 2007 à 11 h 16 min

  • Genre ? ;)

    Bon prévoir pour plus tard une image de fond de commentaire plus longue. ;)

    Le 5 mai 2007 à 11 h 05 min

  • clb56

    Je disais donc :

    A titre d’anecdote, je me suis toujours dit, que si j’avais à trouver ce genre de support, j’utiliserais des recettes de cuisine. C’est parfait car on y trouve du blabla sur le plat, les ingrédients dont il y a besoin, les étapes de la recette.

    Et bien banco finalement, l’idée est venue aussi à d’autres :

    http://rgaa.referentiels.modernisation.gouv.fr/index.php/front/web/points_de_controle/3_6

    PS :

    Rien à faire, en previsu les liens ne fonctionnent pas, donc je préfère envoyer en mode texte simple.

    Le 15 mai 2007 à 0 h 13 min

  • Pour information, je suis en train de compiler vos idées et ressources pour préparer un article de réponse plus complet, désolé pour le retard, mais je suis pas mal occupé en ce moment.

    Le 26 mai 2007 à 10 h 50 min

  • Tu fais bien de commenter, ça fait remonter ce billet dans mon agrégateur (je m’étais dit : tiens faudra que j’y revienne !), procrastination quand tu nous tiens…

    Je crois que je commencerais par une page complète mais très simple : une colonne avec un titre, du texte, quelques intertitres, une ou deux images. Sur la base de ce document, on étudie le xhtml (head et body) puis le positionnement des grands blocs et un poil de présentation (fontes, couleurs, liens…).

    Etape 2 : on complexifie la structure (deux colonnes fixes, header et footer), on améliore la présentation (couleurs ou fontes plus ciblées, règles différentes selon l’état des liens…)

    etc. en complexifiant de plus en plus.

    Vala vala, mes deux zeurocents.

    Le 26 mai 2007 à 18 h 25 min

  • Bien débuter l’étude des comportements CSS : synthèse de vos contributions

    Avec un peu de retard pour cause d’actualité professionnelle surchargée, je vais donc faire une première synthèse des idées et pistes que vous avez proposé.

    Appel à…

    Le 1 juin 2007 à 10 h 42 min

One Rétrolien pour Appel à contribution : bien débuter l’étude des comportements CSS

  1. Par Quelques notes — Programme de formation HTML & CSS le 4 janvier 2012 à 19 h 25 min

    […] a eu dès 2007 l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage du XHTML et des CSS que je vous invite […]