Les bases en CSS

Nous venons de voir comment créer des pages HTML qui ne contiennent que le contenu.
Ce n'est pas très beau, et c'est normal : nous allons maintenant aborder le CSS, le format qui vous permettra de définir la forme. Mais avant de s'amuser avec, nous devons d'abord voir comment on le forme : c'est la partie théorie.
Note : si la théorie ne vous dit rien, vous pouvez lire la page sur les techniques en CSS, où nous allons directement mettre en forme la ou les page(s) créées précédemments. Cependant, si vous ne comprenez pas des choses, n'hésitez pas à revenir sur cette page et à la lire !

Importer une feuille de style dans une page HTML

Nous allons commencer par cela, car je ne voit pas l'intérêt de vous donner quelques codes CSS si vous ne pouvez pas les tester !

Introduction au CSS

La structure d'un fichier CSS est simple (plus que celle d'un fichier HTML).
Voici la structure d'un fichier CSS, ainsi que quelques définition :

Pour faire simple, le CSS sert à appliquer des styles à une balise HTML, certaines balises, ou un groupe de balises,
Il se compose de règles, débutants chacunes par les balises concernées (leur nom, ou une expression permettant de sélectionner les balises concernées). Ensuite, entre accolandes ( entre { et }), on définit les règles que l'on souhaite appliquer,
Chaque règles commence par le nom de la propriété à modifier, suivit de deux points (':'), puis des valeurs à donner à cette propriété, terminé par un point virgule (';').

C'est assez abstrait comme description : ne vous cassez pas la tête car nous allons tout de suite voir ce que cela donne concrétement, et si vous ne comprenez toujours pas, passez simplement aux exemples concrets qui vous aideront à y voir plus clair car se sont des exemples qui vous serviront (que vous pourrez recopier et adapter).

Exemples

Pour commencer, nous alons voir comment centrer le titre de niveau 1 de nos pages WEB.
Vous savez que celui-ci s'écrit <h1>Mon titre de page</h1> : il utilise la balise h1, donc nous devons appliquer un style à la balise h1. Nous voulons centrer le texte, il s'agit donc de la propriété text-align (ne vous inquiétez pas : je vous donnerez la liste des propriétés), et nous devons lui donner la valeur center. Cela se traduit donc par :

h1 {
  text-align: center;
}

Si maintenant nous voulons une couleur bleue pour ce même titre, nous devons apliquer une seconde règle pour la balise h1 : il s'agit de la propriété color, et nous lui donnons la valeur blue ; ce qui donne :

h1 {
  text-align: center;
  color: blue;
}

Comme vous le voyez, c'est simple. De manière générale, le code CSS balise { propriété: valeur; } servira à relooker le contenu de la balise <balise></balise> du fichier HTML correspondant.

Les sélecteurs

Sans le savoir, vous avez utilisé un sélecteur : h1. Qu'est-ce donc ?
C'est une petite expression qui vous permet de sélectionner à quelles portions du code HTML s'applique un ensemble de règles.
Vous avez utilisé un sélecteur pour choisir une seule balise. Voici :

Vous pouvez très bien spécifier deux balises spéparées par un espace : par exemple li ul permet de ne sélectionner que les balises <ul> contenue dans des balises <li> (soit, comme vu dans le tutoriel HTML, une sous-liste). Avec notre exemple : <ul> <li> <ul> <li>Cette sous-liste est concernée car elle est définie par une balise ul, elle même contenue dans une balise li</li> </ul> </li <li>Mais pas cette liste</li> </ul> Remarque : il est bien dit que la seconde balise doit être include dans la première. Mais il n'est pas obligé que ce soit la balise directement fille,
Si vous tenez à ce que la règle s'applique à la balise directement fille (dans notre exemple précédent, por les balises ul contenues directement dans une balise li), vous devez utiliser le selecteur '>'. Par exemple : p > img { vertical-align: middle; } Cette règle ne s'appliquera qu'aux balises img contenues directement dans un paragraphe (p) : les images contenues dans une liste, elle même contenue dans un paragraphe ne se verront pas appliquer la règle.
Astuce : vous pouvez utiliser la balise body pour n'affecter que les balises de premier niveau (non imbriquées : celles contenues directement dans le <:body>). Par exemple, pour ne sélectionner que les titres h2 contenues à la racine (utile pour exclure les titres h2 contenues dans des <div>, entre autre), vous pouvez spécifier body > h2,

Lorsque deux noms de balises sont séparés par un virgule (','), alors l'ensemble de règles s'appliquera aux deux balises. Cela permet d'éviter ce genre de code dupliqué :

balise1 {
  background-color: white;
  color: blue;
  text-decoration: underline;
}
balise2 {
  background-color: white;
  color: blue;
  text-decoration: underline;
}

en le remplaçant directement par :

balise1, balise2 {
  background-color: white;
  color: blue;
  text-decoration: underline;
}

Il peut arriver que vous souhaitiez sélectionner n'importe quelle balise : dans ce cas, à la place d'un nom de balise particulier, utilisez l'étoile ('*'). Pour sélectionner toutes les balises directement files du corps mais pas les sous balises, vous en aurez besoin et écrirez ceci : body > *

Les classes

Il y a encore un autre moyen de restraindre la selection : et celui-ci est très puissant (et très utilisé) : il s'agit des classes.
Quesako ?
Pour mettre en place ce moyen, il faut modifier quelque peu notre fichier HTML : par exemple, modifiez l'un de vos paragraphes (ou titre, ou ce que vous voulez) pour y inclure l'attribue class="exemple". Pour être plus précis, si vous souhaitez appliquer une classe exemple à un paragraph, modifiez la balise ouvrante du paragraphe comme ceci : <p class="exemple">.
Vous commencez peut-être à comprendre : en ayant définit cette classe, nous allons pouvoir sélectionner plus précisément certaines balises, et pas toutes les balises de même nom. Voici comment la sélectionner dans votre code CSS:

.exemple {
  text-decoration: underline;
}
p.exemple {
  color: red;
}
p.exemple a {
  background-color: yellow;
}

Cette avalanche de CSS vous montre un bon éventail de l'utilisation des classes : la première règle stipule que toutes les balises avec l'attribue class égal à exemple doivent être soulignés ; que ce soit un titre, un paragraphe, un lien, un div, un span...
La seconde règle sélectionne précisément un paragraphe avec l'attrtibue class=exemple.
Le troisième exemple montre un composite entre les classes et les sélecteurs appris un peu plus haut : il s'applique à tout lien contenu dans un paragraphe d'exemple.
Je vous laisse le soin de définir une règle pour sélectionner juste les liens de classe important, contenue directement dans un paragraphe, lui même contenu dans une balise de classe contenu :-)

Les priorités et héritages

Il arrivera souvent que plusieures règles s'applique à une balise particulière. Par exemple, pour :

<div>
  <p class="important">
  </p>
</div<

vous puvez avoir définit trois règles :

p {}
.important {}
div > p {}

Dans ce cas, toutes les règles se supperposent mais si quelques propriétés sont définies plusieures fois, seule celle ayant la plus haute priorité est appliquée : il s'agit de la plus précise. Ceci est assez intuitif : div>p est plus précis que simplement p, idem : .important est aussi plus précis.
TODO: Au secours !

Comme on peut s'y attendre, si on définit une couleur de texte pour une balise, les balises filles hériterons aussi de cette propriété (sauf si une règle plus prioritaire dit le contraire). Par contre, et c'est logique, si on définit un cadre autour d'un bloc (un paragraphe, par exemple), les balises fills (des liens, des listes... par exemple) n'hériterons pas de cette propriété : cela donnrai des cadres dans des cadres, et fairai du plus mauvais effet. En règle général, les propriétés qui sont héritables ou pas sont assez intuitives, mais vous pouvez vous conforter à la doc. .:.:. Bloc_VS_Text ???

Modèle de boîtes

Maintenant que les bases sont assimilées, voyons les propriétés disponnibles, ainsi que les valeurs qu'elles peuvent prendre.
Vous trouverez en annexe cette liste. Quelques précisions :
Chaque balise est représentée par une boîte : vous pouvez lui appliquer un fond, une bordure, une marge intérieur ou extérieur.
Text : changer, formater...