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 :
css03-page.html : dans lequel vous ne devrez pas modifier le code HTML ;
css03-page-v2.html : dans lequel vous allez devoir effctuer des modifications du code HTML (ajout de classe, de balise strong, etc).

Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.

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.

Solution HTML :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

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

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.

S’abonner
Notification pour
guest

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

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires