Le CSS est un langage vraiment vaste, puisqu’il existe de nombreuses propriétés, et complexe parce que les possibilités de création sont immenses. Oui c’est un peu pompeux comme introduction mais, tu vas voir au fil des articles sur le CSS, qu’on peux vraiment faire autre chose que de mettre du texte en rouge. Il est l’heure de créer un fichier .css et de l’ouvrir dans ton éditeur de texte.

La syntaxe du CSS

Alors si tu te souviens du premier projet que j’ai eu à réaliser avec OpenClassRooms, il n’était pas très beau, mais il permettait au minimum à un utilisateur de lire des informations (texte et image). Il faut bien se rappeler que le code HTML ne sert qu’à structurer la page.

Pour mettre un peu de forme dans ce monde de balises, nous allons utiliser le langage CSS (Cascading Style Sheet, oui avec deux E…).

Le principe est le suivant: on sélectionne une balise ou une classe que l’on peut cibler dans le document HTML et on lui applique la propriété CSS que l’on souhaite. Je t’invite à aller voir sur CODEPEN, j’ai fait un exemple pour te permettre de voir à quoi ressemble la syntaxe du CSS.

Remarque:  Le texte situé entre /* */ est un commentaire. En CSS, pour indiquer des précisions dans le code, on utilise des commentaires. Ceux-ci ne sont pas interprétés par le navigateur, et sont seulement destinés à être lu par la personne qui aura à modifier le code.  Comme pour les balises en HTML, pense bien à ouvrir avec ces symboles /* (slash et étoile) et à refermer avec */ (étoile et slash).

D’un point de vue de la syntaxe, il faut faire attention à quelques détails, c’est souvent de là que les problèmes arrivent, en ce qui me concerne:

  • bien veiller à ce que les crochets encadrent les propriétés et les valeurs, donc pense bien à les refermer,
  • ne pas oublier le ; après la déclaration de la valeur. Si tu ne mets pas ce ; la propriété ne sera pas prise en compte dans le meilleurs des cas. Dans les autres cas, les suivantes peuvent ne pas fonctionner également.
  • veiller à indenter(décaler) les propriétés pour qu’elles ne soient pas alignées avec le nom de la balise. Cela n’est pas une obligation mais je me suis rendu compte que ça me permettait de me repérer plus rapidement dans mon code. Que tu le fasses ou nom ne changera rien à l’apparence de ta page. C’est juste une bonne pratique selon moi, ça demande juste à appuyer sur tabulation à chaque retour à la ligne donc rien de très fatigant…

Si tu utilises un éditeur de texte comme SublimText (voir mon article sur les éditeurs de texte), tu verras qu’il va reconnaître la plupart des propriétés et ajouter le ; avant que tu notes la valeur, il te faudra juste faire attention à ne pas le supprimer…

Les premières balises à connaître

Les premières balises que j’ai apprises sont celles-ci:

  • COLOR:  (color:     ;) => permet de changer la couleur du texte ciblé (titre, paragraphe, lien, …);

Il existe de nombreuses possibilités pour ajouter de la couleur. On peut indiquer qu’on veut du rouge , en notant la valeur red, mais il y a d’autre façon de faire, je parlerai de ça dans un prochain article.

Pour le moment tu peux t’entraîner à modifier mes projets Codepen en changeant les couleurs de titres, de paragraphe, etc. C’est un bon premier exercice pour manipuler les premières propriétés CSS. Tu trouveras les noms de couleurs à entrer comme valeur à la propriété color ici. Tu verras qu’il y a des codes démarrant par un # (toi qui a fait du solfège…), je ne te dis pas ce que c’est , mais essaye de manipuler ces codes… de voir à quoi ça sert…

  • FONT-SIZE: (font-size:      ;) => permet de modifier la hauteur du texte ciblé (titre, paragraphe, lien, …). Il est possible de travailler uniquement avec les polices reconnues par défaut par le navigateur, mais pour un projet en particulier, si tu veux un design un peu différent, tu peux ajouter d’autre polices. Idem je développerais ça plus tard;
  • FONT-FAMILY: (font-size:     ;) => permet de modifier la police du texte ciblé (titre, paragraphe, lien, …). Là encore, plusieurs unités possibles pour donner la taille d’une police, le pixel, les em, et je crois qu’il y a les rem aussi, mais il faut que je me renseigne la dessus. Je m’étendrai sur ce sujet lors d’un prochain article.;
  • BORDER: (border:     ;) =>  permet d’ajouter des bordures à un bloc de texte, une image, etc. Il y a encore plusieurs façons d’ajouter des bordures. La propriété border est une propriété générale très pratique qui englobe les autres…  Je détaillerais tout cela dans un article dédié aux bordures.

Bon avec juste 4 propriétés, nous avons plusieurs possibilités pour modifier le premier projet. Je rentrerai plus dans le détail  pour chacune des propriétés. Cela me donnera l’occasion de me remettre un peu dedans, car ça fait quelques semaines que je n’ai pas manipulé le CSS.

 

A très vite, pour entrer plus dans le détail,

Guillaume