Créer une palette de couleur CSS14

Cet exercice consiste à générer une palette de couleurs avec des outils en ligne puis à la présenter proprement en HTML et CSS.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.

Dans le dossier racine, créez un nouveau fichier .css vierge avec le nom style.css.

Dans le dossier racine créer un nouveau fichier .html avec toute la structure de base d’une page web. Copiez / collez le code fourni ci-dessous :

<!DOCTYPE html>
<html>
    <head>
        <title>Palette de couleurs</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>Un exemple de contenu</div>
    </body>
</html>

Intégrez le fichier .css dans la page web.

Gardez les deux fichiers .html et .css ouverts dans votre logiciel d’édition et ouvrez la page .html dans votre navigateur pour consulter les modifications.

Choix des couleurs

Créez une palette de couleur de 4 ou 5 couleurs avec un outil de  votre choix :

Création du HTML de la palette de couleurs

HTML : Créez un bloc HTML neutre auquel vous ajoutez la classe palette.

HTML : À l’intérieur du bloc créé à la question précédente, insérez pour chacune des couleurs choisies pour votre palette, un bloc neutre contenant le texte du code hexadécimal de la couleur.

Aperçu du code de base

HTML : Ajoutez la classe couleur à chaque élément <div> contenant les codes des couleurs.

HTML : Ajoutez une seconde classe à chaque élément <div> contenant les codes des couleurs sous la forme couleur1, couleur2, …

Mise en forme de la palette de couleurs

Important pour la suite de l’exercice !
À ce point d’étape, vous avez donc des éléments HTML, avec le texte des codes couleurs, qui vont pouvoir être modifiés en CSS :
– tous en même temps en utilisant la classe couleur
– individuellement en utilisant la classe correspondante.
À partir de maintenant, sauf mention contraire, vous allez travailler sur le fichier css.

CSS : Définissez la couleur saisie, en tant que texte dans la page html, comme couleur d’arrière-plan de l’élément.

Aperçu des couleurs

CSS : Transformez le conteneur .palette en boite flexible en lui ajoutant la propriété suivante : display: flex;. Si les boites flexibles n’ont pas encore été abordées en cours, elles le seront prochainement.

Positionnement des couleurs en ligne

CSS : Ajoutez une hauteur et une largeur de votre choix, identique pour les 4 ou 5 blocs colorés.

Dimensionnement des couleurs

HTML : Dans la page html, ajoutez un élément span supplémentaire autour de chacun des codes couleurs afin de pouvoir les mettre en forme plus facilement. Ces éléments span vont permettre de modifier le texte des codes couleur indépendamment des blocs avec la couleur en fond.

CSS : Ciblez les span ajoutés à la question précédente afin de les transformer en éléments de type bloc (par défaut span sont des éléments inline). Cette opération va permettre de dimensionner les éléments span en question.

CSS : Ajoutez une couleur d’arrière-plan et une couleur de texte de votre choix aux éléments span pour obtenir un résultat similaire à l’image suivante. Nous ferrons référence à l’affichage des codes en les appelant les étiquettes.

Ajout d'une étiquette

CSS : Dimensionnez les étiquettes et ajoutez leur des marges internes et externes afin d’obtenir le résultat suivant.

Dimensionnement des étiquettes

Personnalisation de la palette

Essayez maintenant de personnaliser votre palette de couleurs en modifiant le CSS de votre page. Vous pouvez également adapter le HTML si vous pensez que cela est nécessaire. Voici quelques exemples de personnalisation :

Exemples de mise en forme

Codes de l’exercice

Vous pouvez télécharger les codes de l’exercice ci-dessous :

Cela peut vous intéresser :

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.