Skip to content

Latest commit

 

History

History
48 lines (34 loc) · 1.83 KB

enonce.md

File metadata and controls

48 lines (34 loc) · 1.83 KB
Raw

CSS

Le CSS joue un grand rôle dans la conception d'un site web : il gère toute la présentation visuelle du site. Sans le CSS, les sites web seraient bien ennuyants à regarder.

Au début de la séance, les moniteurs feront une courte présentation de l'inspecteur d'éléments de Google Chrome. Il s'agit d'un outil très utile pour vérifier quels styles CSS s'appliquent sur un élément en particulier. Il est possible d'activer et de désactiver des styles pour expérimenter et déboguer.

Objectifs

  • Manipuler le CSS.
  • Manipuler l'inspecteur d'éléments de Chrome.

Exercices

  1. Créez un site web contenant un titre (h1) et 3 paragraphes. Utilisez du Lorem Ipsum pour le texte des paragraphes. Ajoutez une feuille de style CSS à notre document HTML grâce à la balise link.

  2. Ajoutez un style sur l'élément h1 pour que le titre soit rouge et souligné.

  3. Faites en sorte que le titre soit plus petit de 25%.

  4. Ajoutez des classes différentes pour chacun des paragraphes de la page. À l'aide de ces classes, faites en sorte que le premier paragraphe soit bleu, le deuxième blanc et le troisième rouge.

  5. Placez votre nom dans un élément span en plein milieu du premier paragraphe.

  6. Ajoutez un id sur l'élément contenant votre nom et utilisez cet id pour faire en sorte que votre nom soit affiché en gras. Grâce au sélecteur :hover, faites en sorte que le curseur de la souris devienne une main (comme si c'était un lien cliquable) dès que la souris passe au-dessus de votre nom.

  7. Changez la police de caractères pour tous les paragraphes, mais pas le titre.

  8. Ajoutez une marge significative au deuxième paragraphe.

  9. Placez un formulaire avec 3 champs texte et 3 labels dans le bas de la page. Tentez d'aligner les 3 champs texte sans utiliser de tableau.