4. Développement Web - CSS

4.1. Introduction

Les CSS ou Cascading Style Sheets permettent la mise en forme le contenu XHTML.

• le XHTML représente le fond (texte, contenu)
• le CSS représente la forme (décoration, disposition)

Un aperçu des possibilités du CSS nous est donné par le site CSS Zen Garden.

Les CSS permettent notamment de modifier :

• la taille des éléments
• leur positionnement
• la taille et forme des polices de caractères
• les couleurs de fond et de caractères
• et bien d'autres choses encore

La version actuelle des CSS est la version 3, liée à (X)HTML 5.

4.2. Règles

Un fichier CSS se compose d'un ensemble de règles qui définissent des styles qui seront appliqués à des éléments de la page (X)HTML.

4.2.1. format des règles

Le format d'une règle CSS est très simple :

selecteur {
 	propriete_1 : valeur_1;
 	propriete_2 : valeur_2;
 	...
 	propriete_n : valeur_n;
}

Les propriétés peuvent être, comme nous allons le détailler par la suite :

• la manière d'afficher un élément : display
• la famille de la police de caractères : font-family
• la taille de la police de caractères : font-size
• la couleur d'affichage : color
• la couleur de fond : background-color
• les dimensions de la marge d'un élément: margin
• etc

4.2.2. expressions liées aux sélecteurs

Voici quelques exemples de combinaisons de sélecteurs :

Les pseudo classes sont nombreuses (voir ci-après pour nth-child), on trouvera notamment :

• :link qui représente tous les liens non visités
• :visited qui représente tous les liens visités
• :hover qui représente le passage de la souris au dessus d'un élément
• :focus qui représente l'élément qui prend le focus comme un champ input ou un textarea
• :first-child qui représente le premier élément comme dans p:first-child
• :nth-child(n) qui représente le n^ième élémentd'une suite d'éléments

Par exemple div.menu p em:first-letter signifie la première lettre de la balise em à l'intérieur d'un paragraphe contenu dans un div de classe menu.

Voici un autre exemple : ici, toute balise em qui découle directement de #ce_paragraphe apparaitra en rouge et en majuscule.

<style>
#ce_paragraphe_1 > em {
    color : red;
    text-transform : uppercase;
}
</style>

Le résultat obtenu est que le premier et le troisième <em> apparaissent en rouge et en majuscule, alors que ce n'est pas le cas pour le second qui est à l'intérieur d'un span.

Pour obtenir tous les em en rouge, il aurait fallu écrire :

4.2.3. héritage

Les propriétés CSS d'une balise sont héritées par ses descendants d'où le terme Cascading (en cascade). L'ordre de définition des règles est également important.

4.2.4. Notion de boîte (box)

Chaque élément de la page est défini par :

• une marge (margin) : l'espace qui le sépare des autres éléments
• une bordure (border) : généralement vide
• un contour (padding) : l'espace qui sépare le contenu du bord

Modèle de boîte - image issue de W3Scools.com

Voir w3schools.boxmodel pour de plus amples informations.

On peut donc définir les propriétés suivantes :

• margin ou l'une ou plusieurs des propriétés margin-top, margin-down, margin-left, margin-right
• padding de même pour padding
• border qui prend trois paramètres : la taille en pixel par exemple, le style de remplissage (solid, dashed, ...) et la couleur

4.2.5. To be block or not to be

On a vu que certaines balises (X)HTML peuvent contenir d'autres balises (<p> contient <span>, <ul> contient <li>). En CSS, cette notion est liée à l'affichage ou l'enchaînement des éléments (propriété display) qui peut être de type none, block, inline ou inline-block. Il existe également d'autres modes comme flex, grid, table-cell, table-row, etc :

• Les éléments de rendu CSS block se placent l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, ou min-height,...
• Les éléments de rendu inline se placent toujours l'un à côté de l'autre afin de rester dans le texte (par exemple la balise <strong>). Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : leur taille va être déterminée par le texte ou l'élément qu'ils contiennent. Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales.

Source : alsacreations

4.2.6. Grandeurs et unités

Les grandeurs sont définies en fonction de l'unité qui les suivent : w3schools.units

• in pour le pouce (inch) qui est égal à 96 pixels ou 72 points
• px pour le pixel
• pt pour le point
• mm, cm pour millimètre et centimètre
• pc pour pica ou point DTP (Desktop Publishing Point), c'est à dire 12 points

On utilise généralement le pixel qui est le plus naturel et le plus simple à utiliser car il correspond à une mesure liée à l'écran.

4.2.7. introduire du CSS dans une page web

Il existe quatre possibilités :

• dans la partie entête head de la page XHTML en faisant référence à un fichier
  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ez_web.php on line 422
  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ez_web.php on line 422
  

  Afficher le code

  1. <head>
  2.   <link rel="stylesheet" type="text/css" href=".../style.css" />
  3. </head>
• dans la partie entête head de la page XHTML en écrivant une section CSS
  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ez_web.php on line 422
  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ez_web.php on line 422
  

  Afficher le code

  1. <head>
  2. <style type="text/css">
  3.   .red {
  4.     background-color: red;
  5.   }
  6.  
  7.   #my_div {
  8.     background-color: green;
  9.     color: white;
  10.     font-size: 14px;
  11.   }
  12. </style>
  13. </head>
• au niveau des balises XHTML en utilisant l'attribut style

  Un titre

  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ensl1i_devweb1_lib.php on line 32
  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ensl1i_devweb1_lib.php on line 32
  

  Afficher le code

  1. <h1 style="color: wheat;">Un titre</h1>
• au niveau des balises XHTML en utilisant l'attribut class ou en attribuant un id à un élément :

  Titre en rouge

  Lorem ipsum dolor sur font vert

  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ensl1i_devweb1_lib.php on line 32
  
  Warning: Undefined variable $file_name in /home/jeanmichel.richer/public_html/ensl1i_devweb1_lib.php on line 32
  

  Afficher le code

  1. <head>
  2. <style>
  3. #my_div {
  4.   background-color: green;
  5.   color: white;
  6.   font-size: 14px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1 class="red">Titre en rouge</h1>
  12.  
  13. <div id="my_div"> <p>Lorem ipsum dolor sur font vert</p> </div>
  14. </body>
  On changera uniquement le style à l'endroit modifié et il faut que la classe red soit définie dans un fichier de style ou dans la partie style à l'intérieur de la balise head de la page XHTML

4.2.8. changement de police de caractères

Concernant les polices de caractères, plusieurs éléments peuvent être définis :

• font-family : la famille de police de caractères (Arial, "Arial Black", sans-serif, serif, Verdana, Ubuntu, ...)
• font-size : taille de la police (ex: 14pt, 150%, small, medium, large, ...)
• font-style : normal, italic ou oblique
• font-weight : normal, bold pour mettre en gras
• font-variant : normal, small-caps, initial, inherit

Avec la propriété font : font-style font-variant font-weight font-size/line-height font-family, on peut réunir les propriétés précédentes (cf CSS Fonts):

Il existe plusieurs polices (Google Fonts) que l'on peut inclure dans sa page.

4.2.9. les couleurs

On utilise color pour la couleur de la police par exemple et background-color pour la couleur du fond.

• color: #rgb
• color: #rrggbb
• color: rgb(r, g, b)
• ou un nom de couleur : Color codes and names

Ici rgb signifie une valeur hexadécimale entre $0$ et $F$, et rr, gg ou bb une valeur hexadécimale entre $00$ et $FF$

A noter : background permet également de définir une image de fond.

Pour en savoir plus sur la définition des couleurs on peut consulter cette page.

4.2.10. alignement et transformation du texte

Par exemple, à l'intérieur d'un paragraphe ou d'un label, on peut modifier la disposition du texte :

• text-align : left, right, center, justify
• text-transform : none, capitalize, uppercase, lowercase
• text-decoration : none, underline, overline, line-through, blink

4.2.11. positionnement des éléments

Les éléments apparaissent dans l'ordre dans lequel ils sont définis dans le fichier XHTML, cependant on peut modifier leur positionnement (propriété position) :

position : static

c'est la positionnement par défaut, les éléments apparaissent les uns à la suite des autres (cf static)

position : fixed

on positionne l'élément par rapport aux dimensions de la fenêtre, l'élément ne bougera pas lorsque l'on utilise les barres de scrolling. Il faudra également fixer la largeur ou la hauteur de l'élément (cf fixed)

position : relative

l'élément est déplacé par rapport à la position qu'il devrait normalement occuper (cf relative)

position : absolute

l'élément est positionné relativement à son parent qui possède une position autre que statique. Si aucun parent de ce type existe alors on positionne par rapport à la page. Les éléments en positionnement absolu sont retirés du flux normal d'affichage (cf absolute)

On peut également utiliser la propriété float avec l'une des valeurs suivantes : none, left, right ou inherit (hérité du parent) pour modifier le positionnement des éléments de type boîte.

Pour mettre fin à la propriété float on utilise :

4.2.12. spécialisation des listes

On peut modifier le rendu des listes en fonction de ses besoins.

4.2.12.a  listes non numérotées

On utilise la propriété list-style-type qui peut prendre les valeurs suivantes :

• none : rien n'est affiché avant le texte
• square : un carré précède le texte
• circle : un cercle précède le texte, c'est le style par défaut

Remarque : ces valeurs peuvent aussi s'appliquer à des listes numérotées.

4.2.12.b  listes numérotées

On modifie le type de numérotation en utilisant la même propriété mais en utilisant les valeurs :

• decimal : 1, 2, 3
• lower-alpha : a, b, c
• upper-alpha : A, B, C
• lower-roman : i, ii, iii, iv
• upper-roman : I, II, III, IV

4.2.12.c  listes avec image

Il est possible de remplacer les cercles ou carrés par une image en définissant la propriété list-style-image. Cependant le texte ne sera pas centré verticalement par rapport à l'image. Il est donc préférable de suivre ce qui est fait dans cet exemple.

4.3. Mise en forme des tableaux

La première propriété à fixer pour les tableaux est border-collapse : collapse, elle permet de coller les cellules des tableaux. On peut également centrer le tableau en positionnant la propriété margin à auto.

On a vu dans la partie HTML que les tableaux sont composés de trois parties :

• thead
• tbody
• tfoot

Ces balises peuvent être mises en forme ainsi que les balises <th> et <td> qui les contiennent.

Vous trouverez sur cette page des exemples de mise en forme des tableaux.

4.4. first, last, nth-child

CSS permet de gérer plus finement certains éléments grâce à ce que l'on appelle des pseudo-classes (évoquées précédemment).

Sur l'exemple qui suit, chaque premier <li> dans une liste, sera affiché en rouge.

Pour les paragraphes, ils occuperont 70% de la largeur de la page. On utilise ensuite une expression passée en paramètre de nth-child, de la forme $An+B$ où $A$ et $B$ sont des constantes et $n$ varie de $0$ à $k$, $k$ étant défini par le nombre d'éléments associés à la règle. Les mots clés comme even ou odd remplacent respectivement les expressions $2n$ et $2n+1$.

La première règle indique que les paragraphes pairs (dans une suite de paragraphes contenus dans un div d'identifiant contents) seront affichés en bleu. La seconde règle indique que les paragraphes 1, 4, 7, 10, etc seront affichés en vert. Attention, le premier paragraphe est à l'indice 1.

Etant donné que la règle 2 est placée dans le fichier CSS après la règle 1, elle est prioritaire par rapport à la règle 1 :

Vous pouvez le vérifier sur cet exemple.

4.5. Variables

CSS autorise (depuis la version 3), la définition et l'utilisation de variables. On peut également réaliser des calculs avec ces variables. Généralement, il s'agit de calculer des distances en pixels pour positionner certains éléments sur la page de manière à s'adapter, au mieux, aux différents types d'écrans : PC, Tablet, téléphone portable.

Par exemple, on veut que tel élément occupe 1/3 de la largeur de la page et tel autre, les 2/3. On peut déjà faire cela en CSS en utilisant width: 33%;.

On peut également créer des variables qui stockent des couleurs.

Vous trouverez des informations plus détaillées sur le site suivant :

• W3Schools variables

Voici en outre une brève introduction qui utilise des variables pour diviser le viewport, c'est à dire la fenêtre du navigateur, en une grille de 6x6 cases. Les cases sur les bords ne sont pas utilisées et les cases du centre sont utilisées pour afficher un titre et des paragraphes : Grid et CSS.

On commence par définir des variables sous la forme suivante au niveau d'une balise :root qui a été introduite pour gérer la définition des variables globales :

On définit ici quatre variables qui commencent par -- :

• --cell_width qui est égale à 100% de la largeur (width) en pixels du viewport (vw) que l'on divise par 6
• --cell_height qui est égale à 100% de la hauteur (height) en pixels du viewport (vh) que l'on divise par 6
• --div_width qui est égale à 4 fois la valeur de --cell_width, ce sera la largeur d'un div que l'on va placer au centre de l'écran
• --div_height qui est égale à 4 fois la valeur de --cell_height, ce sera la hauteur du div

Il ne reste plus qu'à définir la grille et placer le div au centre :

On indique que body sera géré sous forme d'une grille (display: grid) composée de 6 cases en hauteur (grid-template-rows) et 6 cases en largeur (grid-template-columns).

En outre, il faut indiquer que le div commence à la deuxième ligne et deuxième colonne de son conteneur grâce = grid-row et grid-column.

On notera que pour utiliser la valeur d'une variable il faut utiliser la fonction var().

Attention, si vous désirez ajouter ou soustraire 10 pixels à une variable, il faudra généralement indiquer l'unité px sinon le calcul ne fonctionnera pas : calc(--cell-width - 10px)

4.6. Validation XHTML et CSS

La possibilité vous est offerte de pouvoir tester si votre page est conforme aux standards en vigueur :

• pour tester la validité du fichier pour (X)HTML : http://validator.w3.org/
• pour tester la validité du fichier pour CSS : http://jigsaw.w3.org/css-validator/

4.7. Extensions CSS

4.7.1. Définir ses propres balises et les styliser

Il est possible de définir ses propres balises XHTML, il suffit pour cela que la balise commence par x-. On peut alors définir le style de la balise en question :

Le rendu obtenu est le suivant :

4.8. Positionnement intelligent

Il existe plusieurs frameworks CSS, le plus utilisé étant probablement Bootstrap. Celui-ci utilise à la fois du CSS et du Javascript.

Une autre alternative uniquement CSS pour le positionnement des éléments est Flexbox.

4.8.1. Flexbox

Pour la disposition des éléments, il suffit d'utiliser flexbox qui consiste à modifier la propriété display d'un conteneur à la valeur flex. Pour en apprendre plus concernant Flexbox vous pouvez suivre :

• ce cours de la foundation Mozilla
• cette vidéo d'introduction
• cette vidéo complète

Globalement, flexbox définit deux directions pour lesquelles on va pouvoir spécifier comment placer les composants qui sont à l'intérieur du composant défini avec un display de valeur flex.

• le composant de display flex est qualifié de container
• les composants à l'intérieur du composant flex sont qualifiés d'items

Flexbox se base sur deux axes :

• l'axe principal (main axis)
• l'axe croisé (cross axis) qui est perpendiculaire à l'axe principal

• l'axe principal peut être horizontal et donc l'axe croisé sera vertical : flex-direction : row, cela implique que les items seront placés horizontalement
• ou alors l'axe principal est vertical et donc l'axe croisé sera horizontal : flex-direction : column, cela implique que les items seront placés verticalement

On peut ensuite positionner les items en utilisant deux propriétés :

• justify-content qui est relatif à l'axe principal
• align-items qui est relatif à l'axe croisé

Par exemple, pour centrer horizontalement et verticalement les items, on utilise la valeur center, mais il existe bien d'autres manières de positionner les items : exemple.

4.8.2. Bootstrap

En Septembre 2023, Bootstrap est en version 5.3. Il s'agit d'un framework de positionnement et d'organisation des balises HTML qui utilise CSS ainsi que javascript. Bootstrap propose également un ensemble de composants (Components) comme les accordions, Carousel, Alert, NavBar, Modal, etc

Vous pouvez consulter la Documentation Bootstrap 5.3.

4.8.2.a  Modèle de page

Voici un exemple de page qui utilise Bootstrap. On utilise jsdelivr.com un CDN (Content Delivery Network) au lieu de mettre tous les fichiers sur sa machine.

• il faut donc inclure bootstrap.min.css au niveau des balises meta
• ainsi que bootstrap.bundle.min.js que l'on conseille d'ajouter en fin de page

4.8.2.b  Container, row et col

L'élément de base est le container qui peut être composé de lignes qui contiennent des colonnes, c'est ce que l'on appelle un modèle de grille.

4.8.2.c  Margin et padding

Tout est expliqué sur cette page.

4.8.2.d  Exemple

Voici un petit exemple de mise en forme avec bootstrap. Une fois la page ouverte tapez Ctrl + U pour étudier son code source. On a créé une page avec les caractéristiques suivantes :

• le container principal (balise main) possède une marge de type 3 (m-3) et un padding (p-2) de type 2 et il aura un fond gris-clair (bg-secondary-subtle)
• la balise h1 qui indique le titre du container possède une police de taille 2 (fs-2) et une couleur de fond grise
• le container est composé d'une ligne et de deux colonnes : la colonne de gauche occupe 8 cases et la colonne de droite 4 cases, ce qui fait un total de 12 cases pour les deux colonnes
• al colonne de gauche est de type overflow-hidden, ce qui implique que si des éléments qui la composent débordent sur la colonne de droite, ils ne seront pas affichés en totalité
• l'image dans la colonne de gauche est centrée en étant placée dans un div de classe text-center

Je vous laisse découvrir les autres classes comme text-light, opacity-50 ou bg-success.