Bienvenue sur le site web de Lihan Li Ndjom Hans

Objectifs 

• Définir le sigle CSS et le terme : feuille de style
• Connaître l'importance et les caractéristiques d'une feuille de style  
• Connaitre la syntaxe d'un style
• Savoir comment appliquer une feuille de style à une page web

INTRODUCTION

Au début de l'histoire du Web, lorsque vous souhaitiez mettre en gras une portion de texte, vous deviez utiliser la balise <b>.  Si vous souhaitiez définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le retrait (padding) de chacune de ses colonnes, vous auriez défini votre tableau par le code suivant : < table border ="1" bgcolor = "silver" cellpadding = "3" cellspacing="0" >

Cette approche présentait cependant de nombreux inconvénients :

•  Vos styles étant définis à l'intérieur même de votre contenu, ils étaient fastidieux à définir ;
• Vous deviez répéter la même définition de style à chaque fois que vous souhaitiez l'utiliser dans votre page où dans les diverses pages de votre site ;
• A chaque fois que vous souhaitiez modifier ce style, vous deviez parcourir  à nouveau le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contenaient ;
•  Ces répétitions augmentaient la taille de vos pages ;
•  Vos styles étaient figés, les contenus se présentaient de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux, etc..

Les feuilles de style représentent une nouvelle façon très efficace d'appliquer des styles aux éléments d'une page HTML. Elles vous permettent de définir n'importe quelle propriété de style comme la bordure, le type de caractère, la couleur de fond, l'espace entre les lettres, etc. (nous reviendrons plus tard sur la manière d'y parvenir).

I-       QU'EST-CE QU'UNE FEUILLE DE STYLE ?

CSS : Cascading Style Sheets qui signifie en français « feuille de style en cascade ».

Une feuille de style est un fichier dans lequel on écrit l'apparence que notre page web doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur des images du fond, etc…..

Le CSS sert à réaliser les présentations de notre page web. Désormais, votre code HTML ne vous servira qu'à définir la structure de vos contenus tandis que les CSS vous permettront de créer vos styles et votre mise en page.

Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent. Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier !

II-                             IMPORTANCES DES FEUILLES DE STYLE

Les feuilles de style permettent notamment :

• d'obtenir une présentation  homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style ;
• de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ;
• une plus grande lisibilité du HTML, car les styles sont définis à part ;
• des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
• un positionnement plus rigoureux des éléments.
• D'appliquer le Principe en IHM c'est-à-dire  séparation du contenu de la présentation :

-          Séparation du contenu et de la mise en forme.

-          Modifier l'aspect d'un page ou d'un site sans en modifier le contenu.

-          Modifier facilement l'aspect d'une page.

• La Cohésion de la présentation tout au long du site (feuilles de style externes).
• De Réduire le temps de chargement des pages.
• La Correction de certains écueils d'HTML :

-          compréhensible, simple et logique par rapport au HTML.

-          contrôle des polices, de la distance entre les lignes, des marges et des indentations (sans devoir utiliser de tableaux...)

-          moins de code, mieux structuré, et donc des sites plus faciles à maintenir et à faire.

III-                            COMMENT DÉCLARE-T-ON UN STYLE ?

 La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments :-

- Un sélecteur de balises, permettant de préciser à quelles balises du document HTML le style s'applique ;

- Une déclaration de style, définie entre accolades « { } », permettant de préciser le style à appliquer aux balises sélectionnées. La déclaration est elle-même constituée :

·       d'une ou plusieurs propriété(s), suivie du caractère « : » (double point),

·       d'une ou plusieurs valeur(s) associée(s) à chaque propriété, entourée de guillemets s'il s'agit de plusieurs mots ou séparés par des virgules s'il y en a plusieurs, suivie d'un point virgule. 

Syntaxe

BALISE

  {

       Propriété : valeur;

       Propriété : valeur;

        ...

  }

• Sélecteur: décrit les balises affectées. On distingue 3 types de sélecteur:

- Un sélecteur simple porte sur une balise.

- Un sélecteur multiple porte sur plusieurs sélecteurs simples, séparés par une virgule.

- Un sélecteur universel : *,qui sélectionne tout

• Propriété: caractéristique de l'apparence
• Valeur: apparence choisie

Exemple 1 : Sélecteur simple

Body {background-color: pink;} : indique la couleur du fond d'écran.

Exemple 2 : Sélecteur multiple

h1,h2,h3,h4,h5,h6 { color: red;} : met l'ensemble des titres en rouge.

Exemple 3 : Sélecteur Universel

*{ color : blue;} : indique que tous les éléments seront de police bleue.

Exemple 4 : Syntaxe d'un style à appliquer aux liens hypertextes (balise <A>), avec les propriétés suivantes: police  « Verdana » ,de taille 18 pixels, en gras et de couleur jaune :

A  {

        font-family   : Verdana;

        font-size      : 18px;

        font-style     : bold;

        Color           : yellow

    }

Remarque : La syntaxe des feuilles de style

- Préciser le nom de la balise en premier ;
- Encadrer les définitions par des accolades { } ;
- Placer un point virgule ; derrière chaque définition.
- Les commentaires sont  entre  /*       */
- <!-- et --> (commentaire  en HTML)  permet de cacher le CSS pour un navigateur qui ne les comprend pas