Aller au contenu principal

🎨 CSS - La mise en forme

C'est quoi le CSS ?​

Le CSS est un langage qui permet de styliser les éléments d'un site web. Il est utilisé pour définir la couleur, la police, la taille, etc. des éléments du site.

Ecrire du CSS​

Pour Ă©crire du CSS, il faut d'abord un fichier HTML. Voici celui qu'on utilisera pour apprendre Ă  Ă©crire du CSS :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>DĂ©marrer avec CSS</title>
  </head>

  <body>
    <h1>Je suis un titre de niveau un</h1>

    <p>
      Ceci est un paragraphe. Dans ce texte il y a un
      <span>élément span</span> et aussi un
      <a href="http://example.com">lien</a>.
    </p>

    <p>
      Ceci est un second paragraphe. On y trouve un élément
      <em>mis en valeur</em>.
    </p>

    <ul>
      <li>Item un</li>
      <li>Item deux</li>
      <li>Item <em>trois</em></li>
    </ul>
  </body>
</html>

Nous allons également créer un fichier CSS nommé style.css qui sera pour le moment vide.

info

Le fichier HTML et le fichier CSS doivent ĂŞtre dans le mĂŞme dossier.

Pour lier le fichier HTML à un fichier CSS, il faut utiliser la balise suivante placée dans le <head> du fichier HTML :

<link rel="stylesheet" href="style.css" />

Pour tester le lien, on ajoute cette instruction au fichier CSS:

h1 {
  color: red;
}
Avant de tester

A votre avis, que fait le code CSS ci-dessus ?

Les instructions CSS utiles​

Important

Toutes les instrcutions CSS sont décrites dans la documentation de MDN.

Je vous présente ici quelques instructions CSS utiles que vous pouvez utiliser pour commencer à écrire du CSS.

Les sélecteurs​

Pour selectionner un élément HTML, il faut utiliser un sélecteur CSS. Il existe 3 types de sélecteurs :

  • les sĂ©lecteurs de type "tag" qui sĂ©lectionnent tous les Ă©lĂ©ments HTML du mĂŞme type ;
  • les sĂ©lecteurs de type "id" qui sĂ©lectionnent un Ă©lĂ©ment HTML avec un attribut id ;
  • les sĂ©lecteurs de type "class" qui sĂ©lectionnent un Ă©lĂ©ment HTML avec un attribut class ;

Voici un exemple de sélecteur de type "tag" :

h1 {
  color: red;
}

Ce sélecteur sélectionne tous les éléments HTML de type <h1> et les met en rouge.

Pour les deux autres types de sélecteurs, il faut ajouter un attribut id ou class à l'élément HTML.

L'attribut id permet de sélectionner un élément HTML avec un identifiant unique. Cela signifie qu'il ne peut pas y avoir 2 éléments HTML avec le même attribut id.

Contrairement à l'attribut id, l'attribut class permet de sélectionner un ou plusieurs éléments HTML. Il peut y avoir plusieurs éléments HTML avec le même attribut class, c'est même tout l'intérêt de l'utiliser.

<p id="super-paragraphe">Ceci est un paragraphe.</p>
<p> Ceci est un autre paragraphe.</p>
#super-paragraphe {
  color: red;
}
info

Pour sélectionner un élément HTML avec son id on utilise la syntaxe # + l'identifiant.

Par exemple #super-paragraphe sélectionne l'élément HTML avec l'identifiant "super-paragraphe".

Ce sélecteur sélectionne l'élément HTML <p> avec l'attribut id "super-paragraphe" et le met en rouge.

<p class="paragraphe">Ceci est un paragraphe.</p>
<p class="paragraphe"> Ceci est un autre paragraphe.</p>
<p> Ceci est encore un autre paragraphe.</p>
.paragraphe {
  color: red;
}
info

Pour sélectionner un élément HTML avec son class on utilise la syntaxe . + le nom de la classe.

Par exemple .paragraphe sélectionne l'élément HTML avec la classe "paragraphe".

Exercice

Pour t'entrainer à utiliser les sélecteurs, tu peux jouer à CSS Diner.

Pour les plus avancés, tu peux aussi jouer à CSS Speedrun.

Polices d'écriture​

Taille de police​

font-size: 20px;
info

Il existe plusieurs unités de mesure pour la taille de police, on peut utiliser :

  • px pour la taille en pixels ;
  • rem pour la taille par rapport Ă  la taille de la police par dĂ©faut ;

Police​

font-family: Comic Sans MS;

Couleur de police​

color: red;
info

Pour les couleurs, on peut utiliser les noms de couleurs prédéfinis ou les codes hexadécimaux.

Par exemple :

  • red pour la couleur rouge ;
  • #ff0000 pour la couleur rouge avec un code hexadĂ©cimaux.

Tailles​

height: 100px;
width: 100px;
info

De la même manière que pour la taille de police, il existe plusieurs unités de mesure pour les tailles, on peut utiliser :

  • px pour la taille en pixels ;
  • rem pour la taille par rapport Ă  la taille de la police par dĂ©faut ;
  • % pour la taille par rapport Ă  la taille du conteneur ;

Fond​

Couleur de fond​

background-color: red;
info

Pour les couleurs, on peut utiliser les noms de couleurs prédéfinis ou les codes hexadécimaux.

Par exemple :

  • red pour la couleur rouge ;
  • #ff0000 pour la couleur rouge avec un code hexadĂ©cimaux.

Bordures​

border: 1px solid red;

Espacement​

Pour gérer l'espacement, on peut utiliser 2 propriétés :

  • padding pour gĂ©rer l'espacement interne Ă  un Ă©lĂ©ment ;
  • margin pour gĂ©rer l'espacement externe Ă  un Ă©lĂ©ment.

padding: 10px;
margin: 20px;

Pour spécifier l'espacement uniquement sur un coté, on peut utiliser les propriétés :

  • padding-top pour le haut ;
  • padding-bottom pour le bas ;
  • padding-left pour la gauche ;
  • padding-right pour la droite ;

Pareil pour margin.

Flexbox​

La flexbox est une méthode de mise en page qui permet de faire des mises en page complexes. Elle permet de définir des éléments comme étant en colonne ou en ligne, de les aligner verticalement ou horizontalement, et de les distribuer de manière égale.

exercice

Pour apprendre à utiliser la flexbox, entrainez-vous grâce au jeu sur Flexbox Froggy.

Activités​

Création d'un CV web​

Un CV est un document qui contient des informations sur une personne. Il est utilisé dans le cadre de l'obtention d'un emploi.

Votre mission est maintenant de créer la structure HTML d'un CV web puis de la mettre en forme avec du CSS.

Pour créer un CV web, on va utiliser les balises suivantes :

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> pour les titres de niveaux ;
  • <p> pour les paragraphes ;
  • <ul> pour les listes Ă  puces ;
  • <li> pour les Ă©lĂ©ments de listes Ă  puces ;
  • <a> pour les liens hypertextes ;
  • <img> pour les images ;
  • <div> pour les Ă©lĂ©ments de division ;
  • <span> pour les Ă©lĂ©ments de division ;

Voici un exemple de CV :

CV web

Exemple

Création d'une carte TCG (Pokémon, One Piece, etc...)​

Les TCG (Trading Card Game ou Jeu de Cartes Ă  Jouer et Ă  Collectionner) sont des jeux de cartes qui permettent de jouer des jeux de cartes avec des amis ou des joueurs distants.

Il existe de nombreux jeux de cartes, mais voici quelques exemples :

  • PokĂ©mon
  • One Piece
  • Yu-Gi-Oh
  • Magic: The Gathering

Notre mission aujourd'hui va être de créer une version Web d'une carte TCG.

Carte One PieceCarte One Piece

Pour vous aider, voici une guide pour la disposition simplifiée des flexbox d'une carte Pokémon :

  • Chaque rectangle correspond Ă  un bloc qui pourra ĂŞtre:
    • <div class=""></div>
    • <span class=""></span>
    • ou un Ă©lĂ©ment HTML avec un attribut class ou un id
Layout 1Layout 2
  • Voici un code HTML de base pour une carte :
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Carte TCG Pokémon - Prototype</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card-wrapper" role="img" aria-label="Carte Pokémon prototype"></div>
  </body>
</html>
  • Voici un code css Ă  complĂ©ter pour une carte :
body{
    min-height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    padding: 40px;
    box-sizing: border-box;
}

.card-wrapper{
    width: 350px;
    height: 490px;
    border-radius: 14px;
    background: linear-gradient(180deg,#f5b431 0%, #ffe488 60%);
    box-shadow: 0 14px 30px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
    border: 12px solid #b7b7b7; /* thin inner border */
    display: flex;
    flex-direction: column;
}
Regarde par ici, c'est important...

Voici un Exemple de carte Pokémon.