Exercices HTML/CSS

Démarrage

git clone https://github.com/simplon-roanne/html-css-1
cd html-css-1
docker-compose up

Server will be ready on http://localhost:8080

Exercice 1

A partir du fichier html vierge donné, créer une boite div et un paragraphe p à l'intérieur de celle-ci. Créez également votre fichier style.css.

Dans ce dernier, voici les déclarations à y ajouter pour l'élément div

• Une taille (largeur) de 65%
• Une couleur de fond gris clair
• Une marge extérieure de 50px en haut et en bas, et automatique à gauche et droite
• Une marge intérieure de 50px
• Une taille de texte de 1.5em

Et pour un affichage entre 0 et 700px, toujours sur notre div

• Une couleur de fond #ff6666
• Une taille de texte de 1em
• Le texte en blanc

Accomplissement

Une fois les déclarations faites, réduisez votre page en largeur pour observer les changements s'opérer.

Exercice 2

A partir du fichier html vierge donné, créer une boite div et un paragraphe p à l'intérieur de celle-ci. Créez également votre fichier style.css.

Dans ce dernier, voici les déclarations à y ajouter pour l'élément div

• Une taille (largeur) de 50%
• Une couleur de fond #ff6666
• Une marge extérieure de 30px en haut et en bas, et automatique à gauche et droite
• Une marge intérieure de 20px
• Le texte en blanc

Et pour un affichage entre 701px et plus

• Une taille (largeur) de 65%
• Une couleur de fond gris clair
• Une marge extérieure de 50px en haut et en bas, et automatique à gauche et droite
• Une marge intérieure de 50px
• Une taille de texte de 1.5em
• Le texte en noir

Accomplissement

Cette fois, on chargera 2 fois moins de code (7 lignes) sur mobile ;)