Semaine 3 : Découverte de Cascading Style Sheets

Remise de travail Vous devez remettre la Phase 1 du projet avant minuit le jour de cette séance.
Avant la séance (2h)

Pour vous familiariser, lisez la page wikipedia sur CSS

Lisez l'article suivant sur les notions de class et id

Lisez la page suivante sur les 3 possibilités pour ajouter des règles CSS à une page web 3 façons d'ajouter du CSS

Vous devez parcourir le site W3Schools (en anglais) Modèle de boîte CSS (max 20 minutes).

Vous devez regarder et reproduire le résultat de la video suivante:

Pendant la séance

Le professeur fera une démontration du modèle de boîte de CSS.

Vous devez compléter les exercices et commencer la partie du TP portant sur la création du fichier CSS.

N'hésitez pas à poser vos questions aux professeurs. Vous devriez pouvoir compléter l'ensemble du travail à faire pendant la période (consultez le professeur si ce n'est pas le cas).

Exercice A

Créez une nouvelle page web appelé surlignage.html. Ajoutez trois paragraphes HTML au body avec du "Lorem ipsum". Dans chaque paragraphe, isolez des mots en utilisant des spans et attribuez leur différentes propriétés CSS (texte en gras, souligné, avec une bordure, en majuscule etc.). Vous devez essayer au moins 6 propriétés CSS différentes. (2 par paragraphe)

Exercice B

Créez un fichier appelé polices.html dans lequel vous ajouterez 5 paragraphes contenant tous le texte

Ceci est un test de police 1234 !@#$
. En utilisant des id ou des class, attribuez une police différente à chaque paragraphe.

Exercice C

Créez un fichier appelé couleurs.html Vous devez changer les couleurs de texte ou de fond d'au moins trois éléments en utilisant des méthodes de couleur différentes (hexa, rgb ou couleur nommée).

Exercice D

Créez une page appelé echiquier.html reproduisant un echiquier de 64 cases (8x8). Vous devez utiliser uniquement des div, des span et des règles CSS dans un fichier externe appelé echiquier.css.

Exercice E

Créer une copie de echiquier.html appelé echiquier2.html. Ajouter une bordure rouge autour de toutes les cases noires et une bordure verte autour de toutes les cases blanches en ajoutant des règles dans l'en-tête de la page HTML.