Chapitre 2

Le pinceau

CSS : syntaxe, sélecteurs, héritage

Il y a peu de science en CSS.
Des propriétés par dizaines. Des valeurs par douzaines. Des lignes de conduite.
Tout l’art en CSS consiste à manier l’indépendance des éléments, la concision du code et l’efficacité des sélecteurs.

Pour commencer : Fichier -> Nouveau document

p{ color: magenta;}

Sauvegarder -> style.css
Ouvrez index.html et rechargez la page.
La beauté incontestable de cette page vous laisse sans voix.

Euuuh...
"C'est... joli"

La syntaxe est là :

selecteur{ propriété: valeur;}

Le <p> du HTML est stylé grâce au p en CSS. En vérité, tous les <p> sont stylés comme tel.

Mais voilà, on ne veut pas forcément styler tous les <p> mais seulement certains, voire un seul.
On peut alors sélectionner certains <p> en leur ajoutant l’attribut “class”.

<p class="introduction">Les roses sont rouges.</p>

Une classe en HTML correspond à un point “.” en CSS.

.introduction{ color: pink;}

Cette classe est réutilisable autant de fois que vous le voulez, et peut s’appliquer à d’autres balises aussi.

Si vous ne voulez styler qu’un seul élément, utilisez l’identifiant :

<p id="introduction">Les violettes sont bleues.</p>

Un id en HTML correspond à un dièse “#” en CSS.

#introduction{ color: purple;}

L’inconvénient de l’id est qu’il n’est utilisable qu’une seule fois par page HTML. Je le déconseille.

Un tableau vaut mieux que mille mots.

HTML Sélecteurs CSS possibles Signification 
<p></p>
 p Tous les <p> 
<div class="global"></div>
 div
.global
div.global		 Toutes les <div>
Tous les éléments avec class=”global”
Toutes les <div> ayant class=”global”		 
<ul id="menu">
 #menu
ul#menu		 L’élément qui a id=”menu”
Le <ul> qui a id=”menu”		 
<ol class="dico">
  <li>Un cobaye</li>
  <li>Des cobaux</li>
</ol>
 li
ol li
.dico li		 Tous les <li>
Tous les <li> ayant un <ol> comme ancêtre
Tous les <li> ayant un élément class="dico" comme ancêtre

Il y a pléthore de sélecteurs CSS possibles, du plus spécifique au plus global.

Il est d’ailleurs possible de regrouper plusieurs sélecteurs pour un même groupe de propriétés, et ainsi éviter de répéter les mêmes valeurs plusieurs fois inutilement. Il suffit de séparer les sélecteurs par des virgules :

/* Avant */
.one{ color:blue; font-size:12px; font-weight:bold; line-height:14px;}
.two{ color:green; font-size:12px; font-weight:bold; line-height:14px;}
.three{ color:magenta; font-size:12px; font-weight:bold; line-height:14px;}
/* Après */
.one,.two,.three{ font-size:12px; font-weight:bold; line-height:14px;}
.one{ color:blue;}
.two{ color:green;}
.three{ color:magenta;}

Cette pratique est très utile lorsque vous voudrez modifier ultérieurement vos valeurs car ces dernières seront regroupées en un seul point.
Elle s’avère indispensable lorsqu’il s’agit de modifier uniquement le background-position de plusieurs éléments partageant le même background-image.

Chez le notaire

Il est possible qu’un ancêtre style un descendant. Prenez comme exemple :

body{ color:red;}

Toutes les balises étant enfants/descendants de <body>, tout le texte sera rouge.

Enfin… Certaines balises ne se laissent pas dominer par leurs ancêtres. Les <a> par exemple resteront bleus.
De même, certaines propriétés ne se propagent pas aux enfants :

body{ border:2px solid orange;}

Une seule grosse bordure sera visible, pour le <body>, mais par pour ses descendants.

Internal affairs

Jusqu’à présent je vous ai fait mettre le CSS dans un fichier à part.
Il existe néanmoins deux approches alternatives de l’ennemi en passant directement par le HTML :

1. balises de style

<style type="text/css">
p{ color: green;}
</style>
<p>Heureux qui comme Ulysse…</p>

2. attribut HTML

<p style="color: green;">A fait un beau voyage…</p>

Le souci du 1 est d’avoir à répéter le code CSS autant de fois qu’il y a de pages.
Le souci du 2 est d’avoir à répéter le code CSS autant de fois qu’il y a d’éléments à styler.
Ces deux approches sont donc utilisées ponctuellement, pour styler au cas par cas, car elles sont prioritaires face au fichier CSS externe.

En file d’attente

<div>
  <p>Par les champs et les grèves</p>
</div>

Cet élément <p> se retrouve face à un dilemme. Une partie de la CSS lui dit d’être vert, une autre d’être orange.

div{ color: green;}
p{ color: orange;}

Le p, qui le cible directement, vaincra, quel que soit l’ordre :

p{ color: orange;} /* Vainqueur */
div{ color: green;}

Une classe est plus forte.

<div>
  <p class="nenuphar">Par les champs et les grèves</p>
</div>
div{ color: green;}
p{ color: orange;}
.nenuphar{ color: blue;} /* Vainqueur */

Néanmoins la classe est terrassée par l’identifiant.

<div>
  <p id="magnolia" class="nenuphar">Par les champs et les grèves</p>
</div>
div{ color: green;}
p{ color: orange;}
.nenuphar{ color: blue;}
#magnolia{ color:red;} /* Vainqueur */

Classement de la compétition de priorité, avec l’exemple précédent, du moins au plus spécifique :

* Toutes les balises (à éviter)
body Un ancêtre
div Un ancêtre plus proche (le parent)
body p Un p dans un body (grâce à l’espace)
div p Un p dans une div
div > p Un p directement précédé d’une div
body div p p dans div dans body
.nenuphar La classe
#magnolia L’identifiant
<p style="…"> Directement sur la balise : très puissant
!important Imbattable (à utiliser en dernier recours)

Un mot sur le grand vainqueur : !important.

p{ color: red !important;}

Absolument à éviter, car difficile à contourner. L’utiliser, c’est comme si tout repartait de zéro :

div p{ color: blue !important;} /* Vainqueur */
p{ color: red !important;}

Comment savoir qui gagne exactement ? Google Chrome / Safari : Ctrl + Shift + C Ou Firefox + Firebug.

Mon paragraphe, ma bataille
Le sélecteur vainqueur : ici la balise HTML "style"

La jachère

Reprenons. Supprimez tout. Jetez votre code CSS, tel un caillou évasif.
Gardez le HTML. Observez.
Cette couleur. Ces marges. Cette police.
Oui, votre page est déjà stylée. Un minimum. Un strict minimum.
Le coupable est là ! Devant vous. Depuis le début. Il vous observe autant que vous l’observez. Votre navigateur.

Livré avec une CSS système. Des valeurs par défaut, légèrement différentes selon le navigateur. Comment s’en débarasser (de la CSS, pas du navigateur) ?
Impossible de ne pas appeler la CSS système. Il faut l’overrider. La quoi ? L’overrider ! Hein ? L’OVERRIDER. Aaaaaaaah. L’overrider.

Réduire à néant. Partir de rien pour devenir tout. Au courage.
Mais réduire quoi ? Et comment ?
Rassurez-vous. Quelqu’un l’a fait : Yahoo Reset CSS.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym { border:0;
}

Collez-le en haut de votre CSS.
A bas les marges, bordure, tailles du body, des p, des input !
Place à vous, à votre style…

Votre pinceau ne se brisera plus de désespoir. Le vif sera tranché.