Navigation :

Activité 2 - CSS

Style avec CSS

Les tags indiquent au navigateur les éléments du site Web à utiliser. Mais on doit également lui indiquer comment afficher les éléments et où les placer. Le titre peut être placé au centre ou sur le côté droit. On peut vouloir une image sur la droite et un paragraphe sur la gauche. Il y a deux façons de le faire : par les attributs HTML ou les Cascading Style Sheets (les Feuilles de Style en Cascade).

Cascading Style Sheets (CSS)

Les attributs HTML sont simples, mais ils peuvent rapidement devenir désordonnés. Si on veux ajouter beaucoup de style, chaque élément de HTML peut devenir long et difficile à lire. En outre, que se passe-t-il si on veux donner le même style à plusieurs éléments ? On devrait copier tous les attributs à chaque élément; ceci n’est pas efficace et donne lieu à des erreurs. Pour la plupart des styles, il est préférable d’utiliser les CSS.

Les fichiers CSS travaillent ensemble avec les tags HTML. Chaque tag HTML peut avoir un attribut class et/ou un attribut id qui aide à identifier chaque élément. Plusieurs éléments peuvent avoir la même classe, et un élément peut avoir plusieurs classes. Toutefois, un élément ne peut avoir qu’un seul identifiant et ce identifiant ne peut pas être partagé entre plusieurs éléments. Le fichier CSS utilise ces attributs pour afficher un style spécifique à chaque class ou id.

Vois l’exemple ci-dessous :

See the Pen Styling it up by Deliana Escobari (@Sunny-Dee) on CodePen.

Cliquez sur l'onglet "HTML" à la gauche pour voir le code HTML, et sur l'onglet "CSS" pour voir le code CSS.

Jetons un coup d’œil au code de HTML. Essaie de trouver une tag <div> avec l’attribut "info". Cela ressemble à <div id=“info”>. En donnant un id à cet élement <div>, on peut ensuite utiliser le CSS pour spécifier le style de cet élément spécifique.

Passez au fichier CSS. On peut également donner un style à tous les éléments d’un type spécifique - par exemple, on peut utiliser le CSS pour donner le même style à tous les éléments <p>. Dans le bloc header, on indique au navigateur de colorer tous les headers avec la couleur #0097A7 (qui est la couleur sarcelle).

Parlons de la syntaxe (ou de la façon d’écrire) de CSS. Tout d’abord, tu commences par l’élément que tu veux styliser. Si tu veux styliser tous les éléments ayant la même tag (comme <header>), écrivez simplement le nom. Si tu veux donner un style à un élément avec une class ou un id, mettez . ou # devant le nom de la class ou de l’id respectivement. Ensuite, pour chaque propriété que tu souhaites modifier, utilisez le format nom-d’attribut: valeur;. N’oubliez pas de terminer chaque ligne avec ;. Tous ces styles doivent être entourés des accolades { et }.

Il y a beaucoup trop d’éléments de style pour les couvrir tous dans ce tutoriel. Si tu ne sais pas comment utiliser les CSS pour obtenir le style souhaité, essayez de faire une recherche en ligne.

Bien que CSS comprenne 140 noms de couleurs tels que “green” (vert), “red” (rouge) et “blue” (bleu), cela peut encore être limitatif. Que fait-on si on veut un vert foncé ou un vert légèrement plus clair ? Pour y parvenir, on peut également faire référence aux couleurs sous forme hexadécimale ou RVB. Consulte ce lien pour voir les couleurs et leur forme hexadécimale correspondante.

Ajout d’une nouvelle police

Comme tu le sais peut-être, il existe de nombreuses polices de caractères que tu peux utiliser. Cette partie te montrera comment importer différentes polices sur tu site.

Importons la police Heebo depuis l’Internet. Tout d’abord, on importe la police en haut du fichier CSS avec cette déclaration : @import url('https://fonts.googleapis.com/css?family=Heebo|Open+Sans');
Attachons ce style à la tag body. Comme cette tag contiendra tous les autres éléments de HTML, notre choix de police sera utilisé pour tous les éléments.

alt text

Remarquez que le format à l’intérieur des accolades est : nom: valeur;
- @import url(‘https://fonts.googleapis.com/css?family=Roboto+Mono');
  font-family: 'Roboto Mono', monospace;
- @import url(‘https://fonts.googleapis.com/css?family=Indie+Flower');
  font-family: 'Indie Flower', cursive;
- @import url(‘https://fonts.googleapis.com/css?family=Pacifico');
  font-family: 'Pacifico', cursive;
- @import url(‘https://fonts.googleapis.com/css?family=Permanent+Marker');
  font-family: 'Permanent Marker', cursive;

Activité 2 - Ajouter des attributs et du style

Il est maintenant temps de rendre notre site Web joli ! Pour réaliser cette activité, tu dois suivre les étapes suivantes :

Ouvre l’éditeur Web (cliquez sur le bouton “Essaie toi-même !” ci-dessous).
Ajoute un attribut id à l’une des tags de header. Par exemple, <header id="page-title">
Passe à l’onglet CSS #page-title { styling here... }
Change la couleur du titre en ajoutant color: yellow; à l’intérieur des accolades
Modifie la police en ajoutant font-family: 'Roboto Mono', monospace; à l’intérieur des accolades et en ajoutant <span style="color:purple">@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');</span> en haut du fichier CSS.

Essaie toi-même !