Présentation CSS

Présentation CSS

  1. Objectif

    • Connaitre le CSS
  2. Introduction

    • Cascading Style Sheets ou CSS est un langage de feuille de style utilisé pour décrire la présentation d’un document écrit en HTML ou en XML
    • CSS vous permet de définir l’apparence des textes (comme la police, la couleur, la taille, etc…), ainsi que l’agencement de la page (comme les marges, l’arrière-plan, etc…). CSS définit donc la présentation du document.
    • CSS décrit la façon dont les éléments doivent être affichés à l’écran, sur du papier, ou sur d’autres supports.
    • CSS est initialement conçues pour être utilisées avec des documents HTML.
    • fournir un mécanisme pour associer différents styles à un même document
    • Une feuille de style contient la définition de différentes règles CSS. C’est en appliquant ces règles qu’on peut mettre en forme les éléments, ou plus concrètement leur donner du style.
    • Un style définit la façon dont un élément HTML (par exemple <h1>) sera affiché.



  3. Principes

    • Une Feuille de style est un ensemble de règles Chaque règle spécifie les valeurs que prendre les propriétés associées aux éléments du document.
    • Une règle CSS est divisée en 2 parties :
      • Le sélecteur: Détermine ou identifie les parties du document auxquelles sera appliqué le style.
      • Le bloc de déclaration: Dans un bloc de déclaration, on liste tous les styles que l’on veut utiliser pour l’élément sélectionné



  4. La syntaxe

    • La syntaxe de base de CSS est composée de 3 parties :
      • – un sélecteur
        – une propriété
        – une valeur
    • Ces trois parties sont écrites de la façon suivante :
    • sélecteur {propriété:valeur}
    • Un sélecteur correspond à une balise HTML (<p>, <h1>, etc…) et la propriété est un attribut dont on veut changer la valeur.
    • Exemple :

    • h1 {font-size:100px}
    • Dans cet exemple, tous les titres principaux (<h1>) du document auront une taille de 100 pixels.
    • Si la valeur d’un attribut contient un espace, alors la valeur de l’attribut s’écrit en guillemets :
      h2 {font-family:”sans serif”}

    • Il est possible de définir plusieurs attributs pour un même sélecteur. Dans ce cas, chaque propriété sera séparée par un point-virgule :
    • p {font-family:"sans serif"; font-size: 90%; color: blue}
    • ou
      p
      {
      font-family:"sans serif";
      font-size: 90%;
      color: blue;
      }



Abonnez vous à notre chaîne YouTube gratuitement