CSS

Exercices en CSS les sélecteurs Série 01

Un cours complet pour maîtriser Exercices en CSS les sélecteurs Série 01.

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

Objectif
- Être capable d'utiliser les sélecteurs simples en css
Exercice 01
1. Énoncé
  - Soit le code html suivant :
  - Appliquez ce qui suit :
    - Un background de couleur bleu ciel ,une largeur de 500px ,un retrait de 5px , et un alignement centré pour l’élément identifié par "layout".
    - Aligner le texte à gauche pour la classe "gauche" , à droite pour la classe "droite" et justifié pour la classe justifié.
    - Colorer le texte en bleu pour les éléments h2 et button, et les éléments de p en rouge.
    - Changer la taille du titre à "1.5em" en affichant la première lettre de chaque mot en capitale.
    - Affecter une couleur jaune au background du bouton, et une largeur de 100px.
2. Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 02
1. Énoncé
  - Créer une structure d'une page HTML5 dont le nom est : exercice02.html
  - Nous allons créer un tableau régulier (nombre de colonnes constant par lignes) avec table, tr, td et th.
  - le tableau contiendra au moins 10 lignes tr et 2 colonnes td.
  - la première ligne du tableau sera une ligne d'en-tête et n'aura que des colonnes th.
  - La bordure du tableau soit border : solid 2px blue
  - La largeur du tableau représente 50% de celle de l'écran
  - nous ferons en sorte que la ligne d'en-tête soit établie :
    - La couleur d'arrière plan de l'entête est silver
    - La hauteur d'entête soit 40px
  - Nous ferons en sorte qu'après la ligne d'en-tête, toutes les 6 lignes un périodicité de couleurs soit établie :
    - Les 3 premières lignes seront sur un fond rouge clair (#FCC),
    - La quatrième ligne sera sur un fond jaune clair (#FFC),
    - La cinquième ligne sera sur un fond vert clair (#CFC),
    - La sixième ligne sera sur un fond bleu clair (#CFF).
    - Le reste des lignes seront sur un fond gris clair (#CcF).
2. Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 03
1. Énoncé
  - Créer une structure d'une page HTML5 dont le nom est : exercice03.html
  - Ecrire le code Html et CSS qui permet de réaliser le texte suivant:
2. Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 04
1. Énoncé
  - Créer une structure d'une page HTML5 dont le nom est : exercice04.html
  - Ecrire le code Html et CSS qui permet de réaliser le texte suivant:
2. Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !