4. Développement Web - CSS





4.1. Introduction

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

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

Les CSS permettent notamment de modifier :

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

Le sélecteur peut être :

  • une balise (X)HTML
  • le symbole * qui signifie toutes les balises (X)HTML
  • une classe, introduite par un . qui représente un nouveau style applicable à toute balise
  • une identifiant (id), introduit par un # qui est un style appliqué à un seule balise pour laquelle on aura défini un id dans la partie (X)HTML
  • une expression liée à plusieurs sélecteurs

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

4.2.2. expressions liées aux sélecteurs

Voici quelques exemples de combinaisons de sélecteurs :

 sélecteur   description 
 h1   définition d'un style pour la balise h1 
 h1, h2   les balises h1 et h2 sont concernées 
 p em   balise em à l'intérieur d'un paragraphe 
 .rouge   définition d'une classe (ex: <p class="rouge"> ... <p>) 
 #menu   définition du style d'un identifiant (ex: <balise id="menu">..<balise>) 
 #menu > p   tout paragraphe descendant direct de menu 
 a:link   pseudo classe comme :link, :visited, :hover, :first-child 
 p:first-child   premier paragraphe 
 h1+p+p   second paragraphe dans un enchaînement h1 suivi de deux paragraphes 
 input[type=text]   champ de formulaire de type text 
Exemple de combinaisons de sélecteurs

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

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>

Voici de l'italique. Puis une balise span est ouverte, on remet de l'italique, et on referme la balise span. Enfin, on remet de l'italique.

  

<p id="ce_paragraphe_1">Voici de <em>l'italique</em>. Puis une balise span 
est ouverte, <span>on remet de <em>l'italique</em>, et on referme la balise 
span</span>. Enfin, on remet de <em>l'italique</em>.</p>

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 :

  1. <style>
  2. #ce_paragraphe_2 em {
  3.     color:red;
  4.     text-transform:uppercase;
  5. }
  6. </style>

Voici de l'italique. Puis une balise span est ouverte, on remet de l'italique, et on referme la balise span. Enfin, on remet de l'italique.

  

<p id="ce_paragraphe_2">Voici de <em>l'italique</em>. Puis une balise span 
est ouverte, <span>on remet de <em>l'italique</em>, et on referme la balise 
span</span>. Enfin, on remet de <em>l'italique</em>.</p>

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 :

W3 Box Model
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 :

  1. <style>
  2. #my_box {
  3.     margin: 10px 15px 10px 15px;
  4.     /* ou */
  5.     margin: 10px 15px;
  6.     /* ou pour centrer */
  7.     margin: 10px auto;
  8.    
  9.     padding: 10px;
  10.    
  11.     border: 2px solid green;
  12. }
  13. </style>
  14.  

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

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 :

4.2.8. changement de police de caractères

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

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

une valeur de 10000

  

<style>
.trop_styleee {
	font: italic small-caps bold  24px/30px serif;
}
</style>
</head>
<body>
<p class="trop_styleee">une valeur de 10000</p>
</body>

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.

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 :

capitalize

uppercase

underline

overline

line through

  

<p style="text-transform: capitalize;">capitalize</p>
<p style="text-transform: uppercase;">uppercase</p>
<p style="text-decoration: underline;">underline</p>
<p style="text-decoration: overline;">overline</p>
<p style="text-decoration: line-through;">line through</p>

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 :

  1. <div style="clear: both;"></div>   

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 :

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 :

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 :

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.

  1. ul li:first-child {
  2.     color: red;
  3. }
  4.  
  5.  
  6. div#contents p {
  7.     width: 70%;
  8. }
  9.    
  10. /* règle 1 */ 
  11. div#contents p:nth-child(even) {
  12.     color: blue;
  13.     text-align: right;
  14. }
  15.  
  16. /* règle 2 */
  17. div#contents p:nth-child(3n+1) {
  18.     color:green;
  19.     text-align: left;
  20. }  

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 :

 paragraphe   règle 1
bleu 		  règle 2
vert 
 1      vert 
 2   bleu    
 3       
 4   bleu   vert 
 5       
 6   bleu    
 7      vert 
 8   bleu   vert 
 9       
 10   bleu   vert 
Application des règles nth-child

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 :

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 :

  1. :root {
  2.     --cell_width: calc(100vw / 6);
  3.     --cell_height: calc(100vh / 6);
  4.     --div_width: calc(4 * var(--cell_width));
  5.     --div_height: calc(4 * var(--cell_height));
  6. }

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

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

  1. body {
  2.     margin: 0;
  3.     display: grid;
  4.     grid-template-columns: repeat(6, var(--cell_width) );
  5.     grid-template-rows: repeat(6, var(--cell_height) );
  6.     font-family: Ubuntu, Verdana, sans-serif;
  7.     font-size: 16px;
  8. }
  9.  
  10. div {
  11.     grid-row: 2;
  12.     grid-column: 2;
  13.     padding: 0;
  14.     background: #884444;
  15.     width: var(--div_width) ;
  16.     height: var(--div_height) ;
  17.     overflow: scroll;
  18. }

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 :

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 :

  2.     <style>
  3.     x-tag {
  4.         font-family: 'Roboto Mono', 'Ubuntu Mono', monospace;
  5.         color: #936;
  6.         font-weight: bold; 
  7.     }
  8.     </style>
  9. </head>
  11.     <p>La balise <x-tag>p</x-tag> permet d'introduire un paragaphe.</p>
  12. </body>
  13.  

Le rendu obtenu est le suivant :

La balise p permet d'introduire un paragaphe.

  

<p class="center">La balise <x-tag>p</x-tag> permet d'introduire un paragaphe.</p>

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 :

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

Flexbox se base sur deux axes :

Mozilla Flexbox description

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

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.

Suivre le lien suivant pour avoir un aperçu plus détaillé.

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.

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Bootstrap demo</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  8.        rel="stylesheet"
  9.        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  10.        crossorigin="anonymous">
  11.   </head>
  12.   <body>
  13.     <h1>Hello, world!</h1>
  14.    
  15.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  16.    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
  17.    crossorigin="anonymous">
  18.     </script>
  19.   </body>
  20. </html>

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 :

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






<< XHTML