Vous êtes sur la page 1sur 28

ISTA TAZA

Chp3 : Feuilles de Style CSS

Module : Applications hypermdias

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

1. Prsentation
CSS (Cascading Style Sheets, aussi appeles Feuilles de style) est un langage de style qui dfinit la
prsentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les
lignes, la hauteur, la largeur, les images d'arrire-plan, les positionnements volues et bien d'autres
choses
Les feuilles de style, pourquoi faire ?
En HTML, pour mettre en forme un titre nous utilisons la balise <font>.
Par exemple :

<h2><font size="+1" color="#333366" face="Verdana">Mon titre


ici</font></h2>

Ce qui donne le rsultat suivant :

Mon titre ici


Imaginons que nous ayons 6 titres dans la mme page, avec la mme prsentation, nous rpterions
6 fois notre balise <font> avec tous ses attributs. Ceci donnerai un code bavard et nous obligerai de
multiples modifications le jour o l'on souhaite modifier la couleur de nos titres.
La solution, sparer le code et la prsentation avec les CSS
Avec les feuilles de style, on peut regrouper les informations de prsentation une fois pour toute
pour notre page.
La figure suivante montre ce que donne la mme page sans CSS puis avec le CSS.

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Les versions de CSS


CSS 1 : ds 1996, on dispose de la premire version du CSS. Elle pose les bases de ce langage qui
permet de prsenter sa page web, comme les couleurs, les marges, les polices de caractres, etc.
CSS 2 : apparue en 1999 puis complte par CSS 2.1, cette nouvelle version de CSS rajoute de
nombreuses options. On peut dsormais utiliser des techniques de positionnement trs prcises, qui
nous permettent d'afficher des lments o on le souhaite sur la page.
CSS 3 : c'est la dernire version, qui apporte des fonctionnalits particulirement attendues comme
les bordures arrondies, les dgrads, les ombres, etc.
Quels sont les avantages de CSS ?
CSS fut une rvolution dans l'univers de la conception Web. Les avantages concrets de CSS sont les
suivants :

Le contrle de la prsentation de plusieurs documents par une seule feuille de style ;


Un contrle plus prcis de la prsentation ;
Des prsentations diffrentes appliques des types de mdias diffrents ( l'cran,
l'impression, etc.) ;
De nombreuses techniques volues et sophistiques.

Dans ce qui suit, nous verrons comment CSS fonctionne rellement et comment commencer

2. Comment CSS fonctionne-t-il ?


Dans ce chapitre, nous apprendrons fabriquer notre premire feuille de style. Nous saurons ce
qu'est le modle CSS de base et quels sont les codes ncessaires pour utiliser CSS dans un document
HTML.
Beaucoup de proprits des feuilles de style en cascade (CSS) sont similaires celles de HTML. Si
nous avons l'habitude d'utiliser HTML pour la prsentation, nous reconnatrons donc beaucoup de
ces codes. Voyons un exemple concret.
! La syntaxe CSS de base :
La dfinition de base d'un style est simple :
Balise {proprit de style: valeur; proprit de style: valeur}
Exemple 1 :
Avec HTML, nous l'aurions fait comme ceci :
<body bgcolor="#FF0000">
Avec CSS, on peut obtenir le mme rsultat comme cela :
body {background-color: #FF0000;}

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Exemple 2 :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises
<H3> auront comme style Arial et italique.
Comme nous l'aurons remarqu, les codes sont plus ou moins identiques pour HTML et CSS. Ces
exemples illustrent galement le modle fondamental de CSS :

Selector {property: value; }


A quelle balise HTML la
proprit sapplique. Ex.
Body, H3,

La proprit, par exemple


la couleur darrire-plan
background-color ;

La valeur de la proprit, par


exemple la couleur darrireplan est rouge : #FF0000

2. Comment appliquer CSS un document HTML ?


Il y a trois faons d'appliquer le style CSS un document HTML.

dans un fichier .css (mthode la plus recommande) ;

dans l'en-tte <head> du fichier HTML ;

directement dans les balises du fichier HTML via un attribut style (mthode la moins
recommande).

Elles sont toutes expliques ci-dessous :

" Dans un fichier .css (recommand)


On crit le code CSS dans un fichier spcial ayant l'extension .css . C'est la mthode la plus
pratique et la plus souple. Cela nous vite de tout mlanger dans un mme fichier. (Pour le reste,
nous utiliserons cette mthode pour tous les exemples.)
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>

Notez le contenu de la ligne <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce
fichier HTML est associ un fichier appel style.css et charg de la mise en forme.

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Enregistrez ce fichier sous le nom que vous voulez (par exemple page.html)
Maintenant, crez un nouveau fichier vide dans votre diteur de texte (par exemple Notepad++) et
copiez-y ce bout de code CSS :
p
{
color: blue;
}

Enregistrez le fichier en lui donnant un nom qui se termine par .css , comme style.css. Placez ce
fichier .css dans le mme dossier que votre fichier .html .
Dans Notepad++, vous devriez observer quelque chose de similaire la figure suivante.

Fichiers HTML et CSS dans Notepad++


Dans votre explorateur de fichiers, vous devriez les voir apparatre cte cte. D'un ct le .html ,
de l'autre le .css , comme la figure suivante.

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Ouvrez maintenant votre fichier page.html dans votre navigateur pour le tester, comme vous
le faites d'habitude. Vos paragraphes sont crits en bleu, comme dans la figure suivante !

" Dans l'en-tte <head> du fichier HTML

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

l existe une autre mthode pour utiliser du CSS dans ses fichiers HTML : cela consiste
insrer le code CSS directement dans une balise <style> l'intrieur de l'en-tte <head>.
Voici comment on peut obtenir exactement le mme rsultat avec un seul fichier .html qui
contient le code CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>

Testez, vous verrez que le rsultat est le mme.

" Directement dans les balises (non recommand)


Dernire mthode, manipuler avec prcaution : vous pouvez ajouter un attribut style
n'importe quelle balise. Vous insrerez votre code CSS directement dans cet attribut :
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>

Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code
CSS, sera color en bleu (figure suivante).

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Quelle mthode choisir ?


Il est recommand de prendre l'habitude de travailler avec la premire mthode parce que
c'est celle utilise par la majorit des webmasters Pourquoi ?
Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera
plus tard constitu de plusieurs pages HTML

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'crire cette instruction
qu'une seule fois pour tout votre site, comme le montre la figure suivante.

Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Essayez vous-mme :
Lancez Notepad++ et crez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus
suivants :
default.htm
<html>
<head>
<title>Mon document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Ma premire feuille de style</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Placez maintenant les deux fichiers dans le mme dossier. Songez sauvegarder les fichiers avec les
bonnes extensions (respectivement .htm et .css )
Ouvrez default.htm dans votre navigateur et constatez le fond rouge de la page. Flicitations !
Vous avez fabriqu votre premire feuille de style !

3. Les couleurs et les arrire-plans :


Maintenant, nous apprendrons comment appliquer des couleurs et des couleurs d'arrire-plan
nos sites Web. Nous tudierons galement des mthodes volues pour positionner et
contrler les images d'arrire-plan. Les proprits CSS suivantes seront expliques :
color
background-color
background-image
background-repeat
background-attachment
Chp3 : Feuilles de Style CSS

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

background-position
background

" La couleur d'avant-plan : la proprit 'color'


La proprit color dcrit la couleur d'avant-plan d'un lment.
Par exemple, supposons que nous voulions tous les titres du document en rouge fonc. Les
titres sont tous baliss avec l'lment HTML <h1>. Le code suivant donne aux lments <h1>
une couleur rouge.
h1 {color: #ff0000;}
Remarque :
On peut dfinir les couleurs avec des valeurs hexadcimales comme dans l'exemple prcdent
(#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB = Red Green Blue
(rgb(255,0,0)).
" La proprit 'background-color'
La proprit background-color dcrit la couleur d'arrire-plan des lments.
L'lment <body> est le rceptacle de tout le contenu du document HTML. Pour changer la
couleur d'arrire-plan d'une page entire, il faudrait donc appliquer la proprit 'background
color' l'lment <body>.
On peut aussi appliquer une couleur d'arrire-plan d'autres lments y compris les titres et le
texte. Dans l'exemple ci-dessous, Des couleurs d'arrire-plan diffrentes sont appliques aux
lments <body> et <h1>.
body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}
" Les images d'arrire-plan [background-image] :
La proprit CSS background-image sert insrer une image d'arrire-plan.
Pour insrer une image en arrire-plan d'une page Web, appliquez simplement la proprit
background-image l'lment <body> et indiquez le chemin de l'image.
body {background-color: #FFCC66; background-image: url("fleur.jpg");}

Chp3 : Feuilles de Style CSS

10

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Remarque :
Le chemin de l'image avec url("fleur.gif"). Cela signifie que l'image se trouve dans le mme
dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec
url("../images/fond.gif"), ou mme sur Internet en donnant l'adresse complte du fichier :
url("http://www.html.net/fond.gif").
" Rpter l'image d'arrire-plan [background-repeat] :
Avez-vous remarqu, dans l'exemple prcdent, que limage de fond tait rpt par dfaut
horizontalement et verticalement pour couvrir la totalit de l'cran ? Ce comportement est
contrl par la proprit background-repeat.
Le tableau suivant dcrit les quatre valeurs diffrentes de background-repeat.
Valeur
repeat-x
repeat-y
repeat
no-repeat

Description
L'image se rpte horizontalement
L'image se rpte verticalement
L'image se rpte horizontalement et verticalement
L'image ne se rpte pas

Par exemple, pour viter la rptition d'une image d'arrire-plan, le code devrait ressembler
ceci :
body {
background-color: #FFCC66;
background-image: url("fleur.gif");
background-repeat: no-repeat;
}
" Bloquer l'image d'arrire-plan [background-attachment]

Chp3 : Feuilles de Style CSS

11

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

La proprit background-attachment dfinit si l'image d'arrire-plan est fixe ou bien dfile


avec l'lment conteneur.
Une image d'arrire-plan bloque ne bougera pas avec le texte lorsque le lecteur fait dfiler la
page, au contraire d'une image d'arrire-plan non bloque qui dfilera avec le texte de la page
Web.
Valeur
scroll
fixed

Description
L'image dfile avec la page (non bloque)
L'image est bloque

Par exemple, le code suivant bloquera l'image d'arrire-plan.


body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
" Positionner une image d'arrire-plan [background-position]
Par dfaut, l'image d'arrire-plan se positionnera dans le coin suprieur gauche de l'cran.
La proprit background-position permet de changer cette position prdfinie et de placer
l'image d'arrire-plan n'importe o l'cran.
Il y a plusieurs mthodes pour fixer la valeur de background-position. Par contre, elles se
prsentent toutes sous la forme d'un jeu de coordonnes. Par exemple, la valeur 100px
200px positionne l'image d'arrire-plan 100px depuis la gauche et 200px depuis le
haut de la fentre du navigateur.
Les coordonnes peuvent s'exprimer en pourcentages de la largeur de l'cran, ou en units
fixes (pixels, centimtres, etc.), ou on peut utiliser les mots-cls "top", "bottom", "center",
"left" ou "right". Le modle suivant illustre ce systme :

Chp3 : Feuilles de Style CSS

12

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

L'exemple de code suivre positionne l'image d'arrire-plan dans le coin infrieur droit de la
page :
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
" Concision [background] :
La proprit background est un raccourci pour toutes les proprits listes dans cette leon.
Avec background, on peut comprimer plusieurs proprits et donc crire une feuille de style
plus courte, ce qui en facilite la lecture.
Par exemple, les cinq lignes suivantes :

background-color: #FFCC66;
background-image: url("butterfly.gif");

Chp3 : Feuilles de Style CSS

13

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

On peut obtenir le mme rsultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
La liste de commande est la suivante :
[background-color] | [background-image] | [background-repeat] | [background-attachment] |
[background-position]
Si une proprit manque, elle prend automatiquement sa valeur par dfaut. Par exemple, si on
supprime background-attachment et background-position de l'exemple :
background: #FFCC66 url("butterfly.gif") no-repeat;
Ces deux proprits non dfinies prendront tout simplement leurs valeurs par dfaut, qui sont
comme chacun sait : "scroll" et "top left".

4. Les polices
Nous apprendrons ce que sont les polices et comment les appliquer avec CSS.
Les proprits CSS suivantes seront dcrites :

font-family
font-style
font-variant
font-weight
font-size
font

" La famille de polices [font-family] :


La proprit font-family sert indiquer la liste prioritaire des polices utiliser pour
l'affichage d'un lment donn ou d'une page Web.
Il y a deux types de noms pour catgoriser les polices : les noms de familles et les familles
gnriques. Les deux termes sont expliqus ci-dessous.

Le nom de famille : Comme exemples de noms de familles (souvent appeles


polices ), on trouve "Arial", "Times New Roman" ou "Tahoma".
La famille gnrique : On peut dcrire les familles gnriques comme des groupes
de noms de familles ayant des aspects uniformes. Un exemple est celui de la famille
sans srif, qui est un ensemble de polices sans empattement .

On peut illustrer cette diffrence comme ceci :


Chp3 : Feuilles de Style CSS

14

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Exemple :
h1 {font-family: arial}
h2 {font-family: "Times New Roman"}
On peut mettre plusieurs nom de famille selon laffichage dans le navigateur sil accepte un
nom de famille ou non ; exemple :
h1 {font-family: arial, verdana, sans-serif;}
" Le style des polices [font-style]
La proprit font-style dfinit le style de la police concerne tre normal, italic ou
oblique.
Exemple : h2 {font-family: "Times New Roman"; font-style: italic;}
" Les variantes de polices [font-variant] :
La proprit font-variant sert choisir entre les variantes normal ou small-caps ( petites
capitales) d'une police.
Exemple :
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
" [font-weight] :
Dfinit l'paisseur de la police normal ou bold ou bolder ou lighter ou valeur numrique
soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: bold}

Chp3 : Feuilles de Style CSS

15

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

" font-size
Dfinit la taille de la police. On peut choisir parmi beaucoup d'units diffrentes points (pt),
inches (in), centimtres (cm), pixels (px) ou pourcentage (%)
Exemple :

P {font-size: 12pt}
h1 {font-size: 30px;}
h3 {font-size: 120%;}

" Concision [font]:


Avec la proprit raccourcie font, il est possible de couvrir toutes les diffrentes proprits de
police en un coup.
Par exemple, prenons ces quatre lignes de code servant dcrire les proprits de police de :
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Avec la proprit raccourcie, on peut simplifier le code :
p {font: italic bold 30px arial, sans-serif;}
L'ordre des valeurs de la proprit font est le suivant :
font-style | font-variant | font-weight | font-size | font-family

Chp3 : Feuilles de Style CSS

16

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

5. Texte
Les proprits textes vont vous permette de personnaliser laffichage de vos textes tout en
combinant les balises de formatages avec la CSS.

text-indent
text-align
text-decoration
letter-spacing
text-transform

# text-indent
Cette proprit est utilise pour ajouter un alina la premire ligne du texte.
Exemple : un alina de 30px est appliqu tous les paragraphes baliss par un lment <p> :
p {text-indent: 30px;}
# text-align
La proprit text-align permet de modifier l'alignement dun texte. Le texte peut tre centr,
align droite ou gauche, ou encore justifi.
Dans l'exemple suivant, le texte des titres du tableau <th> est align droite, tandis que les
donnes du tableau <td> sont centres. Enfin, les paragraphes de texte normaux sont justifis :
th {text-align: right;}
td {text-align: center;}
p {text-align: justify;}
# text-decoration :
La proprit text-decoration permet d'ajouter des dcorations ou effets diffrents au
texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc.
Dans l'exemple suivant, les lments <h1> sont des titres souligns, les lments <h2> sont
des titres avec un trait au-dessus et les lments <h3> des titres barrs.
h1 {text-decoration: underline}
h2 {text-decoration: overline}
h3 {text-decoration: line-through}
# letter-spacing :
L'espacement entre les caractres du texte peut tre dfini avec la proprit letter-spacing. La
valeur de la proprit est simplement celle de l'espacement dsir.
Chp3 : Feuilles de Style CSS

17

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Par exemple, si vous voulez un espacement de 3px entre les lettres d'un paragraphe de texte
<p>, et de 6px entre les lettres des titres <h1>, voici le code utiliser :
h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}
# text-transform
La proprit text-transform contrle la capitalisation du texte. On peut choisir une
capitalisation initiale, une mise en majuscules ou une mise en minuscules,

capitalize : Elle capitalise la premire lettre de chaque mot. Par exemple, marcel
dupond deviendra Marcel Dupond .
uppercase : Elle convertit toutes les lettres en majuscules. Par exemple, marcel dupond
deviendra MARCEL DUPOND .
lowercase : Elle convertit toutes les lettres en minuscules. Par exemple, MARCEL
DUPOND deviendra marcel dupond .
none : Aucune transformation, et le texte se prsente tel qu'il apparat dans le code
HTML.

Exemple :
h1 {text-transform: uppercase}
h1 {text-transform: lowercase}
li {text-transform: capitalize}
Exercice :
En utilisant une feuille de style externe, sur un fond gris, centrez un <h1> rouge dans votre
document. Placez ensuite un titre de <h2> bleu en capitale suivi de deux paragraphes avec une
indentation. Modifiez ensuite la hauteur de ligne du deuxime paragraphe pour le rendre plus
lisible.

6 Border, Margin et Padding


Modle de bote
Dans une mise en page ralise en CSS, tous les lments sont considrs comme des botes.
Chacune de ces botes est constitue dun contenu, dun espacement intrieur, dune bordure, et
dune marge externe. Voici les proprits CSS qui permettent de dterminer les dimensions, la
couleur, le style de chacun de ses constituants :

margin : marge externe de la bote (transparente);


border : la bordure de la bote;
padding : reprsente un espace autour du contenu de la bote;

Chp3 : Feuilles de Style CSS

18

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

content : le contenu de la bote, lendroit o se trouvent textes et images.

6.1 Border
Permet de dfinir les bordures autour des lments.
Liste des proprits border :
- border-style
Border-style vous permet de prciser la taille du bord. Les bords peuvent tre en pointill, en
trait, avec ligne continue, une double ligne, etc.
p {border-style:solid;}
Vous pouvez galement utiliser :
dashed (en tirets) ; dotted (en pointills) ; double (double); ridge; inset; outset (en 3D)
- border-color
Border-color vous permet de prciser la couleur du bord.
p {border-color:black}
-border-width :
Dfinit lpaisseur de la bordure.
Exemple :
p {border-width:5px}
Remarque : Les proprits border-width, border-style et border-color regroupent ellesmmes les proprits top, left, bottom et right.

Chp3 : Feuilles de Style CSS

19

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Exemple :
p{
border-top-style:solid;
border-right-style:dotted;
border-left-style:solid;
border-bottom-style:dotted;
}
-border :
Dfinit comme un raccourci global les proprits de bordure
Border : taille style couleur;
Exemple :
p {border:5px solid red;}

6.2 Margin
Comme dit prcdemment, margin reprsente la marge externe de la bote. Vous pouvez modifier
les espaces haut, droit, bas et gauche indpendamment des autres.

Chp3 : Feuilles de Style CSS

20

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

Exemple:

margin-top:5px;
margin-right:50px;
margin-bottom:10px;
margin-left:5px;
Il existe quatre manires de raccourcir les margin, dpendant des cts que vous souhaitez modifier :

margin:5px 50px 10px 5px : Modifie respectivement TOP, RIGHT, BOTTOM, LEFT, toujours dans
cet ordre
margin:5px 50px 10px : top = 5px, right et left = 50px, bottom = 10px
margin:5px 50px : top et bottom= 5px, right et left = 50px
margin:50px : La marge de 50px sapplique dans toutes les directions.

6.3 Padding
Le padding reprsente un espace entre le contenu et le bord de la bote. Mme si ces proprits,
valeur et raccourci, sont identiques au margin, il ne faut en aucun cas les confondre. Ils ont chacun
leur utilisation propre.

Exercice :
Toujours en utilisant une feuille de style externe, ralisez cette mise en page

Chp3 : Feuilles de Style CSS

21

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

7 Les listes
Grce aux feuilles de style, les listes deviennent un lment incontournable de la construction dun
site internet. On peut les personnaliser de nombreuses faons, ajouter des images, appliquer
diffrents styles, etc.
Liste des proprits listes :
- list-style-type :
List-style-type vous permet de changer le marqueur prsent devant chaque lment de la liste.
Voici un exemple qui aura pour effet de placer un rond vide devant chaque lment :

ul {list-style-type:circle;}
Certaines de ces valeurs sappliquent pour les listes non-ordonnes et dautres pour les listes
ordonnes.
! Valeurs des listes non-ordonnes :

! Valeurs des listes ordonnes :

Chp3 : Feuilles de Style CSS

22

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

list-style-image : Utilisez les images avec les listes. Voici un exemple qui aura pour effet de
placer une image devant chaque lment :

ul {list-style-image:url(mon-image.jpg)}
-

list-style-position :
Spcifie le retrait des puces. Les valeurs possible : inside; outside;
- list-style : Raccourci global vers les proprits des listes : type position url();

8 Les liens
Nous pouvons appliquer aux liens ce que nous avons dj vu dans les parties prcdentes (c'est-dire changer les couleurs et les polices, les souligns, etc.). La nouveaut, c'est que CSS permet de
dfinir ces proprits diffremment, selon que le lien est visit, non visit, activ, ou si le curseur le
survole. Cela permet d'ajouter des effets plaisants et utiles vos sites Web. Pour contrler ces effets,
on utilise ce qu'on appelle des pseudo-classes.
Qu'est-ce qu'une pseudo-classe ?
Une pseudo-classe permet de tenir compte de conditions et vnements diffrents pour la
dfinition d'une proprit sur une balise HTML.
Voyons un exemple. Comme vous le savez, les liens sont dfinis en HTML avec des balises <a>.
On peut donc utiliser a comme slecteur dans CSS :

a {color: blue;}
Un lien est susceptible d'avoir plusieurs tats. Par exemple, il peut tre visit ou non. Vous
pouvez utiliser des pseudo-classes pour assigner des styles diffrents aux liens visits et non visits.
a:link {color: blue;}
a:visited {color: red;}
Utilisons respectivement a:link et a:visited pour les liens non visits et pour ceux visits. Les
liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur
survole le lien.
Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des
explications supplmentaires.

La pseudo-classe :link
La pseudo-classe :link est utilise pour les liens menant aux pages que l'utilisateur n'a pas
visites.
Dans le code suivant, les liens non visits seront en bleu clair.

a:link {color: #6699CC;}

La pseudo-classe :visited
La pseudo-classe :visited est utilise pour les liens menant aux pages que l'utilisateur a
visites. Par exemple, le code suivant donnera la couleur mauve fonc tous les liens visits :

Chp3 : Feuilles de Style CSS

23

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

a:visited {color: #660099;}

La pseudo-classe :active
La pseudo-classe : active est utilise pour les liens qui sont activs.
Cet exemple montre des liens activs dont la couleur d'arrire-plan est jaune :

a:active {background-color: #FFFF00;}

La pseudo-classe :hover
La pseudo-classe :hover est utilise lorsque le pointeur de la souris survole un lien.
On peut s'en servir pour crer des effets intressants. Par exemple, si nous voulons que nos
liens soient orange et en italiques au survol du pointeur, le code CSS devrait tre le suivant :

a:hover {
color: orange;
font-style: italic;
}

Exemples :

Espacement des lettres :

Comme indiqu avant, on peut ajuster l'espacement entre les lettres avec la proprit
letter-spacing. Cela s'applique aux liens pour un effet spcial :

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

MAJUSCULES et minuscules

Nous avons dj vu la proprit text-transform qui permet de basculer entre des lettres
majuscules et minuscules.
Elle peut aussi servir pour crer un effet sur les liens :

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

Supprimer le trait sous les liens

Chp3 : Feuilles de Style CSS

24

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

On peut utiliser la proprit text-decoration pour indiquer de souligner le texte ou non.


Pour supprimer le soulign, il suffit de lui donner la valeur none.

a {text-decoration:none;}

9 L'identification (class et id)


9.1 Les classes :
Il peut s'avrer intressant d'affecter des styles diffrents des mmes balises. Pour cela les
spcifications CSS ont introduit le concept de classe.
La dfinition des classes est aussi simple que celles des styles. Elle consiste prciser la balise
slectionne (comme pour une dclaration de style), puis de lui ajouter un point (.) et le nom que
l'on souhaite donner la classe. Le nom de la classe peut-tre compos de lettres (accentues ou
non), de chiffres et de tirets :

Syntaxe :

balise.nom_de_classe {proprit de style: valeur ; proprit de style: valeur ; }


O Nom_de_la_classe reprsente le nom donn la classe.
Exemple :

p.rouge {font: Verdana 12px; color: #FF0000; }

Appel d'une classe :

Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class la balise :

<p class="rouge"> Texte mettre en rouge </p>

Les classes universelles :

Il est possible de ne pas prciser de balise, auquel cas la classe pourra tre utilise dans
n'importe quelle balise pour laquelle le style slectionn a un sens ! On parle alors de classe
universelle (parfois classe indpendante). La dfinition d'une telle classe se fait en prcdant tout
simplement le nom de la classe d'un point

.Nom_de_la_classe {proprit de style: Valeur; proprit de style: Valeur ...}


Exemple :
Soit la classe important suivante :

.important {font-type: arial; color: red; font-weight: bold}


L'appel de cette classe peut tre fait partir de n'importe quel lment HTML pour lequel la
dfinition est valide :

Chp3 : Feuilles de Style CSS

25

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

<P class=". important"> ... blabla ... </P>


<H1 class=". important">Titre 1</H1>
<TABLE><TR><TD class=". important">cellule</TD></TD>...

9.2 Notion des ID :


Le slecteur d'ID (identifiant) permet de faire rfrence un lment unique d'une page
repr par son identifiant. Les ID servent notamment localiser des lments HTML grce
au JavaScript.
Les ID fonctionnent exactement comme les classes.
La syntaxe est :

#nom_de_ID {proprit de style: valeur}


Et pour l'appeler :

<balise id="nom_de_ID"> .... </balise>


Notons qu'on ne pourra effectuer qu'un seul appel #nom_de_ID par page. Ainsi, pour
#important {...} <P id=important> est correct. Mais si on rencontre dans la mme page <H1
id=important> ce n'est plus correct !
Remarque :
Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts,
oubliez au plus vite ID et utilisez exclusivement les classes.
Si par contre vous souhaitez utiliser des scripts avec les feuilles de (voir plus loin dans le
cours), la notion de ID vous sera alors indispensable.

10 Le regroupement d'lments : (span et div)


Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) certains mots qui,
l'origine, ne sont pas entours par des balises. Si, par exemple, on veut modifier uniquement
bienvenue dans le paragraphe suivant :

<p>Bonjour et bienvenue sur mon site !</p>


Cela serait facile faire s'il y avait une balise autour de bienvenue mais,
malheureusement il n'y en a pas.
Les balises SPAN et DIV qui craient ainsi des petits blocs particuliers dans le document sans
devoir repasser par les lments structurels du Html classique.
Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID.

SPAN

Chp3 : Feuilles de Style CSS

26

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

La balise <SPAN> ... </SPAN> permet d'appliquer des styles des lments de texte d'un
paragraphe ou si vous prfrez un morceau de paragraphe. Ainsi on peut crire pour lexemple
prcdant :

<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>


Avec la class salutation est dfinit comme suit :

.salutations
{
color: blue;
}

DIV

La balise <DIV> ... </DIV> est utilise pour dfinir une division ou une slection dans un
document html. Elle est souvent utilise pour grouper les lments de type bloc et leur appliquer un
style.
Exemple 1 :

<BODY>
<DIV class= "introduction">
<P>Paragraphe dintroduction :</P>
<P>un autre paragraphe>
</DIV>
</BODY>
Avec la dfinition de la classe introduction :

.introduction
{
font-type : arial ; font-size : 12px ; color : blue
}
Exemple 2 :

<div id="fruit">
<ul>
<li>Banane</li>
<li>Pomme</li>
<li>Fraise</li>

Chp3 : Feuilles de Style CSS

27

Formateur : A.AISSAOUI

ISTA TAZA

Module : Applications hypermdias

</ul>
</div>
<div id="legume">
<ul>
<li>Pomme de terre</li>
<li>Tomate</li>
<li>Ognion</li>
</ul>
</div>

Dans notre feuille de style, nous pouvons dfinir les ID suivant :

#fuit {background: yellow}


#legume {background: green}

Chp3 : Feuilles de Style CSS

28

Formateur : A.AISSAOUI