Guide CSS

version 1 khalid nafil 13 d´cembre 2009 e

1

Objectifs
– S’initier au langage CSS, version 2

2

Introduction

CSS est un langage de feuilles de style qui permet aux auteurs de lier du style (couleurs et polices de caract`res, taille,...) aux documents HTML. e En s´parant la pr´sentation du style du contenu des documents, l’´dition du e e e site est simplifi´e. Un style peut ˆtre d´fini a l’int´rieur ou ` l’ext´rieur du e e e ` e a e document. Si le style est d´fini ` l’ext´rieur du document, il peut ˆtre utilis´ e a e e e par d’autres documents.

3

Exemple d’utilisation de CSS

La d´finition d’un style CSS est plac´e au niveau de la balise HEAD du e e document HTML, par le biais de la balise style comme suite : h1{color :red ;} Dans l’exemple ci dessus, la r`gle CSS est compos´e par deux parties : un e e s´lecteur (’h1’) et une d´claration (’color :blue’), compos´e ` son tour par e e e a deux parties : une propri´t´ (’color’) et une valeur (’blue’). Cela va peree mettre d’appliquer le style, d´fini ici par l’attribution de la couleur rouge, ` e a 1

tous les entˆtes de type h1 contenus dans le document web. e Pour la suite, on recommande l’utilisation des feuilles de style externes en vue de pouvoir les partager par un ensemble important de pages web. Pour cela, il suffit de mentionner le lien a la feuille par la balise link et cr´er la ` e feuille sur un fichier diff´rent : e Fichier ”monstyle.css” : h1{line-height :18pt ;} p{color :blue ;} Fichier ”monstyle.html” : Feuilles de style externes ...

4

D´finition des classes de style e

Pour appliquer une classe de style a un ´l´ment HTML, nous utilisons ` ee l’attribut class de l’´l´ment en question : ee greenbold{color :#44CC22 ; font-weight : bold ;} Utilisation : Cette entˆte est trop verte e Ce paragraphe est aussi trop vert Dans l’exemple qui suit, nous cr´eons une classe de style darkyellow qui e peut ˆtre utilis´e par tout ´l´ment HTML. Nous cr´eons aussi une classe e