Chapitre 3: Mise en forme avec CSS

Contenus Capacités attendues Commentaires

Modalités de l’interaction entre l’homme et la machine

Événements

Identifier les différents composants graphiques permettant d’interagir avec une application Web

Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter

 Il s’agit d’examiner le code HTML d’une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript.

Le W3C a défini deux langages afin de bien séparer le fond et la forme. Le html décrit le contenu du document: le fond, et le css décrit sa forme. Le css permet de mettre en forme notre page web pour personnaliser son aspect. Comme nous allons le voir le CSS pour Cascading Style Sheet (Feuille de styles en cascade) est basé sur la sélection d’éléments d’un page html afin de leur appliquer des styles spécifiques.

CSS3 Styling
©  CC BY 3.0 via Wikimedia Commons

Nous allons d’abord voir comment lier une feuille de styles à notre page html.

1 Intégration de code css dans une page html

Il existe diverses façons d’appliquer du code css à une page, la méthode recommandée est d’écrire le code css dans un fichier avec l’extension .css, par exemple style.css et le lier dans l’en-tête du document(le <head>).

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

C’est la méthode préférée lorsque l’on a un ensemble de pages qui contiennent des styles identiques, cela permet d’alléger l’écriture du code et les requêtes vers le serveur de documents.

  1. Utilisation d’une feuille de style interne

On intègre le code css au sein de balises <style> dans l’entête du document(le <head>).

<head>
    <style>
        body {
              background-color: linen;
             }
        h1 {
            color: maroon;
            margin-left: 40px;
            }
    </style>
</head>

Méthode pratique lorsque l’on a des documents html d’une seule page ou avec des styles spécifiques.

  1. Insertion directe dans les balises html

On utilise alors l’attribut style au sein de la balise ouvrante de l’élément à styler.

<p style="color: red; font-weight: bold;">
    Maintenant mon texte est écrit en rouge et en gras.
</p>
RENDU

Maintenant mon texte est écrit en rouge et en gras.

2 Syntaxe

Une règle css est constituée d’un sélecteur suivi d’un bloc de déclaration entre accolades. Chaque déclaration se termine par un point-virgule.

selecteur de balises {
    attribut-css: valeur;
    attribut-css2: valeur2;
    ...
}

Remarque: Les points-virgules sont obligatoires, mais pas l’indentation. Cette dernière est cependant conseillée pour rendre le code plus lisible.

Un code css qui permet d’écrire tous les éléments <strong> en rouge et soulignés.

strong {
  color: red;
  text-decoration: underline;
}

3 Les sélecteurs

sélecteur Éléments visés
p {...} Tous les éléments avec la balise <b>
p, li{...} Tous les éléments <p> et les éléments <p>
div p{...} Tous les éléments <p> contenus dans(descendants d’)une balise <div>
.centre {...} Tous les éléments ayant un attribut class="centre"
#formulaire {...} L’élément ayant un attribut id="formulaire"
p.centre {...} Tous les éléments <p> ayant un attribut class="centre"

4 Les propriétés

propriété Mise en forme
color: ...; Couleur de l’élément.
background-color: ...; Couleur de l’arrière-plan de l’élément.
text-align: ...; Alignement du texte(gauche, centré, justifié…).
text-decoration: ...; Décoration du texte(souligné, barré…)
font-size: ...; Taille de la police
font-weight: ...; Graisse de la police(plus ou moins gras)
margin: ...; Espacement par rapport aux voisins
padding: ...; Espacement par rapport aux bords de sa boite englobante

L’ensemble des propriétés en css est listé sur l’excellent site MDN.

5 Positionnement en css

5.1 display: inline; et display:block;

Il existe deux propriétés principales de positionnement en css:

  • display: block: les éléments se placent les uns au-dessus des autres et occupent toute la largeur disponible. C’est la propriété appliquée par défaut sur les balises de titres <h1> à <h6> ou encore aux paragraphes <p> par exemple.
<h1 style="background-color:yellow;">Titre de niveau 1</h1>
<p style="background-color:lime;"> Un paragraphe avec un fond vert clair pour voir l'espace qu'il occupe à l'écran.</p>
RENDU

Titre de niveau 1

Un paragraphe avec un fond vert clair pour voir l’espace qu’il occupe à l’écran.

  • display: inline: les éléments se placent les uns à côté des autres, et occupent exactement la place dont ils ont besoin. C’est la propriété appliquée par défaut sur les balises <strong> ou <span>.
<p style="background-color:lime;"> Un paragraphe avec un fond vert clair et des éléments inline <strong>strong</strong> et  <span style="background-color=ligthblue;">span</span> pour voir le positionnement à l'écran.</p>
RENDU

Un paragraphe avec un fond vert clair et des éléments inline strong et span pour voir leurs positionnement à l’écran.

5.2 Des positionnements plus évolués

Lorsqu’on laisse les éléments se placer naturellement à l’écran (de haut en bas, ou de droite à gauche), on dit que les éléments sont positionnés dans le flux. Si l’on souhaite les positionner ailleurs, c’est-à-dire les sortir du flux, on utilise principalement les propriétés css:

  • display: avec notamment les valeurs flex pour le positionnement 1D et grid pour le positionnement 2D.
  • position: avec les valeurs relative, absolute ou fixed.
  • float avec les valeurs left ou right.

6 En plus

  • Les commentaires utilisent la syntaxe suivante: /* Un commentaire */
  • Les attributs id et les class sont souvent ajoutés au html pour pouvoir les sélectionner aisément en css. Attention cependant, plusieurs éléments peuvent avoir la même classe, mais un id est unique.
  • Inspecteur de styles du navigateur: pour inspecter un élément il suffit de le sélectionner et de faire un clic droit de la souris puis de sélectionner Inspecter l'élément.