diff --git a/R1.02/tp/tp3/README.md b/R1.02/tp/tp3/README.md
new file mode 100644
index 0000000..07065dd
--- /dev/null
+++ b/R1.02/tp/tp3/README.md
@@ -0,0 +1,181 @@
+# TP CSS
+
+> Vous trouverez une correction du tp1 [ici](../tp1/correction).
+
+> Vous trouverez une correction du tp2 [ici](../tp2/correction).
+
+
+
+
+## Exercice 1 : stylisation d'une liste
+
+Soit le code [html](src/exercice1.html) suivant
+
+```html
+
Mes films préférés de Clint Eastwood
+
+
Gran Torino (2008)
+
Impitoyable (1992)
+
Mystic River (2003)
+
Sur la route de Madison (1995)
+
Lettres d'Iwo Jima (2006)
+
L'Échange (2008)
+
Josey Wales hors-la-loi (1976)
+
Breezy (1973)
+
+```
+
+Donnez une feuille de style pour obtenir la mise en page suivante ;
+
+
+
+> Propriétés css utiles :
+> - `list-style-type` : contrôle l'apparence de la puce d'un élément de liste.
+> - `padding`, `margin` : espace intérieur et extérieur
+> - `background-color` : couleur de fond
+> - `font-style` : italique, oblique ou normal
+>
+> Pseudo-classes utiles :
+> - `nth-child` : nth-child(an+b) permet de selctionner les éléments en fonction de leur position.
+
+## Exercice 2 : positionnement des boîtes avec la propriété `position`.
+
+Soit le code [html](./src/exercice2.html) suivant :
+
+```html
+
+
+
+
+ Exercice 2
+
+
+
+
+
+
+
+
+
+```
+Donnez une feuille de style pour obtenir la mise en page suivante :
+
+
+> Propriétés utiles
+> - `position` : static, relative, absolute, fixed, sticky
+> - `top`, `bottom`, `right`, `left` : coordonnées de l'élément. Attention, pour le
+> positionnement absolu, les **coordonnées s'entendent par rapport au premier ascendant en position relative,
+> le body s'il n'y en a pas**.
+> - `ẁidth` et `height` : largeur et hauteur.
+> - `border-radius` et `border` : arrondi des coins, et bordure.
+
+## Exercice 3
+Soit le code [html](src/exercice3.html) suivant :
+```html
+
+
+
+
+ Pulp fiction
+
+
+
+
Uuummmm, this is a tasty burger!
+
+ Yeah, I like animals better than people sometimes...
+
+
+ Especially dogs.
+
+
+
+
We happy?
+
+ Dogs are the best.
+
+
+
+ And the good thing about dogs...
+
+
+ is they got different dogs for different people.
+
+
+
+
+
+ Give me... Raoul.
+
+
+ Right, Omar? Give me Raoul.
+
+
+
+```
+En utilsant les selecteurs contextuels (`E F`,`E + F`, `E > F`, `E ~ F`), donnez des règles de styles pour obtenir la
+mise en forme suivante :
+
+
+
+## Exercice 4 : selection à l'aide d'attributs.
+Soit le code [html](src/exercice3.html) suivant
+```html
+
+
+
+
+ Exercice 3
+
+
+
+
+
+```
+Donnez une feuille de style pour obtenir la mise en page suivante :
+
+
+Vous pouvez utiliser les images suivantes :
+- [html](https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg)
+- [css](https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg)
+- [javascript](https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg)
+
+> On peut selectionner un élément en utilisant la valeur d'un attribut. Par exemple :
+> ```css
+> a[href*="toto"]
+> ```
+> selectionne les liens dont l'url cible contient "toto".
+> Propriétés utiles :
+> - `background-image` : permet de définir une image comme arrière plan.
+> - `display` : permet de définir le rendu d'un élément. On pourra utiliser ici les boîtes flexibles (`flex`).
+> - `font-size` : contrôle la taille de la fonte.
+
+## Exercice 5 : media queries
+Soit le code [html](src/exercice4.html) et sa feuille de [style](src/style4.css).
+
+Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché.
+
+> Utilisez une requête media `@media`.
+
+## Exercice 6 : mise en page avec la propriété `float`
+On reprend le source précédent.
+
+À l'aide de la propriété `float`, affichez les articles sur 2 colonnes avec une bordure de 1px grise et
+une marge entre les articles de 40px.
+
+> Vous aurez besoin d'utiliser la propriété `width` que vous pouvez utiliser avec la fonction CSS `calc()` pour le calcul,
+> exemple:
+> ```css
+> width: calc(100px + 2*20px)
+> ```
+> Penser quand vous cherchez la bonne largeur (+/- 50%), qu'il faut prendre en compte la taille de marge et des bordures. Vous pouvez utiliser
+> la propriété `box-sizing`.
+
+Ajoutez une requête media pour que les articles s'affichent à nouveau verticalement lorsque la taille de l'écran est en dessous de 720px.
diff --git a/R1.02/tp/tp3/img/eastwood.png b/R1.02/tp/tp3/img/eastwood.png
new file mode 100644
index 0000000..3a1ff45
Binary files /dev/null and b/R1.02/tp/tp3/img/eastwood.png differ
diff --git a/R1.02/tp/tp3/img/exo3.png b/R1.02/tp/tp3/img/exo3.png
new file mode 100644
index 0000000..2ffda68
Binary files /dev/null and b/R1.02/tp/tp3/img/exo3.png differ
diff --git a/R1.02/tp/tp3/img/smiley.png b/R1.02/tp/tp3/img/smiley.png
new file mode 100644
index 0000000..dfb8651
Binary files /dev/null and b/R1.02/tp/tp3/img/smiley.png differ
diff --git a/R1.02/tp/tp3/img/web_stack.png b/R1.02/tp/tp3/img/web_stack.png
new file mode 100644
index 0000000..d396b7f
Binary files /dev/null and b/R1.02/tp/tp3/img/web_stack.png differ
diff --git a/R1.02/tp/tp3/src/exercice1.html b/R1.02/tp/tp3/src/exercice1.html
new file mode 100644
index 0000000..5be8589
--- /dev/null
+++ b/R1.02/tp/tp3/src/exercice1.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ CEastwood
+
+
+
+