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

4.2.2.a  Premier exemple

4.2.2.b  Second exemple

Voici un autre exemple : ici, toute balise em qui découle directement (>) de #ce_paragraphe apparaîtra 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

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-bottom, margin-left, margin-right
• padding de même pour padding : padding-top, padding-bottom, padding-left, padding-right
• 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 :

1. block, un élément en mode block se comporte comme une "brique" solide :
   • saut de ligne : il commence toujours sur une nouvelle ligne
   • largeur : il occupe automatiquement toute la largeur disponible de son conteneur parent (100%), sauf si une largeur spécifique est définie
   • dimensions : il accepte les propriétés width, height, padding et margin sur les quatre côtés
   • exemples : <div>, <h1> à <h6>, <p>, <section>, <ul>
2. inline, un élément inline se comporte comme un mot dans une phrase :
   • saut de ligne : il ne commence pas sur une nouvelle ligne. Il se place à côté de l'élément précédent
   • largeur : il n'occupe que la largeur nécessaire à son contenu
   • dimensions : on ne peut pas lui donner de width ou de height
   • margin/padding : les marges et paddings horizontaux fonctionnent bien, en revanche, pour le vertical, cela peut visuellement chevaucher d'autres lignes sans repousser le contenu environnant
   • exemples : <span>, <a>, <strong>, <em>,
3. inline-block, il permet d'aligner des éléments comme du texte tout en gardant les propriétés d'un bloc
   • saut de ligne : comme le inline, il ne commence pas sur une nouvelle ligne
   • dimensions : comme le block, il accepte les propriétés width, height, padding et margin
   • usage type : idéal pour créer des boutons, des éléments de barre de navigation ou des cartes de produits que l'on veut aligner horizontalement

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
• em unité relative liée à la taille de la police de caractères, si on utilise une police de 16 pixels de haut, alors 1em représente 16 pixels

On utilise généralement le pixel qui est le plus naturel et le plus simple à utiliser pour des boîtes car il correspond à une mesure liée à l'écran. Pour les polices on utilise em.

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
  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
  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

  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

  Afficher le code CSS

  1. <head>
  2. <style>
  3. /* un style unique pour un id */
  4. #my_div {
  5.   background-color: green;
  6.   color: white;
  7.   font-size: 14px;
  8. }
  9. /* un style réutilisable */
  10. .red {
  11.     color: red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h1 class="red">Titre en rouge</h1>
  17.  
  18. <div id="my_div"> <p>Lorem ipsum dolor sur font vert</p> </div>
  19. </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.

• La police Roboto : The quick brown fox jumps over the lazy river
• La police Lato : The quick brown fox jumps over the lazy river
• La police Verdana : The quick brown fox jumps over the lazy river
• La police TrebuchetMS : The quick brown fox jumps over the lazy river
• La police Times New Roman : The quick brown fox jumps over the lazy river
• La police Times New Roman : The quick brown fox jumps over the lazy river

On distingue généralement les polices serif des polices sans serif :

• les polices serif (avec empattement) possèdent des petites "extensions" ou des "pieds" au bout des traits des lettres
• les polices sans serif sont plus "rondes"

T Serif

T Sans Serif

4.2.9. espacement des lettres

On utilise la propriété letter-spacing qui permet d'améliorer la lisibilité dans certains cas :

• letter spacing de -2px : Stranger Things
• letter spacing de -1px : Stranger Things
• letter spacing de 0px : Stranger Things
• letter spacing de 1px : Stranger Things
• letter spacing de 2px : Stranger Things
• letter spacing de 3px : Stranger Things

Exemple Stranger Things avec police Grenze et letter-spacing de -1px :

4.2.10. hauteur de ligne

La propriété line-height permet de définir la hauteur d'une ligne. Par exemple 1.2em;, ce qui permet de rendre le texte plus lisible :

4.2.11. les couleurs

On utilise la propriété color pour modifier 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.12. 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.13. 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 suivant l'ordre d'apparition (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.14. spécialisation des listes

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

4.2.14.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.14.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.14.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 :

• row + justify-content
• row + align-items

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.

Autre exemple d'interface pour le développement en assembleur.