Introduction au langage CSS
Informatique et Statistique 2A 3ème année
Olivier Caron1
[Link]
1 École d’ingénieurs Polytech Lille
Université de Lille
14 novembre 2024
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 1 / 15
Objectifs de ce cours
Ce cours est une introduction au langage CSS
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 2 / 15
Objectifs de ce cours
Ce cours est une introduction au langage CSS
Inutile d’en savoir plus pour un développeur Web - Bases de données
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 2 / 15
Objectifs de ce cours
Ce cours est une introduction au langage CSS
Inutile d’en savoir plus pour un développeur Web - Bases de données
Recours aux frameworks CSS
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 2 / 15
La technologie CSS
Acronyme pour "Cascading Style Sheet"
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 3 / 15
La technologie CSS
Acronyme pour "Cascading Style Sheet"
Découpage propre charte graphique / les données à afficher
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 3 / 15
La technologie CSS
Acronyme pour "Cascading Style Sheet"
Découpage propre charte graphique / les données à afficher
Styles visuels réutilisables
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 3 / 15
La technologie CSS
Acronyme pour "Cascading Style Sheet"
Découpage propre charte graphique / les données à afficher
Styles visuels réutilisables
Qualités évolutives (un seul fichier à évoluer)
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 3 / 15
Syntaxe Générale CSS
Syntaxe ultra simple :
sé lecteur {
nomPropri é t é : v a l e u r ;
nomPropri é t é : v a l e u r ;
...
}
sé lecteur . . .
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 4 / 15
Syntaxe Générale CSS
Syntaxe ultra simple :
sé lecteur {
nomPropri é t é : v a l e u r ;
nomPropri é t é : v a l e u r ;
...
}
sé lecteur . . .
La complexité réside dans la richesse des propriétés et des effets de
bord des propriétés entre elles (placement des objets)
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 4 / 15
Petite illustration de règles CSS
h1 { color : red } → les balises <h1> sont en rouge
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 5 / 15
Petite illustration de règles CSS
h1 { color : red } → les balises <h1> sont en rouge
div h1 { color : red ; } → les balises <h1> contenues dans
une balise <div> sont en rouge
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 5 / 15
Petite illustration de règles CSS
h1 { color : red } → les balises <h1> sont en rouge
div h1 { color : red ; } → les balises <h1> contenues dans
une balise <div> sont en rouge
.attention { border: solid blue 1px; background-color: cyan}
→ style applicable à toute balise html (exemple <div
class="attention"> ...
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 5 / 15
Petite illustration de règles CSS
h1 { color : red } → les balises <h1> sont en rouge
div h1 { color : red ; } → les balises <h1> contenues dans
une balise <div> sont en rouge
.attention { border: solid blue 1px; background-color: cyan}
→ style applicable à toute balise html (exemple <div
class="attention"> ...
#id121 { color:blue } → style applicable à l’unique élément <XXX
id="id121"> ...
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 5 / 15
Les sélecteurs
Les sélecteurs de base :
Nom de la balise, Nom de l’id (’#’), Nom de la classe (’.’).
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 6 / 15
Les sélecteurs
Les sélecteurs de base :
Nom de la balise, Nom de l’id (’#’), Nom de la classe (’.’).
Les sélecteurs avancés :
* : désigne toutes les balises
sél1 sél2 : les sélecteurs sél2 situés à l’intérieur de sél1
A[B] : une balise A qui possède un attribut B
A[B="value"] : une balise A qui possède un attribut B de valeur value
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 6 / 15
Les sélecteurs
Les sélecteurs de base :
Nom de la balise, Nom de l’id (’#’), Nom de la classe (’.’).
Les sélecteurs avancés :
* : désigne toutes les balises
sél1 sél2 : les sélecteurs sél2 situés à l’intérieur de sél1
A[B] : une balise A qui possède un attribut B
A[B="value"] : une balise A qui possède un attribut B de valeur value
Et bien plus encore
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 6 / 15
Comment appliquer un style ?
Au niveau de le la balise, attribut style :
<p s t y l e=" c o l o r : b l u e ; ">
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 7 / 15
Comment appliquer un style ?
Au niveau de le la balise, attribut style :
<p s t y l e=" c o l o r : b l u e ; ">
Au niveau du fichier html :
<head> . . .
< s t y l e>
p {
color : blue ;
}
</ s t y l e>
...
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 7 / 15
Comment appliquer un style ?
Au niveau de le la balise, attribut style :
<p s t y l e=" c o l o r : b l u e ; ">
Au niveau du fichier html :
<head> . . .
< s t y l e>
p {
color : blue ;
}
</ s t y l e>
...
Dans une feuille de style (recommandé) :
<head> . . .
< l i n k r e l=" s t y l e s h e e t " h r e f=" . / c s s / s t y l e . c s s " />
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 7 / 15
Qui s’occupe des feuilles de style ?
Absolument pas le développeur !
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 8 / 15
Qui s’occupe des feuilles de style ?
Absolument pas le développeur !
Réservé au concepteur graphique multimédia, pour s’en convaincre,
voici une démo :
[Link]
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 8 / 15
Qui s’occupe des feuilles de style ?
Absolument pas le développeur !
Réservé au concepteur graphique multimédia, pour s’en convaincre,
voici une démo :
[Link]
Complexe, mais des frameworks CSS, ex :
framework bootstrap (twitter) [Link]
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 8 / 15
Le framework Twitter Bootstrap (1/3)
Une charte graphique épurée
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 9 / 15
Le framework Twitter Bootstrap (1/3)
Une charte graphique épurée
Beaucoup de règles pour de multiples composants graphiques
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 9 / 15
Le framework Twitter Bootstrap (1/3)
Une charte graphique épurée
Beaucoup de règles pour de multiples composants graphiques
S’appuie sur la notion de classe pour utiliser la charte
<b u t t o n>un b o u t o n</ b u t t o n> <!−− p a s de s t y l e a p p l i q u é −−>
<b u t t o n c l a s s=" b t n btn−p r i m a r y ">un j o l i b o u t o n</ b u t t o n>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 9 / 15
Le framework Twitter Bootstrap (1/3)
Une charte graphique épurée
Beaucoup de règles pour de multiples composants graphiques
S’appuie sur la notion de classe pour utiliser la charte
<b u t t o n>un b o u t o n</ b u t t o n> <!−− p a s de s t y l e a p p l i q u é −−>
<b u t t o n c l a s s=" b t n btn−p r i m a r y ">un j o l i b o u t o n</ b u t t o n>
Du code javascript permet d’associer du comportement aux
composants
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 9 / 15
Le framework Twitter Bootstrap (1/3)
Une charte graphique épurée
Beaucoup de règles pour de multiples composants graphiques
S’appuie sur la notion de classe pour utiliser la charte
<b u t t o n>un b o u t o n</ b u t t o n> <!−− p a s de s t y l e a p p l i q u é −−>
<b u t t o n c l a s s=" b t n btn−p r i m a r y ">un j o l i b o u t o n</ b u t t o n>
Du code javascript permet d’associer du comportement aux
composants
Le placement des composants est simplifié grâce au concept de grille
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 9 / 15
Le framework Twitter Bootstrap (1/3)
Une charte graphique épurée
Beaucoup de règles pour de multiples composants graphiques
S’appuie sur la notion de classe pour utiliser la charte
<b u t t o n>un b o u t o n</ b u t t o n> <!−− p a s de s t y l e a p p l i q u é −−>
<b u t t o n c l a s s=" b t n btn−p r i m a r y ">un j o l i b o u t o n</ b u t t o n>
Du code javascript permet d’associer du comportement aux
composants
Le placement des composants est simplifié grâce au concept de grille
Règles dédiées aux mobiles/smartphones (responsive design).
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 9 / 15
Le framework Twitter Bootstrap (2/3)
2 modes d’utilisation :
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 10 / 15
Le framework Twitter Bootstrap (2/3)
2 modes d’utilisation :
1 Téléchargement d’une version bootstrap sur
[Link] puis installation dans un projet PHP
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 10 / 15
Le framework Twitter Bootstrap (2/3)
2 modes d’utilisation :
1 Téléchargement d’une version bootstrap sur
[Link] puis installation dans un projet PHP
2 Référencement à distance d’une version bootstrap (coût écologique)
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 10 / 15
Le framework Twitter Bootstrap (3/3)
Exemple utilisation Bootstrap (lignes 8-11) :
1 < ! DOCTYPE h t m l>
2 <h t m l>
3 <h e a d>
4 <m e t a c h a r s e t ="UTF−8">
5 < t i t l e >mon p r o j e t web</ t i t l e >
6
7 <m e t a name=" v i e w p o r t " c o n t e n t=" w i d t h=d e v i c e −w i d t h , i n i t i a l − s c a l e =1.0 " />
8 < l i n k h r e f =" h t t p s : / / c d n . j s d e l i v r . n e t /npm/ b o o t s t r a p @ 5 . 3 . 2 / d i s t / c s s / b o o t s t r a p . min . c s s "
9 r e l =" s t y l e s h e e t ">
10 < s c r i p t s r c =" h t t p s : / / c d n . j s d e l i v r . n e t /npm/ b o o t s t r a p @ 5 . 3 . 2 / d i s t / j s / b o o t s t r a p . b u n d l e . min . j s ">
11 </ s c r i p t >
12 </ h e a d>
13 <b o d y> . . . </ b o d y>
14 </ h t m l>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 11 / 15
Le framework Twitter Bootstrap (3/3)
Exemple utilisation Bootstrap (lignes 8-11) :
1 < ! DOCTYPE h t m l>
2 <h t m l>
3 <h e a d>
4 <m e t a c h a r s e t ="UTF−8">
5 < t i t l e >mon p r o j e t web</ t i t l e >
6
7 <m e t a name=" v i e w p o r t " c o n t e n t=" w i d t h=d e v i c e −w i d t h , i n i t i a l − s c a l e =1.0 " />
8 < l i n k h r e f =" h t t p s : / / c d n . j s d e l i v r . n e t /npm/ b o o t s t r a p @ 5 . 3 . 2 / d i s t / c s s / b o o t s t r a p . min . c s s "
9 r e l =" s t y l e s h e e t ">
10 < s c r i p t s r c =" h t t p s : / / c d n . j s d e l i v r . n e t /npm/ b o o t s t r a p @ 5 . 3 . 2 / d i s t / j s / b o o t s t r a p . b u n d l e . min . j s ">
11 </ s c r i p t >
12 </ h e a d>
13 <b o d y> . . . </ b o d y>
14 </ h t m l>
Ligne 7 : permet le mode pour les mobiles (responsive design)
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 11 / 15
Les Grilles CSS
Le placement des objets dans une page se fait dans une grille virtuelle
de 12 colonnes
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 12 / 15
Les Grilles CSS
Le placement des objets dans une page se fait dans une grille virtuelle
de 12 colonnes
La grille est définie à l’aide de la classe container
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 12 / 15
Les Grilles CSS
Le placement des objets dans une page se fait dans une grille virtuelle
de 12 colonnes
La grille est définie à l’aide de la classe container
Une ligne de la grille est définie par la classe row
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 12 / 15
Les Grilles CSS
Le placement des objets dans une page se fait dans une grille virtuelle
de 12 colonnes
La grille est définie à l’aide de la classe container
Une ligne de la grille est définie par la classe row
Chaque colonne est spécifiée à l’aide des classes col-xx-nb ou col-nb
xx précise l’équipement, nb le nombre de colonnes.
<d i v c l a s s=" c o n t a i n e r ">
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −6">t e x t e s u r 6 c o l o n n e s</ d i v>
<d i v c l a s s=" c o l −3">t e x t e s u r 3 c o l o n n e s</ d i v>
</ d i v>
...
</ d i v>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 12 / 15
Les tailles des grilles CSS
Plusieurs formats selon l’équipement :
Equipement Largeur classe CSS Taille max col
Extra small-devices <768px col-nb auto
Small devices >=768px col-sm-nb 60px
Medium devices >=992px col-md-nb 78px
Large devices >=1200px col-lg-nb 95px
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 13 / 15
Les tailles des grilles CSS
Plusieurs formats selon l’équipement :
Equipement Largeur classe CSS Taille max col
Extra small-devices <768px col-nb auto
Small devices >=768px col-sm-nb 60px
Medium devices >=992px col-md-nb 78px
Large devices >=1200px col-lg-nb 95px
nb indique le nombre de colonnes (entre 1 et 12)
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 13 / 15
Exemples grilles (1/2)
2 colonnes de même taille quelque soit l’équipement (ne pas oublier
"container" !) :
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −6">du t e x t e</ d i v>
<d i v c l a s s=" c o l −6">a u t r e t e x t e</ d i v>
</ d i v>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 14 / 15
Exemples grilles (1/2)
2 colonnes de même taille quelque soit l’équipement (ne pas oublier
"container" !) :
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −6">du t e x t e</ d i v>
<d i v c l a s s=" c o l −6">a u t r e t e x t e</ d i v>
</ d i v>
1ère colonne : moitié de la grille pour mobiles, 33%pour desktop :
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −6 c o l −md−4"> . c o l −6 . c o l −md−4</ d i v>
<d i v c l a s s=" c o l −6 c o l −md−4"> . c o l −6 . c o l −md−4</ d i v>
<d i v c l a s s=" c o l −6 c o l −md−4"> . c o l −6 . c o l −md−4</ d i v>
</ d i v>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 14 / 15
Exemples grilles (2/2)
colonnes inutilisées, notion d’offset :
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −md−4">c o l −md−4</ d i v>
<d i v c l a s s=" c o l −md−4 o f f s e t −md−4">c o l −md−4 o f f s e t −md−4</ d i v>
</ d i v>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 15 / 15
Exemples grilles (2/2)
colonnes inutilisées, notion d’offset :
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −md−4">c o l −md−4</ d i v>
<d i v c l a s s=" c o l −md−4 o f f s e t −md−4">c o l −md−4 o f f s e t −md−4</ d i v>
</ d i v>
Autre exemple :
<d i v c l a s s=" row ">
<d i v c l a s s=" c o l −md−3 o f f s e t −md−3">c o l −md−3 o f f s e t −md−3</ d i v>
<d i v c l a s s=" c o l −md−3 o f f s e t −md−3">c o l −md−3 o f f s e t −md−3</ d i v>
</ d i v>
O. Caron (Polytech Lille) Introduction au CSS 14 novembre 2024 15 / 15