CSS : notions de base et terminologie

Ou écrire le CSS

CSS dans la page

Le CSS qui régit la mise en forme peut être écrit sous forme de règles de style dans la partie HEAD de la page et plus précisément à l'intérieur de la balise double SCRIPT. On parle alors de feuille de style interne.
Je rappelle qu'une feuille de style est un groupe de règles de style.

Dans un fichier CSS

Imaginez que votre site comprend une centaine de page mais et que chaque page contient une feuille de style.
Imaginez maintenant que votre supérieur vous demande de modifier la largeur de la page afin qu'elle s'affiche proprement même sur de petits écrans.
Vous allez devoir modifier 100 pages !!! Un travail fastidieux qu'il aurait été facile d'éviter ...

Les règles de style applicables à toutes les pages du site doivent être écrites dans une feuille de style externe c'est à dire dans un fichier d'extension .css et qui ne contient que du code CSS.

Pour que la feuille de style externe soit prise en compte au niveau de chaque page il faudra écrire dans la partie HEAD de chaque page un lien vers le fichier CSS.
Imaginons que la feuille de style externe ait pour nom "mon_style.css" et que ce fichier soit dans le même dossier que la page web. Il faudra écrire dans chaque page web : <link rel = stylesheet href ="mon_style.css" />

Style en ligne

Exemple : dans tous les paragraphes le texte doit être justifié.
Donc dans la feuille de style il y a la règle de style suivante : p {text-align : justify; }
Mais exceptionnellement et pour une poignée de paragraphes on souhaite un texte centré.
Il suffit d'écrire du CSS dans ces balises P via l'attribut style pour gérer l'exception.
Ainsi le code pour l'élément P concerné devient :

Notez l'emploi de l'attribut STYLE ayant pour valeur une ou plusieurs règles de style. Lorsque le style est écrit dans la balise on dit qu'elle est "en ligne". Attention dans ce cas il n'y a pas d'accolades.
Cette méthode est à éviter car elle revient à mélanger le code CSS et HTML. De plus la maintenance du code sera fastidieuse.
Pour gérer les exceptions il est préférable d'utiliser une classe.
Ainsi pour reprendre le thème il suffit de créer une règle dans la feuille de style : p.special {text-align : center; }
Donc le code pour l'élement P considéré devient : < p class ="special" >

La règle de style

Une feuille de style (interne ou externe) est un ensemble de règles de style.

Le sélecteur indique les parties du document concernées par la règle.

Chaque déclaration est de type : propriété : valeur ;

N'oubliez pas le caractère de ponctuation ; pour séparer chaque déclaration.

Exemples de règle de style

Exemple 1

body {font-size : 12px; width : 900px ; margin : 10px auto 10px auto ; }
Cette mise en forme s'applique à la balise BODY c'est à dire la page.
Les caractères du texte auront une taille de 12 pixels ; la page aura une largeur de 900 pixels (l'écran d'un ordinateur portable fait souvent 1400 pixels).

Attention jamais d'espace entre le nombre (de pixels) et la chaine "px" !
Grâce à la troisième déclaration la page sera centrée horizontalement dans l'écran.

margin est un "raccourci" qui remplace quatre propriétés : margin-top, margin-right, margin-bottom et margin-left. Donc il faut associer à cette "méga-propriété" quatre valeurs ou une valeur si les quatre marges sont identiques.
La valeur auto pour les marges externes droite et gauche indique que c'est au navigateur de calculer ces marges pour que la page soit centrée ! Si la largeur de l'écran est 1366 il va opérer le calcul : 1366-900 = 466 donc marge gauche = marge droite = 466/2 = 233 !

Exemple 2

h1, h2 {font-size : 130% ;}
Cette mise en forme s'applique aux éléments H1 & H2.
L'unite de mesure employée est relative. La taille du texte contenu dans H1 ou H2 sera égale à 120% de celle du parent (BODY) donc 12 pixels.
Autre solution : h1, h2 {font-size : 1.3em ;}

Les sélecteurs

Exemples de sélecteurs simples

h1 : ce sélecteur s'applique à toutes les balises H1.

* : cet sélecteur concerne toutes les balises ; * est le sélecteur universel !

h1, h2, h3 : ce sélecteur s'applique aux balises H1 et h2 et H3.

div p : ce sélecteur concerne les balise P mais pas toutes ! Seulement les balises P comprises dans le conteneur DIV quelque soit le niveau d'imbrication dans DIV (descendants directs et indirects). On dit que div p est un sélecteur de descendant.

div > p : ne pas confondre avec la règle précédente ; ne concerne que les balises P "enfants" (descendants directs) de P. On dit que div > p est un sélecteur d'enfant.

Des sélecteurs plus complexes

.info: s'applique à toutes les éléments ayant l'attribut class ="info"
p.remarque: concerne uniquement les balises P ayant l'attribut class avec la valeur "remarque".
Dans les deux cas on parle de sélecteur de classe.

#entete, #pied: s'applique seulement à deux éléments de la page ! l'élément ayant l'attribut id ="entete" et celui ayant l'attribut id ="pied". On parle de sélecteur d'identifiant

img + p : s'applique uniquement à la balise P qui suit une image. Donc en fait à la légende de l'image qui sera donc en italique. On dit que img + p est un sélecteur de voisin direct.

img [alt] {... } : s'applique à toutes les images ayant l'attribut alt et quelque soit la valeur de cet attribut.
On dit que img [alt] est un sélecteur d'attribut simple.

img [alt="mollusques"] : s'applique à toutes les images ayant l'attribut alt avec la valeur "mollusques".
On dit que img [alt="mollusques"] est un sélecteur d'attribut par valeur exacte.

Les pseudo-classes

Grâce aux pseudo-classes la mise en forme d'un élément peut changer à l'occasion d'un évènement concernant cet élément : survol, clic.
Les pseudo-classes sont apparues avec la version 2 et elles sont très pratiques car elles évitent de recourir à la programmation javaScript pour produire des effets graphiques.

a:hover{color : red; } : Utilisation de la pseudo-classe :hover qui veut dire sur survol. Donc un lien hypertexte (balise A) survolé par la souris est écrit en rouge.

img {width : 100px ;}
img:active {width : 400px; }
: Deux règles de style relatives aux images de la page ; elles sont affichées avec une largeur de 100 pixels normalement mais si clic sur l'une d'entre-elles alors la taille d'affichage de cette dernière est quadruplée !
Donc ici j'ai associé à la balise IMG la pseudo-classe :active (sur clic) pour construire le sélecteur.

Les pseudo-éléments

Les pseudo-éléments permettent de cibler certaines fractions de texte pour une mise en forme spécifique.

p:first-letter {font-size : 200% ; Float : left ; } : La première lettre de chaque paragraphe va apparaitre sous forme d'une lettrine.

p:first-line {font-weight : bold ; } : la première ligne de chaque paragraphe sera en gras.

h1:before {content : "chapitre : " ;} : Le texte de chaque balise H1 sera précédé de "chapitre :"

.ordre:after{content : "!" ;} : le texte de chaque élément affecté de la classe "ordre" sera suivi d'un point d'exclamation.

Notion d'héritage

La hiérarchie des éléments d'une page

Extraits de la partie BODY d'une page

Tous les éléments de la pages sont imbriqués dans BODY. On dit que tous les éléments sont descendants de BODY.
Dans l'exemple ci-dessus les éléments DIV identifiés "entete", "menu" et "corps" ainsi que la balise H1 sont descendants directs (ou "enfants") de BODY.
Par contre les balises H2, les DIV identifiés "images", "css", "htlm" et "divers" sont incorporées dans le bloc "corps". Ce sont donc des "enfants" de "corps" mais des descendants indirects de BODY (des "petits enfants").

Héritage

Certaines propriétés CSS peuvent être héritées c'est à dire que définies au niveau d'un élément parent, elles se propagent aux descendants.
Connaissant le principe de l'héritage les feuilles de style peuvent être très succinctes !

Exemple

Extrait d'une feuille de style :

La deuxième règle de style est totalement inutile !
En effet les balises citées dans le sélecteur de la deuxième règle (h1,h2, ... ) sont forcément descendantes de BODY puisque BODY est l'élément ancêtre. Donc ces balises héritent de BODY puisque les deux propriétés CSS citées (font-family & font-size) sont héritables.
Attention certaines propriétés (peu nombreuses) ne peuvent être héritées par les descendants.
C'est le cas des propriétés de bordurage (border-width, border-style, border-color ou le raccourci (border).

Renoncer à l'héritage

La propagation d'une propriété aux éléments descendants n'est pas forcément souhaitable.

Exemple

Tout le code de la page doit être dans une police avec serif (ou empattements) sauf les extraits de code.

Feuille de style correspondante

Explications

La propriété CSS font-family a pour valeur : une liste de polices ou de famille de polices ou un mélange des deux.
Il existe 3 familles de polices : serif, sans-serif,cursive.

Dans l'exemple tout le texte de la page sera en TNR (Times New Roman) ou à défaut une autre avec empattements.
Par contre le texte inclus dans le conteneur PRE sera affiché en Arial (ou à défaut une autre police sans empattements).

Règles de priorité

Il peut y avoir un conflit entre les différentes règles de style s'appliquant à une balise.
Par exemple plusieurs règles de style définissent une couleur de texte pour la balise P.

Exemple

Couleur par défaut pour la balise P : noire
Extrait de la feuille de style externe : p {color : navy; }
Extrait de la feuille de style interne (dans la page) : p {color : olive; }
Code d'une balise dans la partie BODY : < p style ="color : purple;"> Je porte une soutane violette ! <p >

Le texte "je porte une soutane violette !" sera t-il en noir ou bleu marine ou olive ou violet ?

Retenez : la règle en ligne est prioritaire sur la règle interne qui elle-même est prioritaire sur la règle externe. C'est ce qu'on appelle "la cascade".

Il est cependant possible de passer outre ces règles de priorité avec le mot clé !important
Ainsi si dans la feuille de style interne la règle est : p {color : olive !important; } tous les paragraphes de la page auront le texte en olive.

Avoir de bonnes pratiques en CSS

Il est déconseillé d'utiliser des règles de style en ligne car la mise à jour du code devient très fastidieuse.
Il est conseillé, pour gérer les exceptions, d'utiliser des classes. La maintenance du code se limitera alors à une seule règle de style.

Afin de laisser le mécanisme de cascade opérer il est déconseillé d'utiliser le mot clé !important.

Rappels HTML

HTML & CSS sont deux langages complémentaires. Pour maitriser CSS il faut connaitre le HTML.
Ainsi si vous ne connaissez pas les balises HTML vous ne pouvez pas imaginer les sélecteurs des règles de style CSS !
Pour bien écrire le CSS il faut bien comprendre la distinction en HTML entre balises "inline" et balises "block".
En effet certaines propriétés CSS sont spécifiques aux éléments "block". Pour prendre un seul exemple : le centrage horizontal d'un élément dans son conteneur parent n'est possible avec CSS que si l'élément en question est de type "block" . Voic plus loin.

Eléments "inline" et les éléments "block"

Dans le cadre du positionnement normal dit "dans le flux" les éléments "inline" se positionnent côte à côte tandis que les "block" (ou boites ou éléments de type bloc) se positionnent les uns en dessous des autres.
En d'autres termes il n'y a pas de saut de ligne pour les éléments en ligne alors qu'il y en a pour les éléments de type bloc.
Les boites peuvent inclure des éléments en ligne et d'autres "blocks" mais l'inverse n'est pas possible : les éléments en ligne ne peuvent contenir des boites !

Les balises en ligne sont : a, span, b, i, em, strong, del, td, th, img, ...
Les "blocks" sont : h1 à h6, div, p, ol, ul, li, table, tr, ...

Distinction au niveau des éléments "en ligne"

Les éléments "inline" sont aussi appelés dans la spécification HTML5 éléments de niveau texte.

Le cas de IMG

La balise IMG est nativement de type "inline" et "remplacé" donc on peut lui attribuer une largeur ou une hauteur (ou les deux).
Mais souvent on veut qu'une image s'affiche telle une boite (avec centrage horizontal dans son parent.

Problématique

Solution CSS

Extrait de la feuille de style :

Le centrage horizontal (margin : auto) d'un élément dans son parent ne peut s'appliquer qu'à un élément bloc.

Il faut donc transformer dans certains cas une image en "block" (display : block).
Ici une image avec la classe "grande" sera une boite centrée horizontalement dans son parent avec une largeur égale à 50% de celle du parent.
Quant à une image avec la classe "miniature", elle sera un élément "inline" positionné à gauche dans son parent avec une largeur de 15% de celle de son conteneur.

Dans le code de la partie BODY on trouvera pour les images deux cas de figure

Quoique beaucoup plus rare on peut transforme un élément block en élément en ligne.
Exemple : div.pub {display : inline ; } . Donc pas de saut de ligne avant et après un DIV class ="pub"
Retour menu