Mise en forme en CSS : À partir d’un modèle 01 CSS03

Dans cet exercice, vous devez essayer de reproduire une mise en forme CSS juste en vous référant à un modèle donné sous la forme d’une image.

Consignes

Créez un dossier racine local qui contiendra la totalité des fichiers de votre exercice et veillez à nommer ce dossier correctement.

Téléchargez ci-dessous le fichier .html de base nécessaire pour démarrer l’exercice ainsi que le fichier modèle au format .png.

Vous pouvez faire l’exercice à partir de deux fichiers différents :
css_exercice_mise_en_forme_03.html : dans lequel vous ne devrez pas modifier le code HTML ;
css_exercice_mise_en_forme_03-v2.html : dans lequel vous allez devoir effctuer des modifications du code HTML (ajout de classe, de balise strong, etc).

Placez les fichiers que vous venez de télécharger dans votre dossier racine local.

Créez un fichier .css dans votre dossier racine local.

Intégrez la feuille de style que vous venez de créer dans votre page .html.

Intégrez, à partir de Google Font, la police de caractère de votre choix à votre fichier .css afin de l’utiliser comme police par défaut.

Utilisez le site https://coolors.co pour générer une palette de couleur de votre choix que vous utiliserez pour l’exercice. Notez que pour des raisons de visibilité, l’exercice utilise plus de 5 couleurs, vous devez vous limiter aux 5 couleurs de votre palette.

Créez le code CSS permettant de reproduire la mise en forme du document modèle. Essayez d’en être le plus proche possible…

Rappel ! Attention
Si vous êtes parti du fichier css_exercice_mise_en_forme_03.html, vous ne devez pas modifier le code du fichier .html pour réaliser cet exercice.

Liste des propriétés CSS utilisées :

  • background-color
  • border
  • border-bottom
  • border-radius
  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • list-style-type
  • margin
  • margin-bottom
  • margin-right
  • margin-top
  • padding
  • padding-bottom
  • padding-top
  • text-align
  • text-decoration
  • text-transform

Correction

La correction de l’exercice est téléchargeable ci-dessous avec une feuille de style interne :

Sauf mention contraire*, l'article Mise en forme en CSS : À partir d’un modèle 01 [CSS03] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.