SNT V2023-2024
SECONDE
Sciences Numérique et Technologie
Thème C: Le WEB
Chapitre 206 : Le langage CSS
Quels avantages nous apportent les feuilles de style ?
Comment se partagent-elles le « travail » de mise en page
Avec le code HTML ?
(Sciences Numérique et Technologique)
Groupe Scolaire Gustave Eiffel Bizerte
Ahmed Abdelmoumen
I. DÉFINITION....................................................................................................................................................................... 3
II. PRÉSENTATION................................................................................................................................................................. 3
III. AVANTAGES..................................................................................................................................................................... 4
IV. PRINCIPES..................................................................................................................................................................... 4
Sciences Numérique et Technologique Page 1 sur 14
SNT V2023-2024
V. LES SÉLECTEURS................................................................................................................................................................ 5
1) LE SÉLECTEUR UNIVERSEL *...........................................................................................................................................................7
2) SÉLECTEURS D’ÉLÉMENT...............................................................................................................................................................8
3) LE CODE RGB............................................................................................................................................................................ 8
4) SÉLECTEUR PAR CLASSE................................................................................................................................................................ 9
5) SÉLECTEUR PAR ID...................................................................................................................................................................... 9
6) SÉLECTEURS DESCENDANT.............................................................................................................................................................9
7) SÉLECTEUR D'ATTRIBUT :..............................................................................................................................................................9
8) SÉLECTEUR DE GROUPE................................................................................................................................................................9
9) SÉLECTEURS ENFANTS................................................................................................................................................................10
10) SÉLECTEUR DE PSEUDO-CLASSE :..............................................................................................................................................10
11) SÉLECTEUR DE PSEUDO-ÉLÉMENT :...........................................................................................................................................10
VI. INSERTION DU CSS...................................................................................................................................................... 12
1) BALISE <STYLE> DANS LE DOCUMENT HTML :...............................................................................................................................12
2) FICHIER CSS EXTERNE :.............................................................................................................................................................. 13
VII. EXERECICE.................................................................................................................................................................. 14
1) EXERCICE 1..............................................................................................................................................................................14
Sciences Numérique et Technologique Page 2 sur 14
SNT V2023-2024
I. Définition
Les feuilles de style en cascade CSS (Cascading Style Sheets) est un langage informatique qui sert à décrire
la présentation des documents HTML, XHTML et XML. Les standards définissant CSS sont publiés par le W3C
(World Wide Web Consortium).
Le CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur
d'autres supports.
L’un des objectifs majeurs des feuilles de style CSS est de séparer la structure d’un document de ses styles
de présentation.
CSS, ou Cascading Style Sheets, est un langage de style utilisé pour décrire la présentation d'un document
écrit en HTML. Il permet de contrôler la mise en page, les couleurs, les polices et d'autres aspects visuels
d'une page web.
II.
Présentation
L'objectif de ce cours sera de savoir que
Les langages HTML et CSS sont indissociables en développement web.
En HTML, chaque élément doit être porteur de sens. Par exemple :
• Pour un titre de page, utiliser <h1> (titre de niveau 1) plutôt que <p> (paragraphe quelconque).
• Pour un menu (liste de liens), utiliser <ul> (liste sans numérotation). Utiliser des balises qui donnent du
sens présente plusieurs intérêts :
• davantage de clarté pour le développeur et la maintenance future du site ;
• meilleure indexation par les moteurs de recherche ;
• meilleure compréhension par les lecteurs braille.
Savoir ajouter du style aux pages HTML.
Connaître le langage CSS.
Connaître les sélecteurs CSS.
Définir le code RVB.
Sciences Numérique et Technologique Page 3 sur 14
SNT V2023-2024
Afin de rendre plus agréable la visualisation des pages web, il est possible de modifier le style de
la page web en ajoutant des propriétés CSS aux différents sélecteurs
III. Avantages
- La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
- La conception d’un document se fait dans un premier temps sans se soucier de la présentation,
ce qui permet d’être plus efficace.
- Dans le cas d’un site web, la présentation est uniformisée : les documents (pages HTML) font
référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme
rapide de l’aspect visuel.
- Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour
l’impression et une pour la lecture à l’écran.
- Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus
de balises ni d’attributs de présentation.
IV. Principes
Il est par exemple possible de ne décrire que la structure d’un document en HTML :
<html>
<head>
<title>Un titre de document</title>
<link rel="stylesheet" type="text/css" href="[Link]"
media="screen" />
</head>
<body>
<h1>Un titre de niveau 1 (en bleu)</h1>
<p>Un paragraphe (en rouge)</p>
</body>
</html>
Sciences Numérique et Technologique Page 4 sur 14
SNT V2023-2024
La déclaration d'une feuille de style CSS se fait dans l'en-tête (partie <head>) du document HTML avec la
balise <link>
Les commentaires en CSS
/* Ceci est un commentaire sur une seule ligne */
/* Ceci est un commentaire
sur plusieurs lignes.
*/
V. Les Sélecteurs
Les sélecteurs CSS sont des motifs qui permettent de cibler des éléments HTML
spécifiques dans une page web afin d'appliquer des styles à ces éléments. Les
sélecteurs peuvent être basés sur des éléments, des classes, des identifiants, des
attributs, des relations entre éléments, etc. Voici quelques exemples de sélecteurs
CSS couramment utilisés :
Pour appliquer des styles à une page HTML, il faut insérer un sélecteur de code CSS dans le code HTML, ou
bien lier le fichier html a un fichier css.
Certains sélecteurs permettent de changer la couleur du texte et d’autres la couleur de fond de la page
web.
Sciences Numérique et Technologique Page 5 sur 14
SNT V2023-2024
Tout ce qui se trouve entre les balises <style> et </style> est analysé comme du CSS par le navigateur. Par
conséquent, ce qui est en dehors de ces balises est analysé comme du HTML. Pour ajouter des éléments
CSS, il faut donc les insérer à l’intérieur des balises <style> . . . . </style>
Exemple :
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
</style>
Toute la section body du fichier html possédera les propriétés déclarés dans cette section
Sciences Numérique et Technologique Page 6 sur 14
SNT V2023-2024
Liste des propriétés les plus utilisés des sélecteurs CSS
propriété Syntaxe ou valeurs Role
* Sélecteur universel Il cible tous les éléments de la page
color color: rgb(xxx,xxx,xxx); Change la couleur du texte
background-color background-color: rgb(xxx,xxx,xxx); Change la couleur de l'arrière-plan
text-align left, right, justify Permet d'aligner le texte
width width: 400px; Définit la largeur de la zone
margin Margin : 10px 5px 15px 20px Marge haut, droite, bas, gauche
margin-left margin-left:100px; Permet de définir la marge gauche
margin-top margin-top:50px; Marge haut
margin-bottom margin-bottom:100px; Marge bas
margin-right margin-right:100px; Marge droite
font-size Font-size:35px; Définit la taille de la police
font-family Font-family:Arial; Définit une police de caractère
font-style Font-style:italic; Définit un style de police
text-indent Text-indent :1cm Définit un retrait pour la première
ligne
border border-style Définit la bordure (style, épaisseur et
border-width couleur
border color
1) Le sélecteur universel *
En CSS, le sélecteur universel * sélectionne tous les éléments HTML sur une page. Il est utilisé pour
appliquer des styles à tous les éléments, sans exception. Voici un exemple d'utilisation du sélecteur
universel :
/* Applique une bordure à tous les éléments */
*{
border: 1px solid #000;
padding: 5px;
Sciences Numérique et Technologique Page 7 sur 14
SNT V2023-2024
2) Sélecteurs d’élément
Exemple: on veut que tous nos paragraphe auront la couleur de texte rgb suivante(255,0,0) et que le texte
soit justifié (c-a-d meme longueur)
Il suffit d'ajouter la balise suivante en début du body
p{
color: rgb(255,0,0);
text-align: justify;
Remarque
<color> est l’un des sélecteurs CSS les plus utilisés. Il permet de représenter des couleurs en faisant appel
au code RVB.
3) Le code RGB
Le code RVB (ou RGB en anglais) est le code HTML des couleurs. C’est un système de codage informatique
des couleurs où les lettres R, G et B signifient respectivement « Red » (rouge), « Green » (vert) et « Blue »
(bleu).
Ce code permet de choisir n’importe quelle couleur pour le texte ou le fond de la page web, à l’aide d’un
nombre que l’on ajoute en tant que paramètre dans les sélecteurs CSS.
Ce nombre permet de régler l’intensité lumineuse des trois couleurs principales de la lumière blanche, plus
les nombres entre parenthèses sont importants, plus l’intensité de la couleur est importante ;
Ce nombre sera compris entre 0 et 255 :
0 est l’intensité minimale de la couleur proposée,
255 est l’intensité maximale de la couleur proposée.
Remarque
Pour obtenir d’autres couleurs, on peut faire varier les nombres dans les paramètres du sélecteur rgb de la
manière suivante.
Couleur RGB Color Code
Noir rgb(0, 0, 0)
Rouge rgb(255, 0, 0)
Rouge foncé rgb(128, 0, 0)
Jaune rgb(255, 255, 0)
Blanc Rgb(255,255,255)
Sciences Numérique et Technologique Page 8 sur 14
SNT V2023-2024
Exemple 2 : Changer aussi la couleur du fond du paragraphe avec le selecteur
background-color : rgb(xxx,xxx,xxx);
4) Sélecteur par classe
les classes sont utilisées pour attribuer des styles ou des comportements spécifiques à un groupe
d'éléments. Les classes permettent de regrouper des éléments HTML et d'appliquer des styles CSS ou
d'ajouter des fonctionnalités JavaScript à ces groupes d'éléments. Voici comment vous pouvez utiliser les
classes en HTML :
Utilisez l'attribut class pour assigner une classe à un élément. Par exemple, pour ajouter une classe
nommée "maClasse" à un élément div :
< !—utilisation d’une classe en html -- >
<div class="maClasse">Contenu du div</div>
/* Codage de la classe maClasse en css */
.maClasse {
color: blue;
font-size: 16px;
}
5) Sélecteur par ID
/* Codade de l’ID logo */
#logo {
width: 150px;
height: 150px;
}
6) Sélecteurs descendant
/* destiné à toutes les section p qui se trouvent dans une div */
div p {
/* Styles appliqués à tous les paragraphes qui sont des descendants de div */
}
7) Sélecteur d'attribut :
/* Styles appliqués à tous les champs de saisie de type texte */
input[type="text"] {. . . . }
8) Sélecteur de groupe
h1, h2, h3 {
/* Styles appliqués à tous les titres de niveau 1, 2 et 3 */
}
Sciences Numérique et Technologique Page 9 sur 14
SNT V2023-2024
9) Sélecteurs enfants
div > p {
/* Styles appliqués à tous les paragraphes qui sont des enfants directs de div */
. . . . . .
}
10) Sélecteur de pseudo-classe :
/* Styles appliqués lorsqu'un lien est survolé par la souris */
a:hover {
. . . . .
}
11) Sélecteur de pseudo-élément :
p::first-line {
/* Styles appliqués à la première ligne de chaque paragraphe */
. . . . .
}
VI. Propriétés CSS Courantes
1) Les couleurs
.texte {
color: #333; /* Code hexadécimal */
background-color: rgb(255, 255, 255); /* Code RVB */
}
2) Les polices de caractères
body {
font-family: 'Helvetica', sans-serif;
font-size: 16px;
font-weight: bold;
}
3) Mise en page
.conteneur {
width: 80%;
margin: 0 auto; /* Centrer le contenu */
}
Sciences Numérique et Technologique Page 10 sur 14
SNT V2023-2024
4) Box Model
Le modèle de boîte définit la structure de chaque élément HTML. Il comprend la marge, la bordure, le
rembourrage et le contenu.
.boite {
width: 200px;
height: 100px;
margin: 10px;
padding: 20px;
border: 2px solid #333;
}
5) Transitions et Animations
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: black;
}
6) Conseils globales
Titre de page
Au lieu d’une succession de balises telles que <b>, <big> ou <font size="...">, utilisez une balise <h1> :
• dans le code HTML : <h1>Ici un titre</h1>
• et dans la feuille de style : h1 { ...mise en forme...}
Mise en gras ou en italique
Remplacez les balises
o <b> (gras) par <strong>
o <i> (italique) par <em>.
L’affichage est identique, mais ces balises indiquent une mise en relief des mots.
Sciences Numérique et Technologique Page 11 sur 14
SNT V2023-2024
Liste de liens hypertextes (menu)
Évitez les balises <p> et préférez-leur une structure de liste avec la balise <ul> et une balise <li> pour chaque
ligne.
Notez que, dans ce cas, il est préférable de placer cette liste de liens au début de la page, ce qui facilitera sa
compréhension par les navigateurs en mode texte.
Balise périmés
Certaines balises HTML, comme <i> (italique) ou <b> (gras) sont obsolètes, car remplacées par des styles. Leur
emploi est donc déconseillé.
Ces exemples illustrent différentes façons de cibler des éléments spécifiques ou des
groupes d'éléments dans une page web en utilisant des sélecteurs CSS
VII. Insertion du CSS
Pour ajouter du code CSS à votre page web, vous avez plusieurs options, en fonction de vos besoins et de la
structure de votre site. Voici quelques façons courantes d'ajouter du CSS à une page web :
1) Balise <style> dans le document HTML :
Vous pouvez inclure votre code CSS directement dans le fichier HTML en utilisant la balise <style> dans la
section <head> du document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Page Web</title>
<style>
/* Votre code CSS ici */
body {
font-family: Arial, sans-serif;
}
h1 {
color: #336699;
}
</style>
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
Sciences Numérique et Technologique Page 12 sur 14
SNT V2023-2024
2) Fichier CSS externe :
Vous pouvez également créer un fichier CSS séparé (par exemple, [Link]) et le lier à votre document
HTML à l'aide de la balise <link> dans la section <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Page Web</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
Dans le fichier CSS ([Link]) :
/* Votre code CSS ici */
body {
font-family: Arial, sans-serif;
}
h1 {
color: #336699;
}
VIII. Intérêt des feuilles de style
L’utilisation des feuilles de style n’a pas pour seul but de répondre aux normes et de faire plaisir au W3C
(consortium qui définit les règles de codage des pages web : [Link]). Un bénéfice réel et concret
découle de cette façon de travailler.
Sciences Numérique et Technologique Page 13 sur 14
SNT V2023-2024
IX. Exerecice
1) Exercice 1 ([Link] + [Link])
Créez un fichier HTML de base.
Intégrez un fichier CSS externe.
Utilisez différents sélecteurs pour styliser votre page.
Appliquez le modèle de boîte à certains éléments.
Ajoutez une transition ou une animation à un élément.
2) Exercice 2 : [Link] + [Link]
Créer une page web avec une boîte (div) centrée au milieu de la page.
La boîte doit avoir
Etape 1 : Créez un fichier HTML :
Lier le fichier html au fichier CSS
ajouter un titre au fichier html
ajouter une icône (tunisia_flag.png)
un paragraphe « Hello CSS »
Etape 2 : Créez un fichier CSS ([Link]) :
un fond coloré,
du texte au centre
Ajouter une bordure à la boite, Couleur, type, couleur
des bordures arrondies.
3) Exercice 3 ([Link])
Créer le Tableau suivant
Sciences Numérique et Technologique Page 14 sur 14
