3. Hello!
Je m’appelle Thomas et je suis co-fondateur d’Hidden.market,
une startup dans le domaine du recrutement IT !
Retrouvez moi sur Twitter @ThomasBodinFr
3
7. 1. C’est quoi le CSS
2. Où l’écrire
3. Sa syntaxe
4. Reset browser
7
8. 1. C’est quoi le CSS
Le rôle du CSS est de gérer l'apparence de la page web
(agencement, positionnement, décoration, couleurs, taille du
texte…).
Ce langage est venu compléter le HTML en 1996.
8
Cascading Style Sheets
10. 2. Où l’écrire
On peut écrire du CSS à 3 endroits différents :
▫ Dans l’entête <head> de votre fichier .html avec la balise
<style></style>
▫ Dans les balises HTML via l’attribut style=””
▫ Dans un fichier .css
Vu qu’on va faire les choses bien, on va uniquement voir le CSS
dans un fichier .css
Pour cela, il faudra indiquer dans votre HTML ce fichier à l’aide de
la balise <link> dans l’entête <head>
<head>
<link rel="stylesheet" href="style.css">
</head>
10
Dans un fichier .css
11. 3. Sa syntaxe
Dans le fichier CSS on trouvera donc le CSS avec une syntaxe
précise mais très simple d’utilisation.
▫ On choisit l’élément que l’on veut styliser : c’est le sélecteur
▫ On définit l’effet de style : c’est la propriété
▫ On définit la valeur à ce changement : c’est la valeur
selecteur {
propriete: valeur;
}
11
12. 4. Reset browser
Chaque navigateur applique par défaut du CSS à du HTML.
Evidemment, aucun navigateur n’a définit les mêmes propriétés et
valeurs…
Il est donc important de faire un “reset browser”, c’est à dire
d’uniformiser le CSS pour tous les navigateurs.
https://necolas.github.io/normalize.css/
Normalize est un fichier CSS développé par la communauté pour
effectuer ce reset browser efficacement.
12
13. 4. Reset browser
Pour cela, il faudra indiquer dans votre HTML ce fichier à l’aide de
la balise <link> dans l’entête <head>, tout comme votre fichier
style.css
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0
/normalize.min.css">
</head>
13
Dans le head
16. 1. Element
Le sélecteur est ce qui va permettre de cibler dans notre HTML, l’
élément à agencé / positionné / coloré
Le premier sélecteur possible est l’élément HTML :
body {
propriete: valeur;
}
p {
propriete: valeur;
}
a {
propriete: valeur;
}
16
17. 2. Class
Le problème c’est que si on applique du CSS à une balise HTML,
celui-ci s’appliquera à chaque fois que l’on écrira cette balise
HTML.
Heureusement il est possible de cibler précisément un seul
élément sur votre page web à l’aide des class.
▫ Au niveau du HTML
▪ Définir l’attribut class dans notre balise
▪ Créer un nom de class (pas de caractère spéciaux, pas
d’espace)
▫ Au niveau du CSS
▪ Notre sélecteur n’est plus un élément HTML mais le
nom de notre class précédé par un point
17
19. 3. ID
Cela fonctionne quasiment de la même manière que la class
▫ Au niveau du HTML
▪ Définir l’attribut id dans notre balise
▪ Créer un nom d’id (pas de caractère spéciaux, pas
d’espace)
▫ Au niveau du CSS
▪ Notre sélecteur n’est plus une class mais le nom de
notre id précédé par un hashtag
Eviter l’utilisation de l’ID pour faire du CSS, celui-ci est
privilégié pour le Javascript
19
21. 4. Multiple
Il est possible d’appliquer les même propriétés et valeurs à des
sélecteurs différents en les séparant par des virgules.
C’est à dire qu’au lieu d’écrire cela :
.toto {
propriete: valeur;
}
.ma-class {
propriete: valeur;
}
Vous pouvez écrire comme cela :
.toto,
.ma-class {
propriete: valeur;
}
21
22. 4. Multiple
Exemple avec un sélecteur de type ELEMENT
C’est à dire qu’au lieu d’écrire cela :
p {
propriete: valeur;
}
div {
propriete: valeur;
}
Vous pouvez écrire comme cela :
p,
div {
propriete: valeur;
}
22
23. 5. Inside
Le sélecteur peut être en cascade, c’est à dire être composé de
plusieurs sélecteur qui peuvent être de différents types.
<a class="mon-lien">
<img>
</a>
.mon-lien img {
propriete: valeur;
}
On cible l’image qui a comme parent un élément avec la class
mon-lien
23
24. 5. Inside
Ce type de sélecteur est important et vous évitera de devoir créer
des class sur chaque élément HTML. L’avantage, c’est que l’on
peut mélanger dans le sélecteur des ELEMENTS et des CLASS.
<div class="mon-bloc">
<p></p>
<a href=""></a>
</div>
.mon-bloc p {
propriete: valeur;
}
.mon-bloc a {
propriete: valeur;
}
24
25. Vous trouverez ici la liste complète des sélecteurs (en) :
https://www.w3schools.com/cssref/css_selectors.asp
25
27. Exercice 1 :
Récupérer le fichier HTML qui contient :
1. Un appel à votre CSS
2. Un reset browser
3. 2 titre
4. 2 paragraphe
5. 1 span à l’intérieur du paragraphe
6. 1 lien externe
Appliquer des fonds de couleurs à chacun de ces éléments (voir
exemple)
Couleur de fond :
Propriété = background-color
Valeur = couleur en anglais
27
28. <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS - Exo 1</title>
<meta name="description" content="Exercice 1 du cours CSS">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Mon 1er titre</h1>
<p>Lorem ipsum <span>dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Mon 2e titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#">Mon lien</a>
</body>
</html>
28
33. 1. Texte
Police
Propriété = font-family
Valeur = Nom de la police
selecteur {
font-family: "Times New Roman", serif;
}
Serif n’est pas un nom de police mais une police utilisé par défaut
en cas de problème. Elle est soit avec ou soit sans empattement
(serif ou sans-serif)
33
34. 1. Texte
Police particulière
Vous pouvez ajouter des polices particulières de la manière
suivante :
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
myFirstFont est le nom que vous allez définir et utiliser
La valeur dans url est le fichier de la font
34
43. 3. Arrière plan
Couleur d’arrière plan
Propriété = background-color
Valeur = couleur en anglais, hexadécimal, rgb
selecteur {
background-color: #ffffff;
}
43
44. 3. Arrière plan
Image d’arrière plan
Propriété = background-image
Valeur = url de l’image (attention à bien définir le chemin)
selecteur {
background-image: url("bg-flower.png");
}
44
45. 3. Arrière plan
Image d’arrière plan (options)
Répétition de l’image de fond :
Propriété = background-repeat
Valeur = no-repeat, repeat-x, repeat-y
selecteur {
background-image: url("bg-flower.png");
background-repeat: no-repeat;
}
45
46. 3. Arrière plan
Image d’arrière plan (options)
Position de l’image au scroll :
Propriété = background-attachment
Valeur = fixed, scroll
selecteur {
background-image: url("bg-flower.png");
background-attachment: fixed;
}
46
47. 3. Arrière plan
Image d’arrière plan (options)
Position de l’image dans son bloc :
Propriété = background-position
Valeur = left top, left center, left bottom, right top, right center,
right bottom, center top, center center, center bottom
selecteur {
background-image: url("bg-flower.png");
background-position: center center;
}
47
48. 3. Arrière plan
Image d’arrière plan (options)
Taille de l’image de fond :
Propriété = background-size
Valeur = valeur en pixel (largeur hauteur), cover
selecteur {
background-image: url("bg-flower.png");
background-size: 80px 60px;
}
48
49. 3. Arrière plan
Image d’arrière plan (options)
Taille de l’image de fond :
Propriété = background
Valeur = toutes les options
selecteur {
background: url("bg-flower.png") #fff no-repeat fixed
center center;
}
49
53. 4. Bordure
Bordures arrondies (options)
Propriété = border-radius
Valeur = valeur de l’arrondie : haut gauche - haut droite - bas
droite - bas gauche
selecteur {
border-radius: 20px 10px 30px 40px;
}
Vous pouvez appliquer un arrondie différent à chaque coin d’un
élément en respectant l’ordre.
53
57. Vous trouverez ici la liste complète des propriétés CSS (en) :
https://www.w3schools.com/cssref/
57
58. Exercice 2 :
Améliorer la typographie de texte en utilisant des propriétés
css que l’on a vu ensemble pour arriver au même résultat
que dans l’exemple.
58
59. <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS - Exo 2</title>
<meta name="description" content="Exercice 2 du cours CSS">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Mon 1er titre</h1>
<p>Lorem ipsum <span>dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Mon 2e titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div>
<a href="#">Mon lien</a>
</div>
</div>
</body>
</html>
59
63. 1. Pseudo classes
Une pseudo classe est un état du sélecteur CSS.
Voici sa syntaxe :
selecteur:pseudo-class {
propriete: valeur;
}
63
64. 1. Pseudo classes
Liste des différentes pseudo-class :
▫ :hover - Survole avec le pointeur
▫ :active - Interaction entre le clic et le relâchement
▫ :visited - Aspect d’un lien après avoir été visité
▫ :focus - Élément sélectionné (formulaire)
▫ :first-child - Premier élément enfant de son parent
▫ :last-child - Dernier élément enfant de son parent
64
68. Exercice 3 :
1. Au survol du bouton :
a. Changer la couleur pour du bleu
b. Changer la couleur de fond pour du vert
2. Sur la liste à puce :
a. Au premier li en le mettant en italic
b. Au dernier li en le mettant en gras
3. Dans un formulaire :
a. Quand on sélectionne un champs d’un formulaire
changer la couleur de fond en vert
68
77. 2. Marges
Marges intérieures (options)
Propriété = padding
Valeur = valeur en pixel : haut - droite - bas - gauche
selecteur {
padding: 20px 10px 30px 40px;
}
Vous pouvez appliquer une marge intérieure différente à chaque
côté d’un élément en respectant l’ordre.
77
79. 2. Marges
Marges extérieures (options)
Propriété = margin
Valeur = valeur en pixel : haut - droite - bas - gauche
selecteur {
margin: 20px 10px 30px 40px;
}
Vous pouvez appliquer une marge extérieure différente à chaque
côté d’un élément en respectant l’ordre.
79
80. 3. Modèle de boîte
En HTML, la plupart des balises peuvent se ranger dans l'une ou
l'autre de deux catégories :
block : une balise de type block sur votre page web crée
automatiquement un retour à la ligne avant et après. Il suffit
d'imaginer tout simplement un bloc. Votre page web sera en fait
constituée d'une série de blocs les uns à la suite des autres.
inline : une balise de type inline se trouve obligatoirement à
l'intérieur d'une balise block. Une balise inline ne crée pas de
retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la
suite du texte précédent, sur la même ligne (c'est pour cela que
l'on parle de balise « en ligne »).
80
81. 3. Modèle de boîte Conclusion
Les éléments block prennent toute la largeur de leur parent et se
mettent les uns en dessous des autres.
Les éléments inline ne prennent pas toute la largeur de leur
parent, ils prennent uniquement leur propre largeur et se mettent
les uns à côtés des autres.
81
82. 3. Modèle de boîte
Modèle de boîte
Propriété = display
Valeur = block ou inline
selecteur {
display: block;
}
Vous pouvez modifier le modèle d’un élément avec la propriété
display
Block = Cet élément génère une boîte de bloc
Inline = Cet élément génère une boîte en ligne
82
84. 3. Modèle de boîte
Modèle de boîte
Le problème d’un élément inline c’est qu’on ne peut pas lui
appliquer de largeur, hauteur et de marges. C’est pour cela qu’il
existe une propriété entre l’inline et le block. La valeur inline-block
est un élément inline qui préserve les capacités du block.
Propriété = display
Valeur = inline-block
selecteur {
display: inline-block;
}
84
85. Liste des éléments block :
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Liste des éléments inline :
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
85
86. 4. Centrer
On a vu que pour centrer du texte vous devez utiliser
selecteur {
text-align: center;
}
Cela permet de centrer également tous les éléments inline.
Pour centrer un élément block, vous devrez utiliser margin.
selecteur {
margin: auto;
}
86
87. 5. Flottant
Il est possible de mettre 2 éléments “block” côte à côte à l’aide de
la propriété float sans avoir besoin de changer le modèle de boîte.
Propriété = float
Valeur = left ou right
selecteur {
float: left;
}
L’élément qui a un float à gauche, signifie que l’élément block se
placera tout à gauche de son parent ou de l’élément précédent
flottant également à gauche.
87
88. 5. Flottant
Quand un élément est rendu flottant, celui-ci est considéré
comme invisible par son parent.
Le parent ne peut donc pas savoir quelle taille à ses enfants
flottants et est donc considéré comme vide (mauvaise hauteur).
Il est donc obligatoire d’utiliser un clearfix à l’élément parent
quand vous utilisez un float.
clearfix:after {
content: '';
display: table;
clear: both;
}
88
90. Exercice 4 :
Appliquer les propriétés float et clear pour définir un
positionnement flottant pour reproduire ceci :
▫ 1 bordure grise faisant toute la largeur
▫ 3 blocs bleu côte à côte avec du texte dedans
90
91. 6. Position
La propriété position choisit des règles alternatives pour le
positionnement des éléments.
Propriété = position
Valeur = static, relative, absolute, fixed
selecteur {
position: fixed;
}
91
92. 6. Position
92
static : Comportement normal (par défaut). L'élément est alors
positionné dans le flux avec sa position. Les propriétés top, right,
bottom, left et z-index ne s'appliquent pas.
relative : Cela ne change pas les positions de l’élément mais va
permettre de positionner les enfants absolute.
absolute : Cela ne laisse pas d'espace pour l'élément. Il le
positionne à la position spécifiée par rapport à son plus proche
ancêtre positionné en relative.
fixed : Cela ne laisse pas d'espace pour l'élément. Il le positionne
à la position spécifiée par rapport à la fenêtre d'affichage, ce qui
empêche le défilement lorsque la page est parcourue.
93. 6. Position
Quand les valeurs absolute et fixed sont utilisés, il faut spécifier la
position.
Propriété = top, right, bottom, left
Valeur = valeur en pixel ou en pourcentage
selecteur {
top: 0px;
left: 0px;
}
93
94. Exercice 5 :
Positionner des éléments dans une page web
grâce à la propriété position.
▫ 1 grand bloc gris légèrement décalé
▫ 1 bloc bleu avec du texte à l’intérieur du
bloc gris au milieu à droite
▫ 1 bloc violet en bas à droite de l’écran qui
ne bouge pas au scroll
94
95. Exercice 6 :
Intégrer la maquette simplifié du site hidden.market
Particularité :
▫ Bandeau header fixe au scroll
▫ Bouton en bas à droite de l’écran pour remonter en
haut du site (back to top)
▫ Animation survol sur tous les boutons et tous les liens
95
99. 1. RWD
Vous pouvez changer le style appliqué à un élément en fonction
de la taille de l’écran. C’est le responsive web design.
Le CSS s’appliquera automatiquement et écrasera celui par défaut
dès que la taille de l’écran aura atteint ce que vous avez définis.
Pour définir la taille qui changera le CSS nous allons utiliser les
media queries. Ce CSS sera appliqué quand l’écran (screen) aura
une largeur entre 0 et 768px
@media screen and (max-width: 768px) {
selecteur {
propriete: valeur;
}
}
99
100. 1. RWD
Vous pouvez définir autant de media queries que vous souhaitez
en appliquant soit une logique de max-width, soit de min-width.
Max-width : toutes les tailles jusqu’à la valeur définit
Min-width: toutes les tailles à partir de la valeur définit
@media screen and (max-width: 768px) {
...
}
@media screen and (min-width: 1200px) {
...
}
100
