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.
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…
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.
background-colorborderborder-bottomborder-radiuscolorfont-familyfont-sizefont-stylefont-weightlist-style-typemarginmargin-bottommargin-rightmargin-toppaddingpadding-bottompadding-toptext-aligntext-decorationtext-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
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.