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.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

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

Afficher la solution

Solution :

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">

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.

Un bloc neutre ?

Un bloc neutre ?

Le seul élément HTML de type bloc qui est complétement neutre et l’élément <div>. Cela signifie que l’élément n’a aucune valeur sémantique, ce ne sera pas le cas par exemple pour <p>, <h1>, <aside>.

Afficher la solution HTML

Solution HTML :

<div class="palette"></div>

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
Afficher la solution HTML

Solution HTML :

<div class="palette">
    <div>#545454</div>
    <div>#69747c</div>
    <div>#6baa75</div>
    <div>#84dd63</div>
    <div>#cbff4d</div>
</div>

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
Afficher les propriétés CSS

Propriétés CSS :

background-color

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
Afficher les propriétés CSS

Propriétés CSS :

height, width

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.

Afficher la solution HTML

Solution HTML :

<div id="palette">
    <div class="couleur couleur1">
        <span>#545454</span>
    </div>
    <div class="couleur couleur2">
        <span>#69747c</span>
    </div>
    <div class="couleur couleur3">
        <span>#6baa75</span>
    </div>
    <div class="couleur couleur4">
        <span>#84dd63</span>
    </div>
    <div class="couleur couleur5">
        <span>#cbff4d</span>
    </div>
</div>

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.

Afficher un indice

Indice :

Vous devez sélectionner spécifiquement les éléments span qui se trouvent à l’intérieur des éléments qui utilisent la classe couleurs.

Afficher les propriétés CSS

Propriétés CSS :

display

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
Afficher les propriétés CSS

Propriétés CSS :

color

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

Dimensionnement des étiquettes
Afficher les propriétés CSS

Propriétés CSS :

margin, padding, text-align

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 :

Sauf mention contraire*, l'article Créer une palette de couleur [CSS14] 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 e-mail 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.