Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Kids
Webdesign

Le Web Design pour les Enfants : CSS

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Content
Web Design for Kids: CSS Layout

French (Français) translation by Syméon Smith (you can also view the original English article)

Bienvenue dans la cinquième leçon de notre série Le Web Design pour les Enfants, à propos du CSS.

On a bien travaillé sur notre HTML, et maintenant il est temps de le rendre plus joli ! On va ajouter des choses à notre page HTML, ainsi qu'un nouveau fichier : un document CSS.

Va voir le site terminé que l'on est en train de créer. Les fichiers pour cette leçon peuvent être téléchargés ici, et n'oublie pas de poser tes questions dans les commentaires en bas de la page.

C'est Quoi le CSS Exactement ?

Avant que nous commencions à coder, assurons-nous de savoir ce qu'est le CSS. CSS veut dire Feuille de Style en Cascades (Cascading Style Sheets en anglais) et c'est un langage qui nous aide à changer le look de notre page HTML.

no css vs css

Dans l'image ci-dessus, le navigateur sur la gauche montre un site sans CSS, sans style, alors que le site de droite en a. Le style a été écrit dans un fichier CSS–beaucoup mieux !

Le CSS est écrite dans un fichier à part, en utilisant notre éditeur de texte. Notre document HTML a été sauvegardé avec une extension en .html, mais notre document CSS doit être sauvegardé avec l'extension .css.

Créer un Fichier CSS

On va créer un tout nouveau document dans notre éditeur de texte et le nommer "tutstown.css" dans "tutsfolder", avec "index.html" et le dossier "images".

HTML & CSS

Pour que les styles de notre document CSS soient pris en compte par notre document HTML, on doit les relier. On fait cela avec un élément <link> dans l'élément head, tout en haut de notre document HTML.

On va l'ajouter directement sous le title :

Il y a quelques attributs importants à savoir pour cet élément auto-fermant, le premier étant type L'attribut type indique au navigateur quel est le type de contenu que nous lions. Dans notre cas, c'est un fichier text/css.

Le deuxième attribut que nous voyons est rel, qui indique au navigateur quelle est la relation entre l'HTML et le document lié (notre CSS). Le document CSS est une feuille de style (stylesheet) pour notre HTML, c'est donc ce que l'on va écrire ici.

Enfin, nous avons href, qui doit te rappeler l'élément <a>. Il pointe à un autre endroit. Dans notre cas il indique au navigateur où trouver le fichier CSS que nous voulons lier.

Si tout est lié correctement, la page devrait être différente après un rafraîchissement du navigateur :

Les Classes

Dans notre CSS, on peut lister les éléments HTML que l'on a utilisé et indiquer comment on veut qu'ils soient. Il y a de nombreuses manières de pointer les éléments que l'on veut, et les classes HTML en font parties.

Les classes HTML sont des attributs que l'on peut ajouter aux éléments. Lorsqu'un élément a une classe, on peut l'utiliser dans notre CSS.

Le nom choisi pour la classe doit être un ou des mots qui décrivent ce que contient cet élément.

Ajouter une classe à notre <header> se fait comme ceci :

Les classes ne sont pas uniques, donc plusieurs éléments peuvent avoir la même classe. Cela rend l'ajout des mêmes styles à beaucoup d'éléments bien plus simples, nous verrons cela quand nous arriverons aux images de notre magasin !

Comment on Écrit du CSS

La façon d'écrire du code est appelée syntaxe. Comme le HTML, le CSS a besoin d'être correctement écrit pour pouvoir fonctionner.

Commençons avec notre fichier CSS, et, pour s'entraîner, essayons de changer la couleur en fond de notre header (background-color) pour du bleu (blue).

Il y a beaucoup de choses à bien faire !

Pour que notre CSS comprennent que nous visons une classe, on doit faire quelques choses :

  • Il faut mettre un point . avant le nom de la classe.
  • Les instructions de style sont contenues dans des accolades { }.
  • Ce que nous changeons (background-color) est immédiatement suivi par deux-points :
  • Et nous ajoutons la valeur (blue dans ce cas).
  • Chaque style doit se terminer par un point-virgule ;

Ça peut être très facile d'en oublier un !

Sauvegarde le CSS et relance la page dans le navigateur; si la page n'est pas encore ouverte vous pouvez le faire en double-cliquant sur "index.html" dans "tutsfolder". Super simple !

Important ! Maintenant on doit supprimer ce style, ou notre site aura un header bleu !

Plus de Commentaires

Le CSS nous autorise lui aussi à inclure des commentaires dans notre fichier sans que le navigateur ne les remarque, mais ils sont différents des commentaires HTML.

Un commentaire en CSS est contenu dans ces symboles /* */

Le document CSS dans les fichiers de l'exercice contiennent quelques commentaires utiles pour comprendre d'autres choses.

Le Body

La première partie de vrai style que l'on peut ajouter à notre site est son background-color pour le changer en ce joli jaune clair. Il y a certaines valeurs pour les couleurs qui peuvent être comprises par le navigateur, par exemple blue comme on l'a vu. Pour d'autres couleurs moins communes, on doit insérer la valeur hexadécimale de la couleur, ou hex, à la place.

Toutes les couleurs ont une valeur hex qui leur correspond. Les navigateurs comprennent mal les couleurs lorsqu'elles sont écrites en lettres, mais ils comprennent très bien les valeurs hex. La valeur hex de notre jaune clair est #FAF8DA, et nous voulons l'appliquer au <body>, pour qu'il remplisse la page entière.

Important ! Il n'y a pas besoin d'écrire un point devant le body, car ce n'est pas le nom d'une classe. À la place, on pointe directement l'élément body.

Si tu es curieux à propos des valeurs hex pour d'autres couleurs, ce site peut être très pratique.

L'écriture

On peut aussi changer la police (le style des lettres) sur notre site en utilisant body dans notre CSS.

Tout ce que nous devons savoir pour l'instant, c'est que nous devons faire un link pour récupérer une police depuis Google dans notre document HTML. Une fois que la police est liée, le navigateur la comprend et nous pouvons l'utiliser.

Voici le lien que nous devons placer dans le <head> de notre document HTML (à l'endroit même où nous avons placé notre document CSS).

Ensuite on sauvegarde, et on retourne dans notre document CSS :

Cela va transformer la police de toute la page en Open Sans.

Le Header

Dans le header, on va changer la couleur du texte et sa taille, ainsi que la taille de l'image de la ville.

D'abord, il nous faut ajouter dans les bonnes classes HTML dans le header, pour que nous puissions les utiliser dans notre CSS.

Dans le h1 ouvrant, on ajoute une classe main-heading et dans l'<img> on ajoute une classe town-preview :

Dans notre document CSS, on peut maintenant pointer vers ces éléments grâce aux noms que l'on vient de créer et commencer à ajouter du style.

On définit ici une taille de police plutôt grande, de 70px. Le px, ou pixel, est un point sur l'écran. Ce point est fait d'une couleur et est utilisé comme une unité de mesure. L'image de notre ville est plutôt grande, donc on va lui donner une largeur de 650px.

La propriété color sert à définir la couleur du texte et ici il s'agit de bleu foncé (#205D76).

Main

Rappelle toi, dans le main nous avons différentes petites sections qui contiennent une image et du texte. Nous devons ajouter une taille à ces images et ajouter du style aux titres et aux listes en CSS.

Images

La première chose que nous devons faire, c'est de définir la taille des images d'immeubles. Pour définir la taille de toutes les images en même temps, on peut utiliser le même nom de classe pour différents éléments.

On va ajouter la même classe, building, aux trois images d'immeubles dans notre HTML, et ensuite les redimensionner toutes en même temps, comme ça :

Les Titres

Nos trois petits titres peuvent aussi avoir le même nom de classe et on va l'utiliser pour changer color et font-size.

Listes et Liens

Après les titres, dans chaque section on a des listes de magasins–tu t'en rappelle ? En plus de changer la couleur et la taille des liens, on va aussi changer la couleur des points des listes.

On ajoute un classe de store-list aux <ul> et store-link aux listes dans notre document HTML et ensuite sauvegarder les changements.

Tu a peut-être remarqué, en regardant notre site dans le navigateur, qu'il n'y a pas beaucoup d'espaces entre les éléments des listes, ce qui rend le tout un peu chargé. Nous parlerons de l'espacement et comment en ajouter ici plus tard dans la série, dans le tutoriel sur le positionnement.

Le Pied de Page

En ajoutant des classes primary-footer au footer et created-by à l'élément <p> dans ce footer on peut les utiliser pour déclarer le background-color ainsi que la couleur du texte et sa taille :

Conclusion

Dans cette leçon, on a appris comment lier un HTML et un document CSS et comment ajouter des jolis styles à nos éléments grâce aux classes. Pour le moment, ce que l'on voit dans notre navigateur ne correspond pas vraiment à ce à quoi devrait ressembler notre site terminé, mais regarde la différence qu'un peu de couleur et de changements de tailles peut faire ! Ça va seulement s'améliorer.

La prochaine fois, nous bougerons notre contenu dans l'écran en utilisant des super techniques de positionnement en CSS.

À la prochaine !

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.