Vous êtes sur la page 1sur 102

Design and CSS

Cascading Style Sheets


Objectifs du cours

Après ce cours vous serez capable de:


– Définir ce que s’est que le CSS
– Utiliser le css

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Plan du cours
▪ Introduction
▪ Le css
▪ Float & position
▪ Propriété display
▪ Elements & pseudo-
classes
▪ Directives
▪ Précédence des
sélecteurs

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
CSS

INTRODUCTION

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Introduction au css
Avant de commencer:

• La combinaison de tout ce qui precede constitue le web

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Introduction au css
definition
• CSS: Cascading Style Sheet
• Langage différend du html
• Permet de décorer un document html
• Version actuelle: css3

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Introduction au css
Avantages

▪ Centralisation des fichiers de mise en forme dans un seul


document
▪ Séparation du design et le contenu
▪ Simplifie la maintenance des pages web
▪ Réduit la taille des pages web
▪ Peut être aussi utilisé pour le XML

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Introduction au css
Possiblités
▪ Définir la disposition du document en agissant sur les
éléments tels que:
▪ Le fond de page (image et ou couleur
▪ Style de lettre (couleur, forme police….
▪ Bordures et les marges
▪ Les propriétés peuvent être appliquées sur :
▪ Les balises de type (<h1>, <p>, <ul>, <a>, …)
▪ Les classes (valeurs des attributs)
▪ Les identifiants
▪ Etc…;

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Introduction au css

Remarques
La syntaxe est très facile à comprendre. Vous devez vous concentrer
sur le vocabulaire, car CSS possède de nombreuses propriétés avec
encore plus de valeurs.

Votre niveau CSS reposera principalement sur la pratique et les


expériences, car c'est un langage descriptif. Pas de variables, pas de
boucles, pas d'opérateur conditionnel

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Questions ?

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Le design et le css

CSS

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Scission d’une page
<div>...</div>

▪ Définit les blocks de la page


✓ Balise de type block
✓ Utilisé pour séparer chaque partie importante de la
page
✓ Facilite l’usage du css
✓ Pas de comportement spécial

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Scission d’une page web

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Sans le css

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Avec le css
Affichage de la page précédente avec CSS

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Ou placer le css

▪ Directement dans les balises

<span style="color: red;">Red text... </span>

▪ Méthode non recommandée


✓ Difficulté de mise à jour
✓ Ne cible qu’une seule balise

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Ou placer le css
▪ Dans le code

<head>
<style type="text/css">
p { color: blue; }
</style>
</head>

▪ Bon à utiliser mais:


✓ Utilisable que pour une seule page
✓ Rend lourd la page

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Ou placer le css

▪ Fichier externe
<!-- Place this code in the head tag -->
<link href="main.css" media="all" rel="stylesheet"
type="text/css" />

▪ Meilleur façon de placer le CSS:


✓ Utilisable sur plusieurs page
✓ Facile à mettre à jour
✓ Séparation du contenu de la mise en forme

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Syntaxe

▪ selector {
property: value;
...
}

p {
background-color: white;
color: black;
font-family: Verdana, "Sans serif";
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Commentaires

▪ Synthaxe: /*……………..*/
▪ Pas possible d’utiliser //

/* Document font family */


body { font-family: Verdana, "Sans serif";}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les sélecteurs

▪ Vu d’ensemble des sélecteurs

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les sélecteurs

▪ Vu d’ensemble des sélecteurs

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les attributs de classes
▪ Permet d’appliquer un style sur un ensemble de balise
▪ Ce code css

h1.section { background-color: red; }

▪ Peut etre associé à n’importe quelle balise de type h1

<h1 class="section">My Title</h1>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les attributs id
▪ Permet d’appliquer un style sur une et une seule balise
▪ Ce code css
#MyObjectId { background-color: red; }

▪ Peut etre associé à n’importe quelle balise

<div id="MyObjectId">My Text</div>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les couleurs

▪ Peuvent défini de différente manière

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Unités de mesures
▪ Unités de mesure disponible
✓ %
✓ in, cm, mm
✓ em, px
✓ pt, pc
✓ px

body { font-size: 1.2em; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les propriétés de texte:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les propriétés de texte:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Les propriétés de texte:
p {
color: orange;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 10px;
font-style: italic;
font-weight: bold;
line-height: 1.4em;
font-family: "Serif";
font-size: 1.2em;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: background

▪ background-color
▪ background-image
▪ background-repeat
▪ background-attachment
▪ background-position

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: background

body {
background-color: black;
background-image: url('kaleidoscope.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 0% 50%;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: margin

Les marges externes


▪ margin-position:
✓ margin-top
✓ margin-right
✓ margin-bottom
✓ margin-left
My Block

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: margin
p { margin: 40px; }

Sans style:

Avec style:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: margin

L’attribut margin peut prendre la valeur auto


▪ permet de centrer les blocks

table { margin: auto; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: padding

Spécifie les marges internes


• padding-position:
✓ padding-top
✓ padding-right
✓ padding-bottom
✓ padding-left
My Block

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: padding
th { padding: 10px 40px 10px 40px; }
td { padding: 20px; text-align: right; }

Avec style :

Sans style:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attribut: border

▪ border-width
▪ border-style
▪ border-color
▪ border-collapse
▪ border-position:
✓ border-top
✓ border-bottom My Block
✓ border-left
✓ border-right

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
table {
border: 5px solid green;
border-collapse: collapse;
}

th {
padding: 10px 40px 10px 40px;
border-bottom: 3px dotted red;
border-left: 1px solid blue;
}

td {
padding: 20px;
text-align: right;
border-left: 1px solid blue;
border-bottom: 1px solid blue;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Attributs: list

▪ list-style-type
▪ list-style-position
▪ list-style-image

ul {
list-style-type: disc;
list-style-position: outside;
list-style-image: url('orange.gif');
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Questions ?

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Deboguer avec le navigateur

Avant de commencer, comment deboguer avec le css !


▪ Vous pouvez utilizer votre navigateur préféré pour déboguer
▪ Faites un clique droit puis chosissez “inspecter”
▪ Toutes les propriétés css sont editable

NB: quand vous rechargez la page, toutes les modifications disparaissent

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Deboguer avec le navigateur

Exemple avec chrome:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Exercice 1/2

▪ Créer votre proper designe


✓ Mettre ç jour votre page de cv
✓ Ajouter un lien de fichier css externe
✓ Vous pouvez ajouter d’autres balises html si vous voulez
▪ Utilisez au maximum les propriétés css que nous venons de voir
✓ Margins, Paddings & Border
✓ Texts properties, Colors, Size unit
✓ List-Style
✓ Background

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Exercice 2/2- créer des pages suivantes:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css

Les flottants et les positions

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Comprendre le flux
Avant d’aller dans les details nous devons comprendre le flux
▪ Comment est ce que les éléments sont affiché dans le flux

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Comprendre le flow
▪ Une structure simple:
<div>
<p>Lorem ipsum dolor sit amet</p>
<div style="height: 50px; background: red;"></div>
<div style="height: 50px; background: blue;"></div>
</div>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Comprendre le flow
▪ Le flow est prévisible
▪ Si nous changeons l’ordre :

<div>
<div style="height: 50px; background: blue;"></div>
<p>Lorem ipsum dolor sit amet</p>
<div style="height: 50px; background: red;"></div>
</div>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Le schema de positionnement
▪ Un élément dans un flux peut prendre trois positions:
▪ Normale: l’élément est place par rapport à sa position dans le
document
▪ Float: l’élément est dabord placé normalement puis déplacer à
gauche ou à droite selon les possibilités
▪ Absolute: l’élément est place autrement que la position dans le
DOM

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples - Normal
<div>
<div class="block"></div>
<p>...</p>
<p>...</p>
</div>

.block {
height: 98px; width: 98px;
background: blue;
border: 1px black solid;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples - float
<div>
<div class="block"></div>
<p>...</p>
<p>...</p>
</div>

.block {
height: 98px; width: 98px;
background: blue;
border: 1px black solid;
float: right;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples - positon
<div>
<div class="block"></div>
<p>...</p>
<p>...</p>
</div>

.block {
height: 98px; width: 98px;
background: blue;
border: 1px black solid;
position: absolute;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Attribut : float

• Détermine les éléments flottants


• Les valeurs possibles:
– Left
– Right
– None
– inherit
Floating block

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemple – blocs multiples


<div class="block red"></div>
<div class="block blue"></div>
<div class="block yellow"></div>

.block {
height: 98px; width: 98px;
border: 1px black solid;
}
.red { background: red; }
.blue { background: blue; }
.yellow { background: yellow; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemple – blocs multiples


<div class="block red"></div>
<div class="block blue"></div>
<div class="block yellow"></div>

.block {
height: 98px; width: 98px;
border: 1px black solid;
float: left;
}
.red { background: red; }
.blue { background: blue; }
.yellow { background: yellow; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemple – blocs multiples


<div class="block red"></div>
<div class="block blue"></div>
<div class="block yellow"></div>

.block {
height: 98px; width: 98px; Browser right border
border: 1px black solid;
float: right;
}
.red { background: red; }
.blue { background: blue; }
.yellow { background: yellow; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Attribut : position

• Déplacer un élément du flux


• Les valeurs possibles:
– Static: l’élément est à sa position normale
– relative: position relative à sa position normale
– Absolute: position relative à la fenêtre (position de l’élément parent)
– Fixed: même que absolute sauf que l’élément suit le scrolle de
l’utilisateur

.menu { position: fixed; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples – sans position


<div class="container">
<div style="background: honeydew;">
<div style="background: lime;">
<div style="background: red;"></div>
</div>
</div>
</div>

div { padding: 20px;


border: 1px black solid; }
.container { background: lightblue;
width: 200px; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples –position relative 1/2


<div class="container">
<div style="background: honeydew;">
<div style="background: lime;">
<div style="background: red;" class="relative"></div>
</div>
</div>
</div>

div { padding: 20px;


border: 1px black solid; }
.container { background: lightblue;
width: 200px; }
.relative { position: relative;
left: 50px; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples –position relative 2/2


<div class="container">
<div class="relative" style="background: honeydew;">
<div style="background: lime;">
<div style="background: red;"></div>
</div>
</div>
</div>

div { padding: 20px;


border: 1px black solid; }
.container { background: lightblue;
width: 200px; }
.relative { position: relative;
left: 50px; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples –position absolue 1/2


<div class="container">
<div style="background: honeydew;">
<div style="background: lime;">
<div class="chosen" style="background: red;"></div>
</div>
</div>
</div>

div { padding: 20px;


border: 1px black solid; }
.container { background: lightblue;
width: 200px; }
.chosen { position: absolute; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exemples –position absolue 2/2


<div class="container">
<div class="chosen" style="background: honeydew;">
<div style="background: lime;">
<div style="background: red;"></div>
</div>
</div>
</div>

div { padding: 20px;


border: 1px black solid; }
.container { background: lightblue;
width: 200px; }
.chosen { position: absolute; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Comportements de la position absolue


<div class="topleft"></div>
<div class="topright"></div>
<div class="bottomleft"></div>
<div class="bottomright"></div>

div { padding: 20px; border: 1px black solid;


position: absolute; }
/* Note that top, right, bottom and left are margins from
the last positioned element, body if none */
.topleft { top: 0; left: 0; background: honeydew; }
.topright { top: 0; right: 0; background: lime; }
.bottomleft { bottom: 0; left: 0; background: red; }
.bottomright { bottom: 0; right: 0; background: grey; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Questions?

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
La propriété display

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

C’est quoi “display”


▪ Comment un élément est rendu
▪ Différemment de position et float:
▪ Ces propriétés permettent de dire Où l’élément est positionné
▪ Nous allons maintenant parler de comment l’element est
positionné
▪ Rapellez vous des balises de type block et inline
▪ Balises de type block: <p>, <div>,<hn>, ….
▪ Inline: <span>, <em>, <strong>…..
▪ Notez que ceci est le comportement par défaut, tout est modifiable

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

C’est quoi “display”


▪ Différence entre block et inline:
▪ Une balise de type block occupe toute la largeur disponible
▪ Une balise inline occupe la plus petite largeur possible
▪ Impossible de définir la hauteur et la largeur d’une balise de type inline

▪ C’est le pourquoi
▪ Les paragraphes, il occupe l’espace du haut vers le bas
▪ Les span, occupe du gauche vers la droite

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

C’est quoi “display”


▪ Différence entre block et inline:
▪ Une balise de type block occupe toute la largeur disponible
▪ Une balise inline occupe la plus petite largeur possible
▪ Impossible de définir la hauteur et la largeur d’une balise de type inline

▪ C’est le pourquoi
▪ Les paragraphes, il occupe l’espace du haut vers le bas
▪ Les span, occupe du gauche vers la droite

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Écraser l’affichage par défaut de la balise span


<span class="block one">Block text</span>
<span class="block two">Block text</span>
<span class="block three">Block text</span>
<span class="one">Inline text</span>
<span class="two">Inline text</span>
<span class="thr">Inline text</span>

span { border: 1px black solid;


margin: 5px; }
.block { display: block; }
.one { background: honeydew; }
.two { background: chartreuse; }
.thr { background: aquamarine; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Plusieurs valeurs de la propriété display

Display value Description Example tags


Block For every container element div, p, ol, ul, hr…
Inline For every content element span, strong, em…
Inline-Block Inline, access to block properties* img, button, textarea…
None The element is hidden script, style
Table-cell Acts like a table-cell td
List-item Acts like a list-item li

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Questions?

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exercice 1/2
• Update your own design!
– Add a header with fixed position, 50px high
– Move your navigation in it
• Use inline-block display on uls
• Use inline display
– Add a sidebar with the aside HTML tag
• Use float on the sidebar
• Use margin on the main content to compensate the sidebar floating
– Add some information about you in this sidebar

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Programmer avec le css

Exercice 2/2 exemple de rendu

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css

Pseudo-classes & elemensts

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts

• Les pseudo-classes/elements font référence à des cas


spécifiques:
– Quand un élément est survolé
– Quand un élément est cliqué
– Qund un élément est à une position paire/impaire (even/odd) de son
élément parent
– Quand un lien est déjà cliqué

• Syntaxe globale: element:pseudo-classe

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Pseudo-classes

• Les pseudo-classes font aux facteurs externes


• Peut être en relation avec la position de l’élément
• Peut être en relation avec le comportement du client

• Syntaxe globale: element:pseudoclass

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Pseudo-classes

• Vu d’ensemble des pseudo-classes

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Exemple de Pseudo-classes
<a href="page2.html">My second page</a>

a:link, a:visited, a:active {


text-decoration: none;
color: red;
}
a:hover { Hover
text-shadow: 1px 1px 5px black;
color: black;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Exemple de Pseudo-classes
<table>
<tr> <th>Col1</th> <th>Col2</th> </tr>
<tr> <td>ValA1</td> <td>ValA2</td> </tr>
<tr> <td>ValB1</td> <td>ValB2</td> </tr>
<tr> <td>ValC1</td> <td>ValC2</td> </tr>
</table>

table, td { border: 1px black solid;


border-collapse: collapse; }
th, td { padding: 5px; }
tr:nth-child(odd) td { background: #CCC; }
tr:nth-child(even) td { background: #888; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Pseudo-elements

▪ Les pseudo-elements permettent de donner du style à certaines parties du


document
✓ La première lettre d’un paragraphe
✓ Style avant/après un élément

▪ Syntaxe globale: element::pseudoelement

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Exemples de pseudo-elements
<p>Lorem ipsum...</p>

p::first-letter {
font-size: 24px;
color: whitesmoke;
text-shadow: 0px 0px 2px black,
1px 1px 2px black;
letter-spacing: 2px;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Exemples de pseudo-elements
<p>Lorem ipsum...</p>

p::first-line {
font-size: 24px;
color: whitesmoke;
text-shadow: 0px 0px 2px black,
1px 1px 2px black;
letter-spacing: 2px;
}

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Pseudo-classes & elemensts
Exemples de pseudo-elements

<h1>Ace of Spades</h1>

h1 { color: grey; }

h1::before { content: '\2660';


margin-right: 5px; }

h1::after { content: '\2666';


margin-left: 5px;
color: red; }

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Questions

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Execercice 1/3
• Update your resume web page
– Add a section called « Hobbies »
• Add a <h2> tag, don’t forget the link in navigation

– List below it (in a table):


• On first column: Five things you enjoy doing
• On second column: How much you enjoy this activity

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Execercice 2/3
• Use ::before & ::after only on « Hobbies » title
– Add stars on both title sides

• Use :nth-child on hobbies table


– Header row should be white
– Odd rows should be blue
– Even rows should be green
– Third row only should be red (neither class nor id ☺)

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css
Execercice 3/3
• CSS code for a star:
– Full: \2605
– Empty: \2606
• HTML code for a star:
– Full: &#9733;
– Empty: &#9734;

• Example rendering:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
css

PRECEDENCE DES SELECTEURS

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 1
• Quel style sera appliqué à la fin?

p { color: red; }
.green { color: green; }

<p class="green">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 1
• Quel style sera appliqué à la fin?

p { color: red; }
.green { color: green; } This one!

<p class="green">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 2
• Quel style sera appliqué à la fin?

#red { color: red; }


.green { color: green; }

<p id="red" class="green">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 2
• Quel style sera appliqué à la fin?

#red { color: red; } This one!


.green { color: green; }

<p id="red" class="green">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 3
• Quel style sera appliqué à la fin?

#red { color: red; }


.green { color: green; }

<p id="red" class="green" style="color: blue;">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 3
• Quel style sera appliqué à la fin?

#red { color: red; }


.green { color: green; }
This one!

<p id="red" class="green" style="color: blue;">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 4
• Quel style sera appliqué à la fin?

.green { color: chartreuse; }


p.green { color: green; }

<p id="red" class="green">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Exemple 4
• Quel style sera appliqué à la fin?

.green { color: chartreuse; }


p.green { color: green; } This one!

<p id="red" class="green">Hi there!</p>

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Explication
• Les sélecteurs sont basé sur:
• Les balises
• Les classes
• Les identifiants
• Pour comprendre les précédences vous pouvez imaginer une
table, la table suivante:

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Explication
• Sélécteurs css
p { color: blue; }
.green { color: chartreuse; }
p.green { color: green; }
#red { color: red; }

Selector Identifier Class Tag Score


p 0 0 1 001
.green 0 1 0 010
p.green 0 1 1 011
#red 1 0 0 100

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Style directement dans la balise
• Attention, les styles défini directement dans les balises prend le
dessus sur tous les sélecteurs
• Le score est toujours égale à « 1000 »

<p id="red" class="green" style="color: blue;">Hi there!</p>

Inline style Identifier Class Tag Score


1 0 0 0 1000

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Le mot clé “important”
• Le sélecteurs le plus fort
• Prend le dessus sur tout, même le style défini directement dans
la balise

p#red { color: red !important; }


* { color: green !important; }

Important Identifier Class Tag Score


2 1 0 1 2101
2 0 0 0 2000

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Précédence des sélecteurs
Égalité
• C’est bien la précédence des sélecteurs,
• Qu’en est il de l’application d’un style sur un même sélecteur?
• Exemple:

p { color: red; }
p { color: green; }

• Dans ce cas, le dernier style domine


• Pas une bonne pratique

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19
Questions?

Ferdinand BATANA,
ferdinand.batana@ipnetexperts.com, 99 31
07 19

Vous aimerez peut-être aussi