M104
Mettre en forme une page web
avec les feuilles de style CSS
Dans ce module, vous allez :
• Maitriser le CSS pour la mise en forme d’une page web
• Utiliser correctement des positionnements pour
l’organisation d’une page web avec CSS
• Ajouter des animations
• Adapter des templates HTML/CSS à un site web statique
Ce que vous allez
apprendre dans ce
CHAPITRE 1
chapitre :
INTRODUIRE ✓ Présenter les éléments CSS
LE CSS ✓ Gérer les types d’intégration du
CSS
✓ Utiliser les différents CSS
1. Présentation du CSS
CHAPITRE 1
2. Codification des couleurs
3. Unités de mesure
4. Positions (center, left, right)
INTRODUIRE 5. Fonts
LE CSS 6.
7.
Types d’intégration du CSS
Sélecteurs simples (element,
class, id)
8. Sélecteurs complexes
9. Pseudo classes
CHAPITRE 01 INTRODUIRE LE CSS
Application d’un style à un code HTML
Il existe 3 manières pour introduire le style à une balise donnée :
• Dans une balise, avec l'attributstyle
• Dans l'en-tête, après la balise title (dans la partie head)
• Dans un fichier d’extension .css
La troisième méthode, basée sur l’utilisation du langage CSS dans un fichier
séparé, est la technique recommandée
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Présentation du CSS
Le langage CSS (Cascading Style Sheets) est destiné à gérer le
contenu et la structure d’une page web.
CSS permet de gérer la mise en forme du contenu d’une page : le
texte (couleur, taille, casse, etc.), les images, les tableaux, les
formulaires, etc.
CSS permet également de dimensionner et positionner les
éléments dans la page web
CSS est utilisé aussi pour gérer les animations.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Unités de mesure
a) Unités absolues
Ne dépendent d’aucun autre élément, toujours fixes.
Utilisation : largeur (width), hauteur (height), padding, margin, font-size.
•Unités : •Conversions importantes :
• px → pixel • 1 in = 96 px
• pt → point (1 pt = 1/72 in) • 1 cm = 37,8 px
• in → pouce • 1 mm = 3,78 px
• cm → centimètre
• mm → millimètre
• pc → pica (1 pc = 12 pt)
CSS M104
[Link] [Link]
<!DOCTYPE html>
<html lang="en">
<head>
div { <meta charset="UTF-8">
<meta name="viewport"
width: 150px;
content="width=device-width, initial-
height: 150px; scale=1.0">
<title>Document</title>
background-color: lightblue; <link rel="stylesheet" href="[Link]">
</head>
color: white;
<body>
} <div>welcome to CSS </div>
</body>
</html>
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
EXCERCICE
Crée 3 <div> :
• 1 de largeur 5cm
• 1 de 2in
• 1 de 100px
Observer le rendu dans le navigateur.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
b) Les unités relatives au texte
Les unités relatives changent en fonction d’un autre élément :
• soit de la taille de la police du parent (l’élément au-dessus),
• soit de la taille de la police de base du document (souvent celle
du <html>).
Leur valeur s’adapte selon le contexte, contrairement aux unités
absolues (comme px) qui restent fixes.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Types :
•em : proportionnelle à la taille de police du parent
•rem : proportionnelle à la taille de police racine (html)
•ex : hauteur de la minuscule actuelle (rare)
•ch : largeur du caractère “0” (rare)
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
1. em → proportionnelle à la taille de la police
du parent :
•Si le parent a une taille de 16px :
→ 1em = 16px
→ 2em = 32px
CSS M104
[Link] [Link]
<!DOCTYPE html>
<html lang="fr">
<head>
div { <meta charset="UTF-8">
font-size: 16px; <title>Exemple em</title>
} </head>
<body>
p {
<div>
font-size: 1.5em; /* 1.5 × 16px = 24px
<p>Ce texte a une taille de 24px
*/ (1.5em × 16px).</p>
} </div>
</body>
</html>
Le paragraphe aura une taille de texte de 24px.
CSS M104
Attention : si un élément est à l’intérieur d’un autre, la valeur em peut s’additionner !
[Link] [Link]
<!DOCTYPE html>
div { <html lang="fr">
font-size: 20px; <head>
<meta charset="UTF-8">
}
<title>Exemple em imbriqué</title>
div p {
</head>
font-size: 1.2em; /* 1.2 × 20px = 24px */ <body>
} <div>
div p span { <p>
Texte du paragraphe avec une taille de 24px,
font-size: 1.5em; /* 1.5 × 24px = 36px */
<span>et ce texte dans le span fait 36px.</span>
}
</p>
</div>
</body>
</html>
CHAPITRE 01 INTRODUIRE LE CSS
2. rem → proportionnelle à la taille de la racine
(html)
C’est plus stable, car elle ne depend pas du
parent, mais a l ’element racine <html>.
CSS M104
[Link] [Link]
<!DOCTYPE html>
html { <html lang="fr">
<head>
font-size: 10px;
<meta charset="UTF-8">
} <title>Exemple rem</title>
p { </head>
<body>
font-size: 2rem;
<p>Ce texte a une taille de 20px
} (2rem × 10px).</p>
</body>
</html>
Le paragraphe aura une taille de texte de 24px.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
3. ex → hauteur de la lettre “x” de la police utilisée
Elle change selon la forme des lettres par exe Arial , Times
New Roman etc.
[Link]
p {
line-height: 2ex;
L’espace entre les lignes sera égal à 2 fois la hauteur de la lettre
} “x”.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
4. ch → largeur du caractère “0” de la police actuelle
[Link]
p {
width: 40ch;
}
Le paragraphe aura une largeur équivalente à 40 zéros (≈ 40 caractères).
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Unité Dépend de Exemple Résultat
font-size:
em Taille du parent 1.5 × taille du parent
1.5em;
font-size:
rem Taille du <html> 2 × taille racine
2rem;
Hauteur de la lettre line-height:
ex 2 × hauteur “x”
“x” 2ex;
Largeur = 40
ch Largeur du “0” width: 40ch;
caractères
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
unités relatives au viewport
Les unités relatives au viewport dépendent de la taille de la
fenêtre du navigateur (la partie visible de la page web)
Cela les rend très utiles pour le design responsive, c’est-à-dire
pour que votre site s’adapte automatiquement à différentes
tailles d’écran (PC, tablette, mobile…).
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
vw (viewport width)
1 vw = 1% de la largeur de la fenêtre.
Si la fenêtre fait 1200px de large, alors :
1vw = 1% de 1200px = 12px
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
[Link]
div {
background-color: blueviolet;
width: 50vw; /* 50% de la largeur de la fenêtre */
}
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
vh (viewport height)
1 vh = 1% de la hauteur de la fenêtre.
Si la fenêtre fait 800px de haut :
1vh = 1% de 800px = 8px
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
[Link]
div {
background-color: blueviolet;
height: 30vh; /* 30% de la hauteur de la fenêtre */
}
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
vmin :
1 vmin = 1% du plus petit côté de la fenêtre (largeur ou
hauteur).
Utile pour garder les proportions dans un design carré ou
circulaire.
Exe : si largeur = 1200px et hauteur = 800px :
1vmin = 1% de 800px = 8px
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
[Link]
div {
background-color: rgb(10, 100, 189);
width: 50vmin; /* largeur = 50% du côté le plus petit */
}
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
DIV1
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
DIV1
Width 50%
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
/* Cercle toujours visible et proportionnel */
.circle {
width: 20vmin;
height: 20vmin;
border-radius: 50%;
background-color: #3498db;
}
Ici, le cercle s’adapte à la taille de la fenêtre, toujours proportionnel
au côté le plus petit
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
vmax
1 vmax = 1% du plus grand côté de la fenêtre (largeur
ou hauteur)
Exemple : si largeur = 1200px et hauteur = 800px :
1vmax = 1% de 1200px = 12px
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
[Link]
div {
background-color: blue;
width: 50vmax; /* largeur = 50% du côté le plus grand */
}
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
h1 {
font-size: 10vmax; /* 10% du côté le plus grand de la fenêtre */
color: #e74c3c;
text-align: center;
}
10% du côté le plus long de la fenêtre (largeur ou hauteur).
Si tu changes la taille de la fenêtre, le texte s’adapte automatiquement, restant toujours
imposant.
Utile pour : titres, bannières, textes de présentation pleine page.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Alignement du texte
La propriété text-align sert à aligner horizontalement le texte à l’intérieur d’un élément
(comme un paragraphe, un titre, un div...).
Valeurs possibles principales :
•left : aligne le texte à gauche (valeur par défaut si le texte est en français ou anglais).
•right : aligne le texte à droite (valeur par défaut si le texte est en arabe).
•center : centre le texte horizontalement.
•justify : justifie le texte (les lignes ont la même largeur, comme dans les livres ou
journaux).
CSS M104
[Link] [Link]
/* Titre centré */
h1{ <h1>Titre Centré</h1>
text-align: center; } <h2>Titre à Gauche</h2>
<h3>Titre à Droite</h3>
/* Titre aligné à gauche */
h2 {
text-align: left; } <p>
Ceci est un paragraphe justifié.
/* Titre aligné à droite */ Cela signifie que le texte s'étend de
la marge de gauche à la marge de
h3 { droite,
text-align: right; } créant des bords droits des deux
côtés, comme dans un livre ou un
/* Texte justifié */ journal.
p { </p>
text-align: justify; }
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Partie 1 : direction et unicode-bidi :
Ces propriétés sont utilisées pour changer la direction du texte dans
un élément HTML.
Direction :
Définit la direction du texte :
ltr : left-to-right (de gauche à droite, par défaut en
français/anglais)
rtl : right-to-left (de droite à gauche, utilisé en arabe.
CSS M104
[Link] [Link]
#p1
{
direction: ltr; <p id= "p1" >
Ceci est un paragraphe justifié. Cela
} signifie que le texte s'étend de la marge
de gauche à la marge de droite,
créant des bords droits des deux
#p2 côtés, comme dans un livre ou un journal.
</p>
{
direction: rtl;
<p id= "p2">
} مرحبا كيف الحال
</p>
Ici, le texte commence à droite et se termine à
gauche.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
unicode-bidi
Contrôle la gestion du texte bidirectionnel lorsque les langues
gauche-droite et droite-gauche sont mélangées
Valeurs importantes :
normal : comportement par défaut
bidi-override : force la direction définie par
direction, en ignorant l’ordre naturel des caractères.
CSS M104
[Link] [Link]
p{
direction: rtl;
<p>Bonjour, comment ça va ?</p>
unicode-bidi: bidi-override;
<p>/< مرحبا كيف الحالp>
}
Sans bidi-override, le texte en francais
(LTR) resterait dans son ordre naturel.
Avec bidi-override, tout suit la direction
RTL forcée.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
direction = sens de lecture général du texte.
unicode-bidi: bidi-override = applique strictement ce sens
même pour les textes dans d’autres langues.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
vertical-align
La propriété vertical-align sert à aligner
verticalement un élément par rapport à la ligne de
base du texte ou par rapport à d’autres éléments
inline.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Valeurs importantes et exemples :
/* ====== Alignement vertical ====== */
img.a { baseline (par défaut)
vertical-align: baseline; <img src="[Link]" class="a"> Texte à côté
} L’image s’aligne sur la ligne de base du texte.
img.b { text-top
vertical-align: text-top; <img src="[Link]" class="b"> Texte à côté
} Le haut de l’image est aligné avec le haut de la ligne de texte.
img.c { text-bottom
vertical-align: text-bottom; <img src="[Link]" class="c"> Texte à côté
} Le bas de l’image est aligné avec le bas de la ligne de texte.
img.d { Sub
vertical-align: sub; H<img src="[Link]" class="d">₂O
} L’élément s’aligne comme un indice (subscript).
img.e { Super
vertical-align: super; X<img src="[Link]" class="e">²
} L’élément s’aligne comme un exposant (superscript).
CSS
CHAPITRE 01 INTRODUIRE LE CSS
UPDATE COURSE
La propriété : font-family
La propriété font-family permet de définir le type de police
du texte
p {
font-family: Arial;
}
Le texte du paragraphe <p> sera affiché avec la police Arial.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
familles génériques
Famille Exemple Explication très simple
serif Times New Roman Lettres avec petits traits.
sans-serif Arial Lettres sans traits.
cursive Comic Sans MS Comme une écriture à la main.
monospace Courier New Lettres de même taille.
fantasy Impact Lettres décorées ou originales.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Les « piles » de polices (fallback)
On indique plusieurs polices au cas où l’une n’existe pas sur l’ordinateur de
l’utilisateur.
Le navigateur utilise la première disponible.
p {
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Les « piles » de polices (fallback)
On indique plusieurs polices au cas où l’une n’existe pas sur l’ordinateur de
l’utilisateur.
Le navigateur utilise la première disponible.
p {
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
Si "Helvetica Neue" n’est pas installée, il utilisera Helvetica, sinon une police sans-serif par défaut.
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
Règle @font-face
Elle sert à importer une police externe
(souvent au format .ttf, .woff, ou .otf)
stockée dans votre dossier projet.
CSS M104
La propriété : font-family
[Link] [Link]
@font-face { <!DOCTYPE html>
font-family: 'newFont'; <html lang="en">
<head>
src: url('Qatar2022 Arabic [Link]');
<meta charset="UTF-8">
}
<meta name="viewport"
content="width=device-width, initial-
h1 { scale=1.0">
text-align: center; <title>Document</title>
font-family: 'newFont'; </head>
} <body>
<h1 >Qatar FIFA Worlـــd Cup</h1>
</body>
Cela permet d’utiliser votre propre police personnalisée, même
si elle n’est pas installée sur l’ordinateur de l’utilisateur </html>
CHAPITRE 01 INTRODUIRE LE CSS
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
CSS M104
CHAPITRE 01 INTRODUIRE LE CSS
CSS M104
1. - Créer la structure HTML de base et ajouter le titre de la page Service Web — Accueil.
2. - Ajouter un élément header contenant le titre principal centré.
Fond bleu (#0b6fbf) et texte blanc.
ATELIER 01: Page d’accueil d’un service (HTML / CSS)
3. - Définir la largeur du header sur 100vw et la hauteur sur 12vh.
Appliquer un arrondi de 1vmin avec border-radius.
4. - Créer une section hero contenant un sous-titre “Bienvenue sur notre service” et un paragraphe descriptif.
Fond blanc (#ffffff), texte bleu (#0b6fbf), taille du texte 1rem à 1.8rem, largeur 90vw, hauteur 40vh, arrondi 2vmin.
5. - Utiliser pour .hero les unités vw et vh pour la taille et rem pour la police.
6. - Créer deux blocs service pour présenter deux services.
Fond bleu clair (#e6f2ff), texte bleu (#0b6fbf), largeur 80vmin, hauteur 15vh, arrondi 1.5vmin, texte aligné à gauche.
7. - Définir la police générale de la page avec :
font-family: 'Helvetica Neue', Arial, sans-serif;
8. - Ajouter une section rtl-demo affichant un texte en arabe.
Utiliser direction: rtl; et unicode-bidi: bidi-override;
Fond jaune clair (#fff8e6), texte orange (#c67b00), arrondi 1vmax.
9. - Créer un pied de page footer avec un texte centré.
Fond bleu (#0b6fbf), texte blanc, largeur 100vw, hauteur 10vh, arrondi 1vmin.
CHAPITRE 01 INTRODUIRE LE CSS
OBJECTIFS
• Identifier les différents types de sélecteurs complexes.
• Comprendre comment et quand les utiliser dans une page web.
• Appliquer ces sélecteurs dans de futurs exercices de mise en page
CSS.
CSS M104
explorer la partie « Les sélecteurs complexes » du cours CSS
Groupe Thème Points à expliquer
Sélecteur universel * et Sélecteurs
Groupe 1 Fonction, syntaxe, exemples pratiques
d’attribut [ ]
Combinateur de voisin direct + et Différence entre les deux, exemples
Groupe 2
Sélecteur de voisins généraux ~ visuels
Sélecteur enfant direct > et Sélecteur Cas d’utilisation et hiérarchie des
Groupe 3
descendant (espace) éléments
Définition, exemples courants (:hover,
Groupe 4 Pseudo-classes
:first-child, :focus...)
CSS M104