Quelle est la bonne manière de procéder avec les fichiers CSS?

Comme tout « langage », le CSS doit être réfléchi en amont, et structuré, sinon la maintenance peut s’avérer compliquée.

Le fichier CSS ne contient QUE du CSS, et pas du tot d’HTML. En soi, un fichier CSS n’est qu’un fichier texte, il n’a pas pour vocation à afficher du contenu. Il ressemble globalement à un fichier de définitions. Chaque élément est déclaré par son nom (que ce soit un nom de balise, une classe, ou un identifiant), suivi de sa définition entre accolades.

nom_element
{
        parametre1 : valeur;
        parametre2 : valeur;
        …
}

 

Le plus simple est de prendre quelques exemples pour expliquer ce qu’on peut faire. Notamment cette épineuse question des noms de balises, classes, et identifiants.

Déja définissons les styles des balises. Afin de faire cela, il faut mettre le nom de la balise suivi des accolades et dans ces accolades, on va mettre les infos relatives à cette balise. Cela va impliquer que TOUTES les balises des pages depuis lesquelles le CSS est appelé vont appliquer ce style. Par exemple, si on applique un style aux balises <p>, alors toutes les balises p auront ce style, sauf si on surcharge le style (on verra ça après).

Dans les exemples ci-contre, on voit des exemples sur le corps du texte, les paragraphes, les tableaux, les titres…

On voit dans les exemples ci-dessus les principes du code CSS. Si vous avez bien suivi les chapitres précédents (ce dont je suis absolument certain bien sûr), vous avez dû remarquer que le CSS utilise ses propres codes. Par exemple, tandis qu’en HTML on utilise l’attribut bgcolor pour la couleur de fond, et bien en CSS on appellera ça background-color.

Voici un lien vers la liste des références: https://developer.mozilla.org/fr/docs/Web/CSS/Reference

On vient de voir précédemment qu’on peu attribuer un style aux balises. Donc toutes les balises appliqueront ce style, ce qui est bien, mais peut poser souci, notamment si on veut mettre en forme et spécifier quelques points de notre site.

Pas de panique, on peut faire ça simplement en CSS, en utilisant les classes. C’est bien les classes.

Mais ne vous inquiétez pas! Je ne vous parle pas de faire du java ou du c# là, je vous parle de classe de définitions CSS, voyons comment ça fonctionne.

Une classe porte le nom que l’on veut, elle doit être déclarée dans le fichier CSS et doit être impérativement précédée d’un point « . » : par exemple, on peut déclarer une classe borduresolide et l’utiliser de la manière suivante

Dans notre fichier css:

.borduresolide
{
border:1px solid black;
}
Dans notre fichier html:

<table class= »borduresolide »>…</table>

Notez bien qu’un élément HTML peut avoir plusieurs classes associées. Elle seront alors associées dans la déclaration de la balise et séparées par des espaces.

<div class= »class1 class2″>…</div>

Voilà un exemple complet de design CSS pour afficher une page, avec la génération du fichier CSS, le fichier HTML qui appelle ce fichier. Tout d’abord ce que je veux afficher, ainsi que le fichier HTML.

On voit dans le header de ce fichier HTML qu’on appelle le fichier CSS style.css. Ce fichier est composé des élements dans les 3 captures d’écran suivantes. On déclare dans le CSS 3 classes que l’on utilise dans le fichier HTML.

Il existe une dernière possibilité d’utiliser les CSS, qui se rapproche beaucoup des classes: les identifiants. Le principe est exactement le même, c’est-à-dire que l’on va définir l’identifiant dans le fichier CSS et l’appeler depuis le fichier HTML. La différence avec les classes, et qu’un élément ayant un identifiant ne pourra être appelé qu’une fois par page HTML, contrairement aux classes qui peuvent être appelées autant de fois qu’on veut. L’autre différence est dans le fichier CSS. Tandis qu’une classe sera définie avec un . pour préfixe, un identifiant sera précédé d’un #. On n’aura ainsi plus .grise, mais #grise dans le fichier CSS.

Les identifiants sont utilisés généralement quand on utilise javascript avec HTML pour donner une dynamique nouvelle à notre page.