Mini-cours de CSS

Partie I

On a compris que le code HTML ne doit pas contenir d'instructions concernant l'apparence de la page web. Et, sans fichier CSS, c'est le navigateur qui décide pour nous. Le fond de page sera blanc, le texte sera noir, ...

N'oubliez pas de regarder le code source des pages web données en exemple dans ce cours. Vous y trouverez l'adresse du fichier.css. Il ne vous restera plus qu'à ouvrir ce fichier pour consulter le code CSS utilisé.

background-color

Sans fichier CSS, le fond de la page est blanc et le texte est noir. Ce sont les couleurs par défaut, c'est-à-dire choisies à notre place par le programme ( le navigateur )

Pour mieux voir les zones définies par les balises du HTML, nous allons donc commencer par choisir une couleur de fond pour chaque type de zone.

La première zone concernée est celle qui contient toutes les autres : la zone body.

Le CSS est lié à la présentation d'une page web et ne concerne donc pas les balises situées dans le head ...

Cliquons ici pour voir une page vide mais ayant un fond de page jaune.

Regardez le code-source de ce fichier HTML ( vide.htm ).

Le nom du fichier regardé s'affiche dans la barre de navigation du navigateur

Il n'y a rien entre les balises <body> et </body>, donc rien n'est affiché

Mais, pourquoi le fond de la page est-il jaune ?

En regardant le code-source, on découvre la ligne : 

<link rel="stylesheet" href="style1.css" />

Rappel : Pour voir le code source d'un fichier HTML, faire un clic droit dans une zone vide de la page et choisir dans le menu contextuel : "code", "source", ...

Donc, le fichier "vide.htm" est lié au fichier "style1.css".

Et, quel est le code-source de ce fichier ? 

body{background-color:yellow;}

Quiconque a fait un peu d'anglais comprend très vite.
La balise body aura une couleur de fond de page jaune.

Analysons cette ligne.

Syntaxe : balise { style1:mot1; style2:mot2; }

Le point-virgule final est facultatif.

Pour plus de lisibilité du code, on peut placer un ou plusieurs espaces entre chaque partie. De l'écriture la plus condensée à la plus bizarre : 

balise{style1:mot1;style2:mot2}
    balise  {   style1  :  mot1           ;style2      :mot2      ;    }

Pour une balise, la liste des styles autorisés est limitée.
Pour un style, la liste des mots-clé ou valeurs est limitée.

Le style le plus important est background-color. Il peut être utilisé dans quasi toutes les balises. Cela permet de bien visualiser les différentes zones, si on le souhaite.

Les valeurs autorisées sont les noms de couleurs en anglais ou ... "#" suivi de 6 chiffres hexadécimaux.

Un chiffre hexadécimal est un des 16 symboles suivants : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Les lettres peuvent aussi être en minuscules. Il existe donc 166 couleurs, soit 16.777.216 couleurs ! On peut donc écrire color:#000000 (=noir), ... ,color:#FFFFFF (= blanc)

Pour choisir une couleur précisément, si vous êtes connecté, cliquez Colors picker (de w3schools.com)

Contenu du fichier background-color.css 

body    { background-color : gray; }
header  { background-color : #d5b980; }
footer  { background-color : rgb(255, 255, 0); }
article { background-color : rgba(255, 99, 71, 0.5); }
aside   { background-color : #96dc97; }
h1      { background-color : #FF1493; }
h2      { background-color : #FF69B4; }
h3      { background-color : #FFC0CB; }
.code   { background-color : white; }

Et appliquons ce style au fichier HTMLà ce background-color.htm.

Impressionnant, non ?
Tout cela avec qu'un seul style, background-color, appliqué à différentes balises.

Maintenant, on comprend mieux la notion de zones en HTML.

".code" n'est pas une balise. Le code CSS ne s'applique pas qu'aux seules balises. Nous reviendrons sur cette particularité.

Une couleur peut être indiquée par un des 140 noms de couleurs son code en hexadécimal (en majuscule ou minuscule), les fonctions rgb() ou rgba(). La couleur est une composition de rouge vert et bleu. En hexa, une couleur est donnée via deux chiffres hexa. Avec les fonctions, une couleur est un paramètre qui est un nombre décimal (de 0 à 255). La fonction rgba() contient un quatrième paramètre (de 0 à 1, avec point décimal) pour indiquer la transparence.

color

L'autre style le plus connu est color. Il concerne la couleur des lettres ( du texte ). Il peut être appliqué aux mêmes balises que le style background-color. Cependant, comme la couleur du texte par défaut est noire et que cela convient bien dans la plupart des cas, il est moins souvent présent dans un fichier CSS.

Les valeurs autorisées sont les mêmes que celle du style background-color.

Créons un nouveau design. Commençons donc par la balise body. Et, choisissons un fond de page orange et, comme couleur du texte, le blanc. Nous savons que ce choix sera transmis à toutes ses balises-filles

Une des filles du <body> est <p>. Créons une seconde ligne pour modifier la couleur de fond de cette "fille" en noir.

Contenu du fichier style2.css. 

body{background-color:orange;color:white}
p{background-color:black}

Et appliquons ces styles au fichier HTML 3p.htm.

Maintenant, on voit bien la "surface" des paragraphes. Et, on constate que le mécanisme de transmission a de nouveau opéré. La couleur du texte dans les paragraphes est blanc, alors que cette couleur n'a pas été définie pour les paragraphes.

NB : On voit que le texte en dehors des paragraphes est blanc. Même si on peut taper du texte en dehors d'un paragraphe, ce n'est pas recommandé. Et surtout, cela n'est pas très logique ...

Les pseudo-classes

Les pseudo-classes sont liées à des événements.

Le nom de la balise et le nom de l'événement sont séparés par deux points (:).

Le navigateur affiche, par défaut, les liens en bleu et ceux qui sont visités en violet. On peut changer ce comportement en ajoutant deux lignes de code dans le fichier CSS.

Le style du lien varie en fonction du fait qu'il ait été visité ou non. La balise a possède deux pseudo-classes spécifiques : 

a:link{color: blue;}
a:visited {color: red;}

Pour savoir si le lien a déjà été visité ou pas, le navigateur consulte l'historique ( l'endroit où est enregistré l'adresse de toute page visitée ).

:hover

Une autre pseudo-classe souvent utilisée, applicable à d'autres balises, est :

Le code ci-dessous permet de gérer l'apparence d'un lien. 

a:link{color: blue;}
a:visited {color: red;}
a:hover {color: white;}

Concernant les liens, il faut respecter cet ordre d'événements ( link, puis visited puis hover ) pour que le code soit valide.

Cette pseudo-classe :hover peut aussi s'appliquer à d'autres balises. 

h1:hover {color: white; background-color: black; }

Appliquons cette pseudo-classe :hover au fichier HTML hover.htm. Survolez les titres de niveau 1, 2 et 3 avec votre souris.

Nous constatons le changement d'apparence de tous les titres, lorsqu'ils sont survolés par la souris.

Impressionnant. Non ?

Ces effets sont impossibles à réaliser sans CSS.

Les commentaires

Dans tous les fichiers de code, il est possible d'écrire des commentaires. Ils ne sont pas obligatoires mais permettent une meilleure lisibilité du code.

Comme dans de nombreux langages informatiques ( C, C++, Java, PHP, ... ), le commentaire doit être mis entre /* et */, et un commentaire ne doit pas contenir un commentaire ...

Le code CSS est également plus lisible et peut être plus facilement commenté si toute instruction ( style: mot-clé; ) est écrite sur une ligne.

Ainsi, le contenu du fichier style2.css peut être réécrit de manière plus lisible  : 

/* Dernière modification : le 19 février 2010 */

/* Rappel : body est la balise mère,
   tous ses "enfants" héritent de ses styles */

body {
    background-color: orange;   /* nouvelle couleur de fond */
    color: white;
    }

p {
    background-color: black;    /* couleur de fond des paragraphes */
    }

Voilà, vous connaissez déjà le principe du CSS (cascade).

Et, vous connaissez déjà les deux principaux styles : background-color et color.
Quant aux valeurs de ces styles, ce sont des noms de couleurs en anglais.

Vous connaissez même un pseudo-événement : hover

Attention !

En HTML, après le nom de l'attribut, on place le signe = et la valeur, souvent quelconque, est entre guillemets ( "" )
En CSS, après le nom du style, on place le signe : et la valeur est un mot-clé ou une valeur ( non entouré de guillemets )

Terminons par une bonne nouvelle.

Si après avoir lancé Notepad++, vous choisissez dans le menu "Langage" > C > CSS, Notepad++ vous proposera automatiquement tous les noms de balise ou de style possibles en CSS (!), commençant par les lettres tapées. Et, le code sera en couleur !

Vive NotePad++ !