Intégrer du CSS dans une page html

Intégrer du CSS dans une page html

  1. Objectifs

    • Connaitre trois méthodes différentes pour ajouter des éléments de style à votre page web.



  2. Introduction

    • Les feuilles de style ou CSS (Cascading Style Sheets) sont indispensables pour les documents HTML.
    • Il existe trois méthodes pour utiliser et intégrer les feuilles de style dans un document HTML
      • intra-lignes,
      • globales,
      • importées.
    • Chacune de ces manières a ses avantages et ses particularités.
  3. CSS Intra-lignes

    • Une feuille intra-ligne s’insère directement à côté de la balise qu’elle définit, elle ne constitue donc pas véritablement une feuille, simplement elle permet très localement de fixer des attributs à une partie d’un document.
    • Cette méthode peut être utilisée de deux façons différentes.
      1. Soit
      2. <BODY> 
        <H1 style="font-family: Arial; font-style: italic">Je suis un text Arial italique</H1>
        </BODY>
      3. Ou
      4. <BODY>
          <STYLE type="text/css">
               <H1 { "font-family: Arial; font-style: italic" }>Je suis un text Arial italique 
          </STYLE>
        </BODY> 
    • C’est la méthode la plus simple, mais peut-être la moins bonne, car elle ne peut s’appliquer qu’à un seul contenu entre deux balises et n’autorise pas l’utilisation des attributs de balises de types classes « class » ou identifiants « id ».
  4. CSS importée (méthode conseillée)

    • <link> est une balise HTML qui n’est pas uniquement prévue pour lier des feuilles de styles, mais qui peut aussi faire référence à d’autres pages HTML sur le site, liées par une hiérarchie.
    • Cette méthode consiste à créer une feuille liée à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web.
    • Le fichier contenant les instructions CSS (fichier .css, ou feuille de style CSS) doit être lié à toutes les pages HTML auxquelles on veut en changer l’affichage.
    • Syntaxe

      <link rel="stylesheet" type="text/css" href="style.css">
  5. CSS Globale

    • A l’intérieur des balises <HEAD></HEAD> : CSS Globale
    • Les feuilles de style d’une page web sont déclarées grâce à la balise STYLE, au sein des balise <HEAD> et </HEAD>.
    • Cette seconde méthode est plus évoluée. Les règles CSS sont regroupées dans l’entête de la page HTML.
    • <!DOCTYPE html>
      <html>
        <head>
          <title>Titre de l'onglet de ma page</title>
          <style type="text/css">
            h1 { color: red; }  
            h2 { color: blue; }  
          </style>               
        </head>
        <body>
          <h1>Titre de ma page</h1>
          <h2>Titre de paragraphe</h2 >
        </body>
      </html>



Abonnez vous à notre chaîne YouTube gratuitement