Aller au contenu principal

📚 IntĂ©grer du style CSS Ă  vos pages

Nous avons vu précédemment comment construire des pages Web à l'aide du langage de balisage HTML.

Cependant, le tout manque un peu de style! 😉

Dans les prochaines semaines, nous verrons comment agrémenter le visuel de vos pages Web à l'aide du langage de style CSS.

En effet, CSS (Cascading Style Sheets) est le langage utilisé pour styliser et mettre en forme les pages web. Si HTML structure le contenu, CSS s'occupe de l'apparence visuelle (couleurs, polices, espacements, mise en page, etc.).

Exemple de CSS​

Sans CSS, vos pages web sont un peu tristounettes ou du moins, manque d'originalitĂ©! â˜č

<!DOCTYPE html>
<html>
<head>
  <title>Mon site sans CSS</title>
</head>
<body>
  <h1>Bienvenue sur mon site</h1>
  <p>Ceci est un paragraphe d'introduction.</p>
  <ul>
      <li>Premier élément</li>
      <li>DeuxiÚme élément</li>
      <li>TroisiÚme élément</li>
  </ul>
  <button>Bouton</button>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Avec le CSS, on peut agrémenter le contenu via des rÚgles qui appliquent un style aux différents éléments HTML de la page. Par exemple:

<!DOCTYPE html>
<html>
<head>
  <title>Mon site sans CSS</title>
  <style>
    h1 {
      color: blue;
      font-family: Arial, sans-serif;
      text-align: center;
    }

    p {
      color: red
    }

    button {
      background-color: lightgrey;
      padding: 8px 12px;
    }
  </style>
</head>
<body>
  <h1>Bienvenue sur mon site</h1>
  <p>Ceci est un paragraphe d'introduction.</p>
  <ul>
      <li>Premier élément</li>
      <li>DeuxiÚme élément</li>
      <li>TroisiÚme élément</li>
  </ul>
  <button>Bouton</button>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Le titre sera maintenant centré, bleu et avec la police Arial. Le paragraphe sera pour sa part rouge et le bouton gris avec un peu plus d'espacement autour du texte.

Certains pourraient argumenter que ce n'est pas plus beau, mais vous comprenez le principe! ;)

Observez la balise <style> qui contient le code CSS. Vous remarquerez qu'il y un lien avec les éléments HTML (ex.: h1) et le code CSS.

Trois façons d'intĂ©grer le style Ă  vos pages​

1. Le CSS en ligne (inline)​

Directement dans l'Ă©lĂ©ment HTML avec l'attribut style. À Ă©viter en gĂ©nĂ©ral car difficile Ă  maintenir.

<p style="color: blue; font-size: 18px;">Texte en bleu</p>
    <p style="color: blue; font-size: 18px;">Texte en bleu</p>
Open on CodeSandboxOpen Sandbox
attention

Évitez le style en ligne, il est difficile Ă  maintenir et n'est pas rĂ©utilisable.

2. CSS interne (dans l'en-tĂȘte)​

Dans la balise <head> de votre page HTML, entre des balises <style>.

<!DOCTYPE html>
<html lang="fr">
<head>
  <style>
      body {
        background-color: #f0f0f0;
      }
      h1 {
        color: navy;
      }
  </style>
</head>
<body>
  <h1>Mon titre</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
attention

Saufs cas d'exception, on Ă©vite aussi cette formule puisqu'encore une fois, le CSS ne peut pas ĂȘtre rĂ©utilisĂ© dans une autre page.

3. CSS externe (recommandĂ©)​

Dans un fichier séparé .css lié à votre HTML. C'est la meilleure pratique.

info

Remarquez le lien entre index.html et le fichier styles.css (accessible via les onglets dans le haut de l'exemple).

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Mon titre</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
info

La balise <link> permet de faire un lien vers une ressource externe et de l'inclure dans la page comme si elle en faisait partie intégrale.

L'attribut rel indique quelle est la relation entre le document HTML et la ressource liée.

L'attribut href spĂ©cifie oĂč trouver le fichier CSS. Il est possible de prĂ©ciser des chemins autant relatifs que absolus.

Les sĂ©lecteurs CSS: Comment cibler les Ă©lĂ©ments​

Vous avez probablement remarqué la syntaxe CSS du genre:

h1 {
  color: navy
}

Cette syntaxe semble cibler les éléments h1 et leur donner un style en particulier et c'est exactement ce qui se produit.

SĂ©lecteurs de base​

1. SĂ©lecteur de type (Ă©lĂ©ment)​

Ce type de sĂ©lecteur cible tous les Ă©lĂ©ments HTML du mĂȘme type. Par exemple, voici deux rĂšgles qui s'appliqueront Ă  tous les paragraphes (p) et tous les titres de niveau 1 (h1) dans la page.

p { color: black; }        /* Tous les paragraphes */
h1 { font-size: 32px; }    /* Tous les h1 */

2. SĂ©lecteur d'ID​

Nous avons utilisĂ© les id dans le cadre des liens internes avec ancres (#). Ces derniers peuvent aussi ĂȘtre utilisĂ©s pour cibler des Ă©lĂ©ments HTML!

#header { background: gray; }  /* ÉlĂ©ment avec id="header" */
<div id="header">En-tĂȘte</div>

3. SĂ©lecteur de classe​

Ce type de sélecteur fait usage d'un attribut que nous n'avons pas utilisé jusqu'à maintenant, soit l'attribut class.

.important { color: red; }  /* ÉlĂ©ments avec class="important" */
<p class="important">Texte important</p>

L'attribut class​

L'attribut class est un attribut HTML qui permet d'assigner un ou plusieurs "noms de classe" à un élément. Ces noms servent ensuite de points d'ancrage pour appliquer des styles CSS ou manipuler les éléments avec JavaScript.

<p class="introduction">Voici un paragraphe d'introduction.</p>

Pourquoi utiliser des classes?​

1. RĂ©utilisabilité​

Une mĂȘme class peut ĂȘtre utilisĂ©e sur plusieurs Ă©lĂ©ments, permettant de partager les mĂȘmes styles.

<p class="important">Premier paragraphe important</p>
<div class="important">Une section importante</div>
<span class="important">Un texte important</span>
/* Les trois éléments seront en rouge et en gras */
.important {
    color: red;
    font-weight: bold;
}

2. SĂ©mantique​

Les classes donnent du sens à vos éléments, rendant le code plus lisible.

<!-- Plus clair que des éléments sans classes -->
<article class="article-principal">
    <h2 class="titre-article">Mon titre</h2>
    <p class="resume">Résumé de l'article...</p>
    <p class="contenu">Contenu principal...</p>
</article>

3. Flexibilité​

Contrairement aux IDs (qui doivent ĂȘtre uniques), plusieurs Ă©lĂ©ments peuvent partager la mĂȘme classe.

Syntaxe et convention de nommage​

La syntaxe de base pour assigner une classe à un élément est la suivante:

<element class="nom-de-classe">Contenu</element>

À noter que vos classes doivent ĂȘtre:

  • Descriptifs et clairs
  • Pas d'espaces (utilisez - ou _)
  • Commencent par une lettre
  • Toujours en minuscule
  • Évitez les accents et caractĂšres spĂ©ciaux
<!-- Bon : descriptif et clair -->
<div class="carte-produit">...</div>
<p class="message-erreur">...</p>
<button class="bouton-principal">...</button>

<!-- À Ă©viter : non descriptif -->
<div class="div1">...</div>
<p class="rouge">...</p>  <!-- Évitez les noms basĂ©s sur l'apparence -->
<span class="x">...</span>

Classes multiples​

Un élément peut avoir plusieurs classes, séparées par des espaces.

<div class="carte importante grande">
    Contenu de la carte
</div>
/* L'élément aura les trois styles appliqués */
.carte {
    border: 1px solid gray;
    padding: 10px;
}

.importante {
    background-color: yellow;
}

.grande {
    font-size: 20px;
}

Combiner les sĂ©lecteurs​

Il est possible de combiner des sélecteurs (ex.: type et classe) pour cibler des éléments spécifiques.

ÉlĂ©ment + classe​

Par exemple pour sélectionner et appliquer un style aux paragraphes ayant la classe introduction:

p.introduction {
    /* SĂ©lectionne seulement les <p> avec class="introduction" */
    font-style: italic;
}

Combinaison de classes multiples​

.importante.urgente {
    /* SĂ©lectionne les Ă©lĂ©ments ayant À LA FOIS les classes "importante" ET "urgente" */
    background-color: red;
    color: white;
}
<p class="importante urgente">Sera en rouge avec texte blanc</p>
<p class="importante">Ne sera PAS affecté (manque "urgente")</p>

Classe vs Id pour cibler les Ă©lĂ©ments​

Aspectclassid
RĂ©utilisationPeut ĂȘtre utilisĂ© sur plusieurs Ă©lĂ©mentsDoit ĂȘtre unique dans la page
Syntaxe CSSPoint (.ma-classe)DiĂšse (#mon-id)
Priorité CSSMoins prioritairePlus prioritaire
Usage typiqueStyles rĂ©utilisablesÉlĂ©ment unique, ancres, JavaScript
<!-- Exemple montrant la différence -->
<header id="entete-principal" class="section-sombre">
    <!-- id unique pour cet en-tĂȘte spĂ©cifique -->
    <!-- class pour un style réutilisable -->
</header>

<footer class="section-sombre">
    <!-- RĂ©utilise la mĂȘme classe -->
</footer>