Cours de CSS à partir de rien

/ ! \ Je donne ici MA façon de faire, elle n'est sans doute pas la meilleure, mais elle fonctionne (preuve en est mon blog) / ! \

Et bin voilà, je me lance dans un petit "cours" de CSS : j'ai du temps à passer et j'ai cette idée dans la tête depuis la semaine dernière, alors je me lance !


Alors premièrement, déterminons à qui s'adresse ce cours :
  - A toutes les personnes motivées pour casser leur blog
  - A toutes les personnes qui ont confiance en moi (nooon partez pas !)
  - A toutes les personnes qui en ont marre de leur design pré-défini
  - A toutes les personnes qui ne savent pas encore que ce cours les embrouillera plus qu'autre chose
  - Mais attention, il s'adresse aux personnes ayant quelques bases en CSS : si vous voulez les acquérir, rendez-vous sur le site du Zéro.

Ensuite, téléchargeons un navigateur Internet et un module très pratique pour se sentir à l'aise dans le travail :
  - Mozilla Firefox : sans doute le meilleur navigateur Internet qui existe en ce moment (pour ma part en tout cas, il l'est)
  - un module de Mozilla Firefox : ColorZilla qui vous permettra de trouver une couleur sur une page internet si vous la voulez sur le votre, et vous indiquera aussi à quoi correspond l'élément associé à cette couleur dans le code CSS de la page.

Mais au fait : qu'est-ce que le code CSS ?
CSS est l'abréviation de "Cascading Style Sheets" qui signifie en Français "Feuilles de style en cascade". Celui-ci défini le design de toutes pages Internet. Sans ce code CSS, vous n'auriez que de pâles pages en noir et blanc (avec du bleu au mieux pour les liens) et tous les paragraphes les uns sous les autres : des sites sans vie ni âme. (enfin on peut toujours s'en sortir avec d'autres langages informatiques, mais je ne m'y connais pas suffisamment pour en parler)

Nous allons maintenant poser les bases avant de toucher au CSS. Supposons que votre blog viens d'être créé, il n'y a pour l'instant qu'un petit article vous indiquant que votre blog vient d'être créé. Créez d'abord une page (non pas un article, mais bien une page) avec n'importe quoi dedans. Ensuite, créez un article (ou modifiez celui de base) en y insérant une image, du texte et un lien vers votre page : cela permettra par la suite, en touchant au CSS, de modifier les caractéristiques par rapport aux images, au texte et aux liens, tout en voyant ce que vous faites. Bref, ne vous inquiétez pas si vous avez l'impression de faire des trucs inutiles, c'est normal

Considérons le cas où vous soyez resté en mode classique (et non avancé) ce sera plus facile à expliquer. L'autre cas étant souvent source d'erreur. Donc si vous êtes débutant tout plein, restez en mode classique !

Bon, avant d'avancer plus loin, résumons, nous avons donc :
  - Mozilla Firefox ainsi qu'un module très utile d'installé sur l'ordinateur.
  - un article et une page avec une image et un lien vers la page sur notre article (en considérons évidemment le cas où votre blog est tout neuf )
  - un blog en mode classique pour faciliter les choses

Bon, tout ceci étant fait, nous allons pouvoir nous plonger dans le CSS. Direction :
  1. "Administration"
  2. "Design"
  3. "Mode avancé (CSS)"
  4. Cliquez sur l'onglet "Mon style"
  5. Ouvrez la partie "Définitions avancées"
  6. et cochez toutes les petites cases grises afin de personnaliser !

Bref, tout ce résume à ça :


Toutes les cases étant cochées, je vais vous faire faire un truc dangereux ! Vous allez sélectionner le code dans vos cases et tout supprimer ! TOUT ! Histoire que toutes vos cases soient vierges !
/ ! \ Enregistrez avant votre code CSS dans un fichier texte à part au cas où vous feriez des bétises / ! \
Si ça vous amuse, vous pouvez déjà faire une prévisualisation de votre travail (petit bouton "Prévisualiser" en bas de la page) Vous remarquerez donc que votre blog n'est pas très beau... même très moche ! (désolé aux personnes qui le trouvent beau )

Vous avez donc 5 cases vierges, et vous ignorez totalement leur utilité... à vrai dire elles ne servent qu'à vous repérer dans votre code, explications :
  1^ère case : Définitions d'affichage basiques -> c'est la case générale, c'est dans celle-ci que je vous conseille de rester, je vous expliquerez après.
  2^e case : Définitions d'affichage du template -> vous trouverez ici les indications des largeurs, des marges, la taille des textes...
  3^e case : Définitions d'affichage de la variation -> ici vous gérez les couleurs du blog (couleurs de la police, du fond du blog, des liens, etc.)
  4^e case : Définitions de structure de la variation -> c'est là que vous déterminez la taille des colonnes et la largeur du blog. La structure du blog quoi
  5^e case : Définitions de structure du template -> Bah celle là je sais pas à quoi elle peut servir

Bref, tout ceci servant à ordonner votre CSS et ainsi à ne pas vous y perdre ! Mais voilà, je vous ai tout fait supprimer ! En fait vous pouvez mettre tout votre code dans la case que vous voulez, ou même dans 2 cases ou même 3! Ca n'importe pas. Bref, quand j'utilise ma technique, je met tout mon code dans la case du haut, ça m'évite après à chercher partout. Savoir à quoi correspond les cases est utile lorsque vous modifiez le design de base.


Pour la suite, sachant que si je faisais un cours vraiment complet, celui-ci prendrai vraiment beaucoup de temps et certainement plusieurs articles, il vous faudra vous appuyer sur deux sites principalement : le blog d'aide de Titia pour tout ce qui est structure des blogs sous Over-Blog, et le site du zéro pour tout ce qui est des propriétés CSS
Avec ces deux sites, vous devriez trouver ce qu'il faut pour suivre le reste du "cours" !


Nous entrons donc dans la phase écriture du CSS !

Par quoi commencer ?
Tout d'abord par la mise en place de la structure du blog : où seront placées les colonnes, comment, quelles largeurs ? Toutes ces questions doivent être définies ici (on pourra y repasser par la suite pour le fignolage du blog) Donc d'après le blog de Titia, on trouve dans les classes de structures globales différentes classes que nous utiliseront plus ou moins. Personnellement, j'utilise presque uniquement les classes de type #cl_*_* (avec * un nombre) La première étoile correspond au positionnement vertical sur le blog : 0 correspond au bloc du haut, 1 au bloc du milieu et 2 au bloc du bas. La deuxième étoile correspond au positionnement horizontal :
  - dans le cas de deux colonnes modules : 0 correspond à la colonne de gauche, 1 la colonne du milieu et 2 à la colonne de droite
  - avec une colonne module à gauche : 0 correspond à la colonne de gauche, 1 à la colonne principale, 2... ne correspond à rien
  - avec une colonne module à droite : 0 correspond à la colonne principale, 1 à la colonne de droite, 2 ne correspond à rien
Un exemple ne sera peut-être pas de refus n'est ce pas ? Prenons donc l'exemple de mon blog : une colonne module à droite. Cette colonne correspond à #cl_1_1 : le premier 1 correspond au bloc du milieu en verticalité, le deuxième 1 correspond à la colonne de droite en horizontale.

Alors comment faire ?
On va tout faire en un seul coup : on va tout placer de haut en bas. Donc commençons par le haut, soit #cl_0_0, ouvrez les accolades et fermez les directement, ça vous évitera d'oublier . Placez-vous entre elles et il ne vous reste plus qu'à déterminer : width pour la largeur et margin pour les espaces (en pourcentage ou en pixels). Faites de même avec les colonnes et le bas de page. Mais attention pour les colonnes, il faut rajouter des flottants pour pouvoir les aligner ! Donc pour la colonne de droite par exemple, il faudra écrire float: right;
Je vais donner un exemple car j'ai l'impression de ne pas être clair !

Voici une partie du code de la structure de mon blog :

#cl_1_0    {                                                |  la colonne principale (celle des articles)
float: left;                                                    |  la colonne flotte à gauche (pas sur que ça serve à grand chose )
width: 67%;                                               |  la colonne occupe 67% de la taille de l'écran
margin: 1% 0% 2% 9%;                         |  les marges sont aussi en pourcentage, pour s'adapter aux écrans
}                                                                    

#cl_1_1    {                                                |  la colonne de droite (celle des modules)
float: right;                                                 |  la colonne flotte à droite
width: 15%;                                               |  la colonne occupe 15% de la taille de l'écran
margin: 1% 5% 5% 3%;                         |  les marges sont aussi en pourcentage, pour s'adapter aux écrans
}

Bon, après c'est à vous d'organiser votre blog, chacun à ses goûts, c'est aussi à vous de toucher un peu à tout pour voir ce qui vous plaît.
Une fois ce travail fait, vous pouvez voir ce que ça donne en prévisualisant ce que vous avez fait. Si les colonnes ne sont pas alignées, il faut vérifier que vous avez bien mis les flottants et que la taille des colonnes et des marges ne dépassent pas 100% dans mon cas, ou la taille d'un d'un écran dans d'autres cas (ce qui varieen fonction des écrans...). Une autre faute fréquente peut être liée à l'oublie de point-virgule à la fin de vos lignes, ou l'oubli d'accolades (c'est pour cette raison qu'il vaut mieux les placer dès qu'on définie la classe )


Ceci étant fait, votre blog a sa structure ! Vous allez pouvoir commencer à mettre vos couleurs, vos backgrounds ( = fonds), la taille des titres, la couleur des liens, etc.
Commençons donc par LE truc le plus demandé lorsqu'on veut changer de design : le background ! C'est à dire le fond de votre blog. C'est surement le truc le plus simple à faire dans tout le travail, alors faisons-le vite. Voyons voir mon code pour une explication plus simple :

body {
background: url("http://nsa03.casimages.com/img/2008/11/04/081104074632236652.png") fixed no-repeat center left;
}

body correspond à l'ensemble du corps du blog (évident ). background est une méga-propriété permettant de définir tout ce qui est lié au background en une seule propriété. L'adresse de mon image est donné par url("...") (je crois que les guillemets ne sont pas indispensables, mais j'ai pris l'habitude de les mettre) Les points de suspensions sont à remplacer par l'adresse de l'image. Pour les autres formules, il suffit de se référer au site du zéro pour les comprendre (j'ai pas envie de décortiquer tout mon code,  sinon j'ai pas fini !)
Voilà donc votre background installé, votre blog a enfin des couleurs !

Pour ce qui est du reste (article et module), il faut faire la même chose : vous définissez la classe, vous ouvrez une accolade, définissez le background, et refermez l'accolade.
La classe des articles se définit par .article, celle des modules par .box (n'oubliez pas le point avant "article" et "box", il est obligatoire... alors que pour la classe "body", il ne le faut pas !)

Maintenant vous voulez sans doute changer la couleur par défaut de l'écriture, rajouter des bordures, décoller le texte de la bordure, etc.
La couleur de la police se définie par color et en couleur rgb (red, green, blue) ou en hexadécimal (de type #800000 par exemple).
Les bordures se définissent par border. Il faut alors définir sa grosseur, son apparence, sa couleur. On peut aussi demander à ne voir apparaitre qu'une partie de la bordure : celle du bas, par exemple, se définie par border-bottom.
Pour décoller le texte de la bordure, il faut rajouter des marges intérieurs, se définissant par padding. Exprimez la valeur de celle-ci en pixels par exemple (c'est surement la façon la plus répandue).

Toutes ces propriétés sont évidemment à mettre dans les classes correspondantes ! (vous n'allez pas définir l'apparence des articles dans la classe .box qui correspond aux modules !)


Voilà, maintenant vous devriez pouvoir avoir un début de design ressemblant à quelque chose (à peu près )
Je vais tout de même vous donner quelques classes afin que vous puissiez modifier d'autres choses :
  - h2 : correspond aux titres de type h2.
  - a : correspond aux liens en général
        - a:hover : correspond aux liens lorsque la souris pointe sur celui-ci
        - a:active : correspond au moment du clic sur le lien
        - a:visited : correspond aux liens des pages déjà visitées
  - img : correspond aux images. C'est maintenant que votre image placée sur l'article unique va servir : il me semble qu'il y a une bordure définie automatiquement autour des images : vous pouvez désormais la supprimer en mettant un border: none... ou comme vous voulez
  - .box-titre : correspond aux titres de vos modules ! Attention car si vous définissez un background par exemple au h2 de vos modules, vous verrez deux bandes (une en haut du module, une en bas) Pour éviter ce problème, utilisez cette classe.
  - .page : correspond aux pages, tout comme .article correspond aux articles

Ceci est une infime partie des classes, si vous en voulez plus (voir toutes) allez sur le blog de Titia. Associé au site du zéro, sur lequel sont répertoriés la plupart des propriétés CSS, vous pourrez modifier tous votre blog !

Une petite remarque juste en passant. Lorsque vous modifiez votre design, pensez bien à visiter votre blog ! (oui je sais c'est vous qui écrivez les articles et tout et tout !) Mais ce conseil est très utile dans le cas où vous avez précédemment supprimé tout le CSS, il vous arrivera surement d'oublier de tout remettre en ordre ! Prenons l'exemple simple que lorsque vous vous connectez à votre blog, vous tombez sur un article... si vous ne regardez que les articles, vous oublierez à coup sûr de modifier le CSS des pages ! (oui c'est maintenant que la page que je vous ai fait créer tout à l'heure va servir) Donc pensez bien à visiter et revisiter votre blog plusieurs fois afin de ne rien oublier !
Pensez donc à au moins 4 choses à visiter : les articles (bon ça, vous le ferez automatiquement), les pages (expliqué précédemment), la zone des commentaires et réponses aux commentaires, et enfin la liste complète des articles (accessible par le module "liste des articles" et en cliquant sur "Liste complète").

"J'ai encore un problème ! Je ne trouve pas la classe liée à cette partie de mon blog ! J'ai pourtant cherché 3 fois sur le blog de Titia "

Pas de panique ! Je vous ai fait installer un module de Mozilla Firefox n'est-ce pas ? C'est maintenant que ColorZilla va servir !
Vous avez peut-être remarqué la petite pipette dans le bas gauche de la fenêtre de votre navigateur ? Et bien cliquez dessus, dirigez votre souris vers la partie du blog que vous souhaitez voir modifiée (le curseur s'est transformé en croix). Vous pouvez maintenant voir la couleur dans la fenêtre d'information en bas de Mozilla. Celle-ci donnée en rgb et en hexadécimals. Au bout des informations, vous pouvez voir une autre information : celle-ci correspond à la classe de l'élément pointé. En regardant un peu partout, vous pourrez ainsi découvrir les différentes classes composant votre blog, et pourrez ainsi modifier juste une petite partie des articles (par exemple, .contenuArticle correspond au contenu de l'article (c'est bien foutu quand même ))


Voilà ! Je pense avoir fait un peu le tour des choses pour vous permettre de créer et modifier le design de votre blog. Maintenant sachez que vous progresserez en tripatouillant un peu partout : on apprend pas tout d'un coup ! (quoique moi j'ai bien appris l'essentiel en 3 jours )
Le mieux si vous avez peur de faire des bétises est encore de se faire un blog-test juste pour jouer avec le CSS (oui oui je parle ici d'un jeu !) Ou alors d'utiliser un autre module de Mozilla Firefox : Web-developper qui permet quant à lui de modifier le code CSS d'une page Internet pour voir ce que ça donne, sans prendre de risques pour le code car celui-ci n'est pas enregistré.

J'espère avoir été utile, et peut-être vous avoir aidé. Si vous rencontrez des problèmes, suffit de me demander. J'ai ici essayé de décrire la façon la plus simple pour moi de refaire son CSS à partir de rien (c'est juste mon avis) Bien sûr, vous n'arriverez pas au résultat attendu du premier coup, et il faudra sans doute reprendre un peu tout, mais on se prend au jeu au bout d'un moment, et lorsqu'on arrive à ce qu'on attendais, vous ne pouvez pas savoir le plaisir que cela procure

Un dernier conseil très très très utile ! Sauvegardez régulièrement votre CSS dans un fichier texte à part : si jamais vous faisiez une erreur et que votre CSS disparaissez d'un coup, vous serez bien content de le retrouver en sécurité, bien au chaud dans un 'tit coin !

sources :
Le site du Zéro
Blog d'aide de Titia