Cours CSS

HTML CSS
HTML
 HTML est un langage Universel de description textuelle

destinée à Internet.
 Le créateur d'une page WEB définit la structure ou
l'organisation d'une page en utilisant des balises.
CSS
 Le World Wide Web a introduit les feuilles de styles en

cascade pour compléter la langage HTML.
 Les CSS permettent de gérer l'apparence des
documents.
 Les feuilles indiquent aux balises HTML leur
comportement ou style.
Les styles
 Un style rassemble tous les attributs que l'on peut

appliquer à des types de textes similaires.
 Attribut : taille,format
 Textes similaires : titres, en-têtes, pied de page
 Les styles donnent un nom commun à des groupes
d'attributs
Les styles de Word
Applique le style : Titre 1

Avantage du CSS
 Une CSS est constituée de code séparé qui améliore les

possibilités du HTML en permettant de redéfinir la façon
dont fonctionnent les balises HTML existantes.
 L'avantage par rapport à la création de nouvelles balises
HTML repose sur le fait qu'en modifiant la définition
d'une seule règle CSS centralisée, l'apparence de toutes
les balises contrôlées par cette règles est modifiée.
Style dans la page
<style type="text/css">
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: indianred ;
}
</style>
La/les feuille(s) de style externe(s)
! Nous utiliserons les mêmes conventions de chemin que pour les

images et pages
! Création d’un nouveau fichier appelé « styles.css » (notez
l’extension .css ici) et on lie la feuille de styles au HTML
! On « lie » la feuille de style au document HTML avec une balise
<link>dans le <head>
<link rel="stylesheet" href="styles.css"/>
8
Du HTML au CSS : Principe
<HTML> .HTML
<HEAD>
<TITLE>Le CSS</TITLE>
<link rel="stylesheet" type= "text/css" href= "fichier.css">
</HEAD>
<BODY> Le Résultat
<H1>Introduction</H1>
... Introduction
</BODY> …
</HTML>
@charset "iso-8859-1";
H1 { Sélecteur simple
color : red ;
}
Fichier.CSS
La feuille de style externe
index.html
styles.css
10
Les règles
 Une règle définit l'apparence et le comportement du

code HTML.
 Un règle indique à une balise HTML comment afficher
son contenu.
 La création de règles générique permet également de
les appliquer à plusieurs balises.
Les commentaires CSS
• Pour créer un commentaire CSS, on utilise

/* commentaire */
• Le commentaire n’est pas visible dans le navigateur
• Sert au développeur à prendre des notes, laisser des messages
aux autres et savoir à quoi servent les lignes de code
199
Récapitulatif
! index.html : pour le
contenu
! styles.css : pour la mise

en page / présentation
13
Syntaxes Règle
Selecteur { propriété: valeur;}
Sélecteur HTML définit la propriété
attribut à définir
Syntaxes
 La syntaxe est composée de 3 éléments :

 Le sélecteur est l’élément sur lequel on applique
les propriétés (balise HTML, id, classe, etc.)
 La propriété est l’effet que l’on va vouloir donner

(ex couleur deselecteur {
texte, positionnement, couleur de
propriete: valeur
fond, etc.)
propriete: valeur
– ... CSS (rouge, 10px, etc.)
La valeur de la propriété
}
Types de règles
 Les sélecteurs sont des caractères alphanumériques

qu'identifie la règle.
 Sélecteur HTML
 La classe
 L'ID
Sélecteur HTML
 La partie textuelle d'une balise HTML est appelé

sélecteur
 H1 est le sélecteur de <H1>
 Le sélecteur est exploité pour redéfinir le style de
l'affichage de la balise.
Syntaxe générale utilisée
 Les styles d'une balise
Sélecteur HTML Propriété Valeur
p { font-size: 12px;}
Définition
Propriétés héritées d'un parent
 Toutes balises ont un parent : une balise conteneur qui les encadre.
 Les balises HTML s'approprient généralement les styles des balises imbriquées dans
leur parent : c'est l'héritage de style
<body>
<b color:red>
<i>
Denis
</i>
</b>
</body>
<body>
<b color:red>
<i>
Denis
</i>
</b>
</body>
<body>
<b color:red>
<i>
Denis
</i>
</b>
</body>
<body>
<b color:red>
<i>
Denis
</i>
</b>
</body>
<body> Denis times

<b color:red> Denis times + bold +red
<i>
Denis Denis times + bold +red+italics
</i>
</b>
</body>
Définition de règles identiques pour plusieurs
basiles
Liste de sélecteurs séparés

par les virgules
Propriété Valeur
h1,h2,h3,p { font-size: 12px;}
Définition
p { margin-top: 25px;}
Rappels
Marge externe (Margin-top)
Css Css Css Css Css Css

Marge interne
Css Css Css Css Css Css
(Padding-right)
Marge externe Css Css Css Css Css Css
(Margin-left) Marge interne
(Padding-bottom)
Bloc Conteneur
Exemple
<H1>
<H2>
<H3>
h1 {
margin: 30px ;color:#000000;
border-right: 5px solid black ;
border-top: 5px solid #000000 ;
padding-left: 40%;
margin-right: 10px ;
}
h2 {
padding-left: 25px ;
border-top: 1px solid #ffffff;
line-height: 25px ;
font-size: 1.4em ;
border-bottom: 2px solid #ffffff ;
}
h3 {
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
TD
body {
margin: 50px 100px ;

padding-right: 200px ; // et non 200 px;
text-align: right ;
color: #ffffff ;
font: 1.5em helvetica, sans-serif ;
border-style: dotted;
}
exemple : Mozilla
exemple : Mozilla
exemple : Mozilla
padding-right: 200px ;
exemple : Mozilla
text-align: right ;
exemple : Mozilla
exemple : Explorer
Il faut respecter les balises
body
{
padding-right: 200px ; // et non 200 px;
text-align: right ;
color: #ffffff ;
font: 1.5em helvetica, sans-serif ;
}
La classe
 Une classe est un style indépendant que l'on peut appliquer

à toute balises HTML.
 Chaque classe se voit attribuée un nom unique spécifié
ensuite dans la ou les balises HTML qui l'utilisé par le bias
de l'attribut style.
 Les règles de classe peuvent être définies entre les balises
<style> </style>
dans l'en-tête ou dans un fichier CSSen ligne*.
 Elle permettent aux fonctions Javascript d'identifier un
objet unique, elles sont très utilisées en DHTML.
Les id sont comme les classes définit dans l'entête ou

exportées d'un fichier CSS externe ou liés au document
HTML.
Syntaxe générale d'une classe
CSS
 Le sélecteur de classe permet de définir un style
applicable à toute balise HTML.
 Une sous class possède un nom unique précédé d’un
point.
Syntaxe générale d'une classe CSS
 Les styles d'une balise
Sélecteur Propriété Valeur

de classe
.copy { font-size: 12px;}
Définition
utilisation <p class="copy"> … </p>

Exemple : sous class
indépendante <ul>
<li class="nav">nom</li>
<li class="nav">prenom</li>
 .nav {color:red;} <li class="nav">age</li>
</ul>
Factorisation
importante
<ul class="nav">
<li>nom</li>
<li>prenom</li>
<li>age</li>
</ul>
héritage sous class indépendante
 .nav li{color:red;}
<ul class="nav">
<li>nom</li>
<li>prenom</li>
<li>age</li>
</ul>
Cela va affecter tous les

li sera enfant éléments li dans la classe .nav
de la classe .nav
Ecriture
<ul>
<div class="nav">
<li>nom</li>
 .nav li{color:red;} <li>prenom</li>
<li>age</li>
</div>
</ul>
suite
 .nav ul ul{color:red;}
<div class="nav">
<ul>
<li>nom
<ul>
<li>dupont</li>
<li>martin</li>
</ul>
</li>
<li>prenom
<ul>
<li>denis</li>
<li>gerard</li>
</ul>
</li>
</ul>
</div>
Sous class dépendante
 li.nav{color:red;}
<ul>
<li class="nav">nom</li>
<li class="nav">prenom</li>
<li class="nav">age</li>
</ul>
Sous class dépendante
<div class="nav">
…
</div>
Bilan
<BODY> .HTML
<ul class="niveau1"> Le Résultat
<li>Exemple 1</li>
<li>Liste simple</li> ▪ Exemple 1
</ul>
<div class="italic_rouge">
▪ Liste simple
Exemple 2
</div>
</BODY>
Sous Class dépendante Sous Class indépendante

.CSS .CSS
ul.niveau1 { .italic_rouge {
list-style-type:square; color:red;
color:blue; font-style:italic;
} }
Du HTML au CSS : Sélecteurs
<BODY> .HTML
<ul class="niveau1"> Le Résultat
<li>Exemple 1</li>
<li>Liste simple</li> ▪ Exemple 1
</ul>
<div class="italic_rouge">
▪ Liste simple
Exemple 2 Exemple 2
</div>
</BODY>
Sous Class dépendante Sous Class indépendante

.CSS .CSS
ul.niveau1 { .italic_rouge {
list-style-type:square; color:red;
color:blue; font-style:italic;
} }
ID
 Très utile pour spécifierdes règles qui ne s'appliquent

qu'à un élément avec un ID unique donné défini par
l'attribut id en HTML.
 Pas plus d'un élément ne doit avoir un ID donné.
 utilisé avec Javascript pour repérer et traiter un
élément particulier.
Syntaxe générale d'une ID
 des styles UNIQUE indépendants de toute balise HTML
Sélecteur Propriété Valeur

d'ID
#area { font-size: 12px;}
Définition
 utilisation <p id="area"> … </p>

Du HTML au CSS : Sélecteurs
<BODY> .HTML Le Résultat
<div id="bloc_unique">
Bloc A Bloc A
</div>
</BODY>
Le sélecteur id
L’élément devient unique, il est
.CSS
utilisé une seule fois dans la page.
#bloc_unique {
background-color:black;
color:white ;
}
TD : voir exemple
<div id="sidebar">
<h4>Toutes mes photos <br> </h4>
<ul>
<li><a href="#">Berlin<br></a></li>
<li><a href="#">Evry</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">NU york </a></li>
<li> <a href="#"><img alt="..." src="photo.jpg" width=50px
/> </a></li>
</ul>
</div>
div#sidebar {
float: left;
width: 23%;
margin: 2em 0 0 2%;
padding: 0 0 15px;
background: url(arrow.gif) 100% 100% no-
repeat;
}
#sidebar ul {
list-style: none;
margin: 0;
padding: 0 0 10px;
border-right: 3px double
rgb(50%,50%,35%);
text-align: right;
}
#sidebar a:hover {
color: rgb(10%,20%,0%);
border-color: rgb(98%,48%,40%);
background: url(arrow2.gif) 0 100% no-
repeat;
padding-left: 15px;
}
div#sidebar {
float: left; width: 23%; margin: 2em 0 0 2%; padding: 0 0 15px;
background: url(arrow.gif) 100% 100% no-repeat;}
#sidebar ul {
list-style: none; margin: 0; padding: 0 0 10px; border-right:
3px double rgb(50%,50%,35%); text-align: right;} #sidebar h4,
#sidebar ul {margin: 0 6px 0 0;}
#sidebar li {
padding: 0.5em 0 0.25em; /* border-bottom: 1px solid
rgb(84%,84%,69%); */}
#sidebar a {text-decoration: none; padding: 0 0.5em 0 0;
border-bottom: 1px solid rgb(84%,84%,69%);}
les speudos selecteurs
#sidebar a:link {color: rgb(20%,40%,0%);}
#sidebar a:visited {color: rgb(58%,68%,40%);}
#sidebar a:hover {color: rgb(10%,20%,0%); border-color:
rgb(98%,48%,40%); background: url(arrow2.gif) 0 100% no-
repeat; padding-left: 15px;}
Lecture
 <li class="submenu">
 li a un attribut class de valeur submenu
 div#nav ul.niv1 li.submenu:hover ul.niv2 {}

la liste de
la classe niv2
qui descend d'un
élément
de liste survolé
qui descend d'une

liste niv1
qui descend
d'un div id nav
Un joyeux mélange !
! Il est possible de mélanger balise, id, classe et hiérarchisation :

p#monid.maclasse { }
! Souvent cela crée du CSS trop spécifique, donc la bonne pratique
veut que l’on est le moins spécifique possible.
59
Espace ou pas ?
! Pas d’espace signifie que toutes les conditions DOIVENT être

vraies
! p.toto { } cible tous les paragraphes ET qui ont une classe « toto »
<p class="toto"> ... </p>
220
Espace ou pas ?
! Un espace entre deux « sélecteurs » détermine la généalogie :

p .toto { } cible tous les éléments qui ont pour classe « toto » et qui
sont descendants d’un paragraphe
<p> …. <a class="toto"> … </a> </p>
<p> …. <span class="toto"> … </span> </p>
<p> …. <em class="toto"> … </em> </p>

...
61
Convention de nommage
! Un nom de classe ou d'ID ne doit pas avoir d'accent ou caractères

spéciaux
! On a tendance à éviter le « tout majuscule »
! Un nom d'ID ne prend jamais d'espace
! Un nom de classe ne prend pas d'espace, sinon c'est une nouvelle
classe
62
En résumé
CSS HTML ciblé
p{} <p> …. </p>
.maclasse { } <element class="maclasse"> ... </element>
#monid { } <element id="monid"> ... </element>
p.maclasse { } <p class="maclasse"> … </p>
<p> <element class="maclasse"> …. </element>

p .maclasse { }
</p>
<p> … <p>
p, div { }
<div> … </div>
63
Qui est ciblé ?
div {
...
}
.first {
...
}
p.first {
...
}
64
Qui est ciblé ?
.sugar {
...
}
.sugar p {
...
}
p.sugar {
...
}
65
Qui est ciblé ?
h1 #hautpage {
...
}
h1#hautpage {
...
}
66
Qui est ciblé ?
.first a {
...
}
.first .sugar {
...
}
.important, #toffee {
...
}
67
Les pseudos-classes sur les liens
! Le sélecteur a:link désigne les liens hypertextes non visités.

! Le sélecteur a:visited désigne les liens hypertextes déjà visités
! Le sélecteur a:hover désigne un lien survolé.
! Le sélecteur a:active désigne un lien cliqué.
! Pour retenir l’ordre : LoVe Hate : link, visited, hover, active
229
Démonstration de :hover sur du bouton
http://tympanus.net/Development/CreativeButtons/
230
Les autres pseudo-classes
! :hover peut être appliqué sur d’autres éléments que des liens (à
partir de IE6).
! On peut écrire p:hover pour créer un effet au survol d’un
paragraphe par exemple
70
:focus sur les liens et inputs
! :focus appliqué sur les liens, boutons, ou inputs lorsqu’ils « ont le

focus »
71
Couleurs et unités CSS
La synthèse additive des couleurs
73
Les couleurs en CSS
236
Les couleurs en CSS
• Notation hexadécimale : #ffffff (blanc)

• Notation hexadécimale courte (qui est doublée pour obtenir la
version longue) : #fff
• Notation RGB : rgb(255,255,255) / rgba(255,255,255,1)

• Notation HSL : hsl(0, 0%, 100%); / hsla(0, 0%, 100%,1);
• Mot clé : white
237
Les couleurs en CSS
• La couleur est une propriété utilisable sur :

– color
– background
– border
– …
239
Le Pixel - px
• Unité « fixe »
• Dépendance à la résolution du périphérique
• Valeur « compilée » finale en CSS
77
Le cadratin - em
• Unité fluide utilisée pour les polices d’écriture

• Sa taille est relative à la taille de la police de l’élément parent.
78
Le cadratin - em
• Utiliser des polices en em permet de garder le rythme

typographique et les proportions entre les différents éléments
79
Le pourcentage : %
• Unités fluides (relatives à la taille de leur parent) :

– %: proportion relative à la dimension de l'élément parent ou la taille de
la police selon la propriété.
245
En web, quelle unité utiliser ?
• "px" pour exprimer une dimension fixe (indépendante de la taille de

la police)
• "em" pour attribuer des tailles de polices en fonction de la taille de
la police de leur parent.
• "%" pour attribuer des dimensions proportionnées aux dimensions
de l'élément parent.
Une mise en page fluide s'appuie généralement sur un
dimensionnement des éléments en pourcentage
P
o
246
Propriétés de typographie, polices et puces
Font-family
body {
font-family: Arial, Helvetica, sans-
serif;
248
Font-family
! font-family : indiquer la (ou les) polices à utiliser

body { font-family: Arial, Helvetica, sans-serif;}
! L’ordre des polices appliquées est celui de la propriété de gauche à
droite
249
Polices utilisables
• Il faut que la police soit présente sur le poste de l’utilisateur, sinon le

navigateur passe à la suivante.
• www.cssfontstack.com : liste des polices websafe par système
d’exploitation
• 21 familles de polices prêtes pour le Web
259
Police utilisables
! @font-face permet l’utilisation de polices non « safe » :

– Attention au poids au téléchargement
– Attention aux licences
251
Polices utilisables
• Quelques ressources pour trouver des polices compatibles :

– Google Web Fonts API
252
Polices utilisables
• http://www.fontsquirrel.com
• Autre outil : https://
everythingfonts.com/font-face
• Autre fonderie intéressantes :
https://typekit.com/
253
Font-size
body {
font-size: 18px;
}
254
Font-size
! font-size : valeur en unité permet de définir la taille d’une police (=

la « hauteur »)
! On utilise les unités vues précédemment (px, em, etc.)
255
Mettre un
paragraphe en gras
p{
font-weight: bold;
}
256
Font weight
! font-weight: valeur permet de déterminer l’épaisseur de la police.

! Principales valeurs possibles : normal, bold (gras)
! Permet de mettre en gras d'autres éléments
257
Mettre le paragraphe
en italique
p{
font-style: italic;
}
258
Font-style
! font-style : valeur permet de préciser le style de police

! Principales valeurs possibles : normal, italic, oblique.
! Permet de mettre en italique des éléments
259
Augmenter
l’interlignage
body {
line-height: 1.5;
}
260
Line-height
! line-height: valeur change l’interlignage

! Les valeurs possibles sont des valeurs numériques en unité de
mesure (px, em, %) mais il vaut mieux ne pas mettre d’unité du tout
pour garder plus de flexibilité.
261
Color
h1 {
color: #008499;
}
262
Color
! color: valeur permet de donner la couleur du texte

! Les valeurs possibles sont toutes les couleurs présentées
précédemment
98
Text-align
! text-align : valeur permet d’aligner le texte à gauche, droite ou

milieu
! Les valeurs possibles sont : left, right, center, justify (comme sur
Word)
! L’alignement se fait sur le contenu des balises de type bloc
(paragraphes, titres, divs, etc.)
99
Text-align
p{ p{
text-align: left; text-align: right;
} }
100
Text-align
p{ p{
text-align: center; text-align: justify;
} }
101
Astuce : centrer une image
Pour centrer une image, on la place dans p.align-center {

un paragraphe (ou une div) dont le text-align: center;
contenu est aligné au centre
}
102
Text-transform
! text-transform permet de transformer le texte en majuscule,

minuscule
! Valeurs possibles :
! none
! capitalize
! uppercase
! lowercase
103
Text-transform
h2 { h2 {
text-transform: none; text-transform: capitalize;
} }
104
Text-transform
h2 { h2 {
text-transform : lowercase;
text-transform: uppercase;
}
}
270
Font-variant
! font-variant : valeur permet de changer la casse de la police

! Principales valeurs possibles :
! normal
! small-caps
106
Font-variant
h2 { h2 {
font-variante: normal; font-variante: small-caps;
} }
107
Text-decoration
! text-decoration : valeur permet de changer différents valeurs de

« décoration »
– none: permet d'empêcher l'héritage de la propriété et plus
particulièrement de supprimer le soulignement par défaut des liens
– overline : surlignement
– underline : soulignement
– line-through: texte barré
108
Enlever le soulignement des liens et le remettre au survol
a{ a:hover {
text-decoration: none; text-decoration: underline;
} }
/* enlever le soulignement des liens par défaut */ /* remettre le soulignement pour les liens survolés */
109
Text-indent
! text-indent : valeur (négative ou positive) permet de spécifier un

décalage de la première ligne d’un texte
! Valeurs : unités de mesure de police, positif ou négatif
! Ne fonctionne que sur des éléments de type bloc (ou inline-block)
110
Indentation de 10px
p{
text-indent: 10 px;
}
276
Listes à puces
• list-style-type : permet de spécifier le type de puce ou de

numérotation (appliqué sur le ul / ol)
• Valeurs possibles
– none (pas de puce), disc, circle, square
112
Listes ordonnées
• Valeurs possibles
– decimal (1.), decimal-leading-zero (01.), lower-roman (vii), upper-roman (VII),
etc.
113
Retirer les puces
ul {
list-style-type: none;
}
279
Utiliser une image comme puce
ul {
list-style-image: url("img/liste.png");
}
115
Utiliser une image comme puce
• list-style-image : pour utiliser une image personnalisée en

guise de puce
• Valeur : le chemin d’une image url("cheminimage");
116
Bordures et arrières plans
Les bordures
! La propriété border permet d'ajouter une bordure à un élément

! Elle a 3 « sous propriétés » possibles : style, color et width.
! On regroupe souvent comme ceci :
border: width style color;
118
Les bordures
h2 {
border: 2px solid #009860 ;
}
119
Les bordures
! On peut décomposer les 4 bordures de la manière suivante :

border-top: …;
border-left: …;
border-right: …;
border-bottom: …;
! Si on ne précise pas à quelle bordure on applique la propriété, elle

s’applique aux 4.
120
Les bordures
h2 {
border-top: 1px solid gray;
}
121
Style de bordure
! none : pas de bordure (par défaut);

! dotted : pointillés;
! dashed : tirets;
! solid : un trait simple;
! double : bordure double;
! groove : en relief;
! ridge : autre effet relief;

! inset : effet 3D global enfoncé;
! outset : effet 3D global surélevé.
122
Des bords arrondis : CSS3 !
div { div {
border-radius : 10px; border-radius : 2px 20px 5px

10px;
}
}
123
Background-color
! background-color : valeur permet de donner une couleur de

fond.
! Valeurs : n’importe quelle couleur CSS
! Sur un élément bloc (prend toute la largeur) ou inline (prend la
largeur du contenu)
290
Background-color
body {
background-color: #E6E6E6;
}
125
Background-image
! background-image : valeur permet de définir une image

de fond pour l'élément
! Valeur : none ou url("monimage.png" )
! Par défaut : l’image se répète horizontalement et verticalement
(comme une mosaïque)
126
Background-image
body {
background-image: url("img/bg.png");
}
Les chemins utilisés ont la même notation que vu jusqu’à présent

127
Background-repeat
! background-repeat permet de définir la façon dont l’image va se

répéter.
128
Background-repeat
– no-repeat : l’image ne sera pas répétée
– repeat-x : l’image sera répétée horizontalement
– repeat-y : l’image sera répétée verticalement
no-repeat repeat-x repeat-y
295
Background-position
! background-position : valeur permet de donner la position de l’image de fond par

rapport au coin haut gauche. A utiliser avec background-repeat: no-repeat.
– Des valeurs numériques sur des axes x et y : background-position: 10px 30px;
– Valeurs en toute lettre background-position:right top (en haut à droite):

! top : en haut
! bottom : en bas
! left : à gauche
! center : centré
! right : à droite
130
Une étoile alignée en
bas à droite
.backgroundposition {
background-color: #A4D0F2;
background-image: url('img/
etoile.png');
background-repeat: no-repeat;
background-position: right bottom;
299
Background-attachment
! background-attachment: valeur est très peu utilisé, et permet de définir

si l’image de fond défile par rapport au document
! Valeurs : par défaut (et si on le précise pas), la valeur est scroll.
! On peut utiliser background-attachment:fixed si on veut que l’image
reste visible et que le contenu scroll par-dessus.
132
Tout dans une ligne !
Il est possible de combiner toutes ces propriétés dans une seule et même ligne :
background : propriete1 propriete2 propriete3;
h2 {
background:#7AAAAF url("img/etoile.png") no-repeat center left;

}
133
Dimensions, margin et padding
Petit rappel inline et block
• Sans altération CSS, les éléments de bloc prennent toute la largeur

de leur parent, et sont suivis d’un retour à la ligne (body, html, p, div,
h1, etc.)
• Les éléments de type inline prennent la largeur de leur contenu, et
ne sont pas suivis d’un retour à la ligne (span, a, strong, img, etc.).
135
Largeur et hauteur d'un élément : width et height
! width (largeur) et height (hauteur) ne sont applicables QUE sur

des éléments de bloc
! Valeurs possibles : auto (par défaut, toute la taille du parent), valeur
numérique en px, % ou même em. body{ width: 800px;}
136
Max et min
! On peut utiliser max et min pour déterminer des tailles maximums

et minimums (ne fonctionne pas sous IE6) : min-width, min-height,
max-width et max-height
! Valeurs : numériques
! Permet par exemple de gérer un débordement d’image :
img { max-width: 100%; } : les images sont limitées à la taille de leur
parent
137
Marges
! Il existe deux types de marges : intérieure appelée padding, et extérieure appelée margin
(s'il y a une bordure elle est elle aussi ajoutée à la largeur effective des éléments)
138
Marge extérieure « margin »
! La propriété margin détermine l’espace entre le bord de l’élément,

et l’élément suivant.
! Par défaut margin: valeur applique la même valeur aux 4 cotés
! Valeur possible : auto, valeur en unité de mesure, positive ou
négative
139
Marge extérieure « margin »
! On peut la décomposer individuellement en

– margin-top : marge extérieure haute
– margin-right : marge extérieure droite
– margin-bottom : marge extérieure basse
– margin-left : marge extérieure gauche
! Ou rassembler les 4 valeurs : margin: 10px 5px 8px 15px; (dans

l’ordre : haut, droite, bas, gauche)
140
Ajouter une marge
sous un paragraphe
p{
margin-bottom: 30px;
}
141
Ajouter une marge
sous un titre
h2 {
margin: 50px 0;
}
Ici 50px correspondent à la

marge haute et basse et 0
aux marges gauches et
droites
142
Centrer horizontalement à l’aide de margin
Pour centrer un élément de type bloc body {

horizontalement dans son parent il faut width: 800px;
lui donner une largeur (width), et margin: 0 auto;
appliquer une marge auto à gauche et à }

droite
143
Margin et éléments inline
• Par défaut, une margin top ou bottom sur un élément inline ne

fonctionnera pas (puisqu’il est dans le flux de la page).
• Une marge left ou right fonctionnera par contre
144
Padding : la marge « intérieure »
! La propriété padding détermine un espacement entre le bord de

la boite et son contenu
! Par défaut padding : valeur applique la même valeur aux 4 côtés
! Valeur possible : valeur en unité de mesure
145
Padding : la marge « intérieure »
! On peut la décomposer individuellement en

– padding-top : marge intérieure haute
– padding-right : marge intérieure droite
– padding-bottom : marge intérieure basse
– padding-left : marge intérieure gauche

! Ou rassembler les 4 valeurs : padding: 10px 5px 8px 15px;
(dans l’ordre : haut, droite, bas, gauche)
146
Ajouter du padding au body
body {
padding: 10px 15px;
}
316
Ajouter du padding à un
titre pour décoller la
bordure
h2 {
padding-bottom: 10px
15px;
317
Padding sur élément en inline
Ajouter du padding sur des éléments a{

inline permet de « changer leur taille » padding: 5px 15px;
sans passer par un width / height
}
(attention aux débordements) Pour agrandir le lien
149
Retirer les marges et padding par défaut du navigateur
Par défaut, le navigateur applique des ul {

marges (comme par exemple sur les margin: 0;
listes). Pour les retirer on peut écrire
}
margin:0;
150
Retirer les marges et padding par défaut du navigateur
Par défaut, le navigateur applique aussi ul {

du padding (comme par exemple sur les margin: 0;
listes). Pour le retirer on peut écrire
padding: 0;
padding:0;
}
320
Padding et calcul de dimension d’élément
Attention le padding entre en compte dans la

dimension « affichée » de l’élément et s’ajoute à sa
valeur « width » (tout comme la bordure)
321
Padding et calcul de dimension d’élément
body { Valeur affichée de body :
width: 800px; 800 + 15 + 15 = 830px !
padding: 10px 15px;
153
Box-sizing:border-box - changer le modèle de boîte
 Pour faire en sorte que le padding (et la bordure) soit calculé à l'intérieur de
la
!
boîte on peut changer le modèle de calcul à l'aide de box-sizing : border-
box;
.element {
box-sizing: border-box;
}
154
Box-sizing:border-box - changer le modèle de boîte
body { Valeur affichée de body :
width: 800px; 800px
padding: 10px 15px;
box-sizing: border-box;
}
155
Overflow : pour éviter que ça dépasse
! Il est possible que du contenu texte dépasse l'élément qui le

contient (surtout si on défini des hauteurs fixes)
! Exemple : p {height: 100px}, le contenu « dépasse » du paragraphe
156
Overflow: hidden - cacher ce qui dépasse
! overflow: hidden permet de cacher tout ce qui dépasse.

! Problème : on perd tout ce qui est caché, impossible de le voir
157
Overflow: auto - afficher une barre de défilement
! overflow: auto; permet d’afficher une bar de défilement si

nécessaire
158
Positionnement et Flux en CSS
Vue d’ensemble des méthodes de positionnement

Les modes de positionnement
 Flux : ordre d’affichage des éléments

 4 méthodes de positionnement
normal
float
relatif
absolu
 Quels sont les différences ?
Les « flottants » et le flux
! La propriété float:valeur permet d’extraire des éléments du flux de la

page, ce qui signifie que le reste du contenu « coule »autour
! Elle prend 3 valeurs : left, right et none (permet de remettre u n élément

dans le flux)
161
Le Flux normal
<BODY>
<div class="conteneur">
<div class="normalA">
Bloc A
</div>
<div class="normalB">
Bloc B
</div>
</div>
</BODY>
.normalA {
width:150px;
height:150px;
background-color:red; Bloc conteneur
border:1px solid black;
}
.normalB {
width:250px ;
height:100px ;
background-color:green;
Bloc A B
Bloc
}
Le Flux normal : en bloc
<BODY>
<div class="normalA">
Bloc A
</div> Bloc A
<div class="normalB">
Bloc B
</div>
</div> Bloc B
</BODY>
.normalA {
width:150px;
height:150px;
}
.normalB {
width:250px ;
height:100px ;
Flux normal en bloc :
background-color:green; Succession verticale
}
Le Flux normal : en ligne
<BODY>
<span class="normalC">
Bloc C
</span>
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
.normalC {
width:150px;
height:150px;
}
.normalD {
width:250px ;
height:100px ;
border:1px solid black; Bloc C
} Bloc D
Le Flux normal : en ligne
<BODY>
<span class="normalC">
Bloc C
Bloc D
</span> Bloc C
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
.normalC {
width:150px;
height:150px;
}
.normalD {
width:250px ;
height:100px ;
Flux normal en-ligne :
Succession horizontale
}
Noter bien
.bloc_relatif
{position:relative;left:30px;}
Sous le pont Mirabeau

<div class="bloc_relatif"> div class="bloc_relatif" </div>
La joie venait toujours après la peine
</div>
Sous le pont Mirabeau

<span class="bloc_relatif"> span class="bloc_relatif" </span>
La joie venait toujours après la peine
</div>
Noter bien la différence :
inline et bloc
Succession horizontale
Succession
verticale
Le Flux flottant
<BODY>
<div class="flotteA">
Boîte A
</div>
<p>
Texte...blabla ...
</p>
</div>
</BODY>
.flotteA {
float:left;
width:500px;
Bloc conteneur
background-color:yellow;
}
Boîte A – float:left
Le Flux flottant
<BODY>
<div class="flotteA"> Boîte A – float:left Texte…texte…text
…texte … texte…
Boîte A texte…texte…texte…texte…texte…texte…texte…texte…texte…texte
</div> texte…texte…texte…texte…texte…texte…texte…text…texte…texte
<p>
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
Texte...texte ...
</p> texte…texte…texte…texte…texte…texte…texte…text…texte…texte
</div> texte…texte…texte…texte…texte…texte…texte…text…texte…texte
</BODY> texte…texte…texte…texte…texte…texte…texte…text…texte…texte
.flotteA {
float:left;
width:650px;
Bloc conteneur
}
Le Flux flottant
<BODY>
Boîte A
</div>
<div class="flotteB">
Boîte B
</div>
</div>
</BODY>
.conteneur {
width:800px;
}
.flotteA {
float:left; Bloc conteneur - 800px de large
width:650px;
}
.flotteB {
float:left;
width:100px;
background-color:blue;
} Boîte A – 650px
Le Flux flottant
<BODY>
Boîte A
</div> Boîte A – 650px
Boîte B
</div>
</div>
</BODY>
.conteneur {
width:800px;
}
.flotteA {
width:650px;
}
.flotteB {
float:left;
width:100px; Boîte B – 100px
}
Le Flux flottant
<BODY>
Boîte A
Boîte B
</div>
</div>
</BODY>
.conteneur {
width:800px;
}
.flotteA {
width:650px;
}
.flotteB {
float:left;
width:600px;
border:1px solid black; Boîte B – 600px
}
Le Flux flottant
<BODY>
Boîte A
Boîte B
</div> Boîte B – 600px
</div>
</BODY>
.conteneur {
width:800px;
}
.flotteA {
width:650px;
}
.flotteB {
float:left;
width:600px;
}
Le Flux relatif
<BODY> Css css css css css css css css Css css css css css css css css
<div class="conteneur"> Top
Css css css css css css css css Css css– 20px
css css css css css css
<div class="bloc_relatif"> Css css css css css css css css Css css css css css css css css
Bloc A
</div>
Bloc A
Css css css css css css css css Css css css css css css css css
css css css css... Css css css css css css css css Css css css css css css css css
</div> css css
</BODY>
.conteneur { Left – 30px
width:800px;
}
.bloc_relatif {
position:relative;
width:300px;
margin-top:20px;
margin-left:30px; Bloc conteneur
}
Le Flux absolu
<BODY> Css css css css css css css css Css css css css css css css css
<div class="conteneur"> Css css css css css Topcss css css css css css css
– 20px
<div class="bloc_absolu"> Css css css css css css css css Css css css css css css css css
Bloc A
</div>
Bloc A
css css css css css...
</div>
</BODY>
Left – 30px
.conteneur {
width:800px;
}
.bloc_absolu {
position:absolute;
width:300px;
margin-top:20px;
margin-left:30px; Bloc conteneur
}
Le Flux absolu
<BODY>
<div class="conteneur"> css
css css css css...
<div class="bloc_absolu">
Bloc A
</div>
ddddddd…..dddd
</div>
</BODY>
.conteneur {
width:800px;
}
.bloc_absolu {
position:absolute;
width:300px;
margin-top:20px;
margin-left:30px;
}
Création d'un site
Exemple complet
Bloc Header – flux normal
Bloc conteneur
Exemple complet
Header_gauche - float left Header_droit – float left

Exemple complet
Bloc Menu Header – flux normal

Exemple complet
Bloc
Menu
-
Float left
Exemple complet
Bloc
Menu Bloc contenu – float right
-
Float left
CSS et mise en page
• Pendant longtemps nous avons utilisé des fottants pour faire des
mises en page. Vous retrouvez encore cette technique sur
beaucoup de sites développés jusqu’il y a encore quelques années.
• Aujourd’hui, la mise en page de sites web moderne se fait avec

deux techniques : flexbox (pour des mises en page fluides) et grid-
layout (plus récent et moins bien supporté mais qui permet de créer
facilement des sites sur des principes de grilles.
183
CSS et mise en page avancée : Flexbox
• Flexbox pour créer des mises en page fluides :

– https://css-tricks.com/snippets/css/a-guide-to-flexbox/
– https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-
avec-html5-et-css3/la-mise-en-page-avec-flexbox
– https://developer.mozilla.org/fr/docs/Web/CSS/
Disposition_des_bo%C3%AEtes_flexibles_CSS/
Utilisation_des_flexbox_en_CSS
– https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-
module.html
184
CSS et mise en page avancée : Grid Layout
• Grid layout pour créer une grille CSS (attention au support)

– https://la-cascade.io/css-grid-layout-guide-complet/
– https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
– https://css-tricks.com/snippets/css/complete-guide-grid/
185
Adapter son site au mobile : le responsive webdesign
• http://mediaqueri.es/
186
Liens utiles pour aller plus loin
• learnlayout.com un site qui résume le tout (en anglais)

• MDN CSS : références CSS, tutoriels et démos
• http://fr.openclassrooms.com/ : site plus généraliste pour apprendre
toutes sortes de langages
• https://www.alsacreations.com/ forum d’entre aide
• W3C en français
• Feuilles de styles CSS - Conseils et bonnes pratiques
• https://groups.diigo.com/group/html_css_front des ressources
sélectionnées par moi même
187

Cours CSS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

HTML CSS

 HTML est un langage Universel de description textuelle

 Le World Wide Web a introduit les feuilles de styles en

 Un style rassemble tous les attributs que l'on peut

Applique le style : Titre 1

 Une CSS est constituée de code séparé qui améliore les

! Nous utiliserons les mêmes conventions de chemin que pour les

<link rel="stylesheet" href="styles.css"/>

 Une règle définit l'apparence et le comportement du

• Pour créer un commentaire CSS, on utilise

! styles.css : pour la mise

Selecteur { propriété: valeur;}

Sélecteur HTML définit la propriété

 La syntaxe est composée de 3 éléments :

 La propriété est l’effet que l’on va vouloir donner

 Les sélecteurs sont des caractères alphanumériques

 La partie textuelle d'une balise HTML est appelé

Sélecteur HTML Propriété Valeur

<body> Denis times

Liste de sélecteurs séparés

h1,h2,h3,p { font-size: 12px;}

Marge externe (Margin-top)

Css Css Css Css Css Css

margin: 50px 100px ;

 Une classe est un style indépendant que l'on peut appliquer

Les id sont comme les classes définit dans l'entête ou

Sélecteur Propriété Valeur

.copy { font-size: 12px;}

utilisation <p class="copy"> … </p>

Cela va affecter tous les

Sous Class dépendante Sous Class indépendante

Sous Class dépendante Sous Class indépendante

 Très utile pour spécifierdes règles qui ne s'appliquent

Sélecteur Propriété Valeur

#area { font-size: 12px;}

 utilisation <p id="area"> … </p>

<BODY> .HTML Le Résultat

 div#nav ul.niv1 li.submenu:hover ul.niv2 {}

qui descend d'une

! Il est possible de mélanger balise, id, classe et hiérarchisation :

! Pas d’espace signifie que toutes les conditions DOIVENT être

<p class="toto"> ... </p>

! Un espace entre deux « sélecteurs » détermine la généalogie :

<p> …. <a class="toto"> … </a> </p>

<p> …. <span class="toto"> … </span> </p>

<p> …. <em class="toto"> … </em> </p>

! Un nom de classe ou d'ID ne doit pas avoir d'accent ou caractères

CSS HTML ciblé

p{} <p> …. </p>

.maclasse { } <element class="maclasse"> ... </element>

#monid { } <element id="monid"> ... </element>

p.maclasse { } <p class="maclasse"> … </p>

<p> <element class="maclasse"> …. </element>

! Le sélecteur a:link désigne les liens hypertextes non visités.

! Pour retenir l’ordre : LoVe Hate : link, visited, hover, active

! :focus appliqué sur les liens, boutons, ou inputs lorsqu’ils « ont le

• Notation hexadécimale : #ffffff (blanc)

• Notation RGB : rgb(255,255,255) / rgba(255,255,255,1)

• La couleur est une propriété utilisable sur :

• Unité fluide utilisée pour les polices d’écriture

• Utiliser des polices en em permet de garder le rythme

• Unités fluides (relatives à la taille de leur parent) :

• "px" pour exprimer une dimension fixe (indépendante de la taille de