Formation sur le CSS

Formation lors des webEducation [12 décembre 2006]

Introduction aux feuilles de style CSS
[WEBEDUCATION]

Table des matières
A - Structurer le contenu................................................................................................................2
(1) CSS : Définition et but...............................................................................................................2
(2) Historique...................................................................................................................................2
(3) XHTML, règle de marquage......................................................................................................4
(4) Avantages du code fondés sur les standards (xhtml, css, ..)....................................................5
(5) Doctype......................................................................................................................................5
(6) Kit de démarrage.......................................................................................................................7
B - Fonctionnement des CSS.........................................................................................................7
(1) Appliquer un style à un document.............................................................................................7
a) Les styles locaux (ou en ligne)...............................................................................................7
b) Les feuilles de style incorporées.............................................................................................7
c) Les feuilles de style liées........................................................................................................8
d) Les médias..............................................................................................................................9
(2) Les classes et ID........................................................................................................................9
(3) Anatomie et écriture d'une règle CSS.....................................................................................10
(4) Sélecteurs et pseudo classes..................................................................................................11
a) Les sélecteurs contextuels...................................................................................................11
b) Les sélecteurs contextuels...................................................................................................11
c) Les sélecteurs enfants..........................................................................................................12
d) Le sélecteur universel...........................................................................................................13
e) Le sélecteur de frère adjacent..............................................................................................13
f) Les sélecteurs d'attributs.......................................................................................................14
g) Les pseudo-classes..............................................................................................................14
g) Les pseudo-éléments............................................................................................................14
(5) Les valeurs numériques et de couleurs .................................................................................15
C - Polices de caractères ............................................................................................................16
(1) Les familles de polices.............................................................................................................16
(2) Dimensionnement des polices.................................................................................................17
(3) Propriétés des polices.............................................................................................................17
(4) Propriété de texte.....................................................................................................................17
D - Ressources..............................................................................................................................18
(1) Barre de développement pour navigateur web.......................................................................18
(2) Validateurs en ligne.................................................................................................................19
E - Références...............................................................................................................................19

Indique un lien vers une ressource hors-ligne (exemple, un site web, exercice, ..)

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006

A Structurer le contenu

(1) CSS : Définition et but

 CSS pour « Feuilles de style en cascade »
(Cascading Style Sheet)

Les CSS sont une façon de séparer les éléments de
structure d'un site Web et sa présentation. L'utilisation
d'une CSS vous permet de maintenir la partie « architecture
» (code HTML) des documents à une taille minimum tout en
gardant le contrôle absolu sur l'apparence du site (couleur,
position, taille, ...).

 Exemples :

Par exemple vous pouvez modifier la balise <H1> et y rattacher la police Arial, de taille 18 pixels, de
couleur rouge. Chaque fois que vous utiliserez la balise <H1> dans votre document, tout le texte situé
dans les limites de la balise recevra la mise en forme définie dans votre feuille de style.

Vous pouvez également utiliser le CSS pour positionner des éléments précisément sur votre page,
définir une bordure, des espacements ou une visibilité (afficher/cacher).

Réalisations à voir sur le site CSSzengarden :

➢ Une page html de base : http://www.csszengarden.com/zengarden-sample.html
➢ Un fichier css de base : http://www.csszengarden.com/zengarden-sample.css
➢ Liste de résultats possible : http://www.mezzoblue.com/zengarden/alldesigns/

(2) Historique

 Guerre des navigateurs

La guerre des navigateurs est le nom donné à la compétition
entre les navigateurs Web pour la domination sur le marché.
Il est couramment utilisé pour faire allusion au combat entre
Microsoft Internet Explorer et Netscape Navigator (en
particulier sur la plate-forme Windows) à la fin des années
1990. Aujourd'hui, il est à nouveau utilisé pour parler d'un
autre combat, celui qui oppose Internet Explorer à Mozilla
Firefox.

www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]


✔ 1993 : Apparition du navigateur Web NCSA Mosaic
✔ 1994 : Apparition de Netscape Navigator, réécriture complète de Mosaic.
✔ 1995 : Création d'Internet Explorer 1.0, qui fut inclus dans le Pack Plus Windows 95
✔ 1996 : Internet Explorer 3.0 (gestion des scripts et des premières versions du CSS)
✔ 1997 : Internet Explorer 4 fut un tournant de la guerre des navigateurs. Il était plus rapide et
supportait mieux les spécifications du W3C que Netscape Navigator 4.0
✔ 1998 : les développeurs de Netscape ont libéré le code source de Navigator, en le renommant
Mozilla. Alors que Netscape court à la faillite et se fait racheter par AOL, il décide de poursuivre
Microsoft en justice (Netscape accuse Microsoft de lui avoir proposé un accord de non
concurrence en échange d'un partage du marché des navigateurs. )
✔ 1999 : Les parts de marché de Netscape et Microsoft sont respectivement de 29 et 69 %, selon
Statmarket.
✔ 2001 : Sortie d'Internet Explorer version 6
✔ 2002 : Mozilla atteint la version 1.0 et devient populaire dans la communauté du logiciel libre
✔ 2003 : Microsoft annonçait qu'Internet Explorer 6.0 SP1 serait la dernière version indépendante
de son navigateur
✔ 2004 : La guerre a été relancée suite à la sortie du navigateur Firefox qui est basé sur le moteur
Gecko du navigateur de Netscape
✔ 2005 : Après plus de 50 millions de téléchargements, Firefox gagne du terrain sur Internet
Explorer avec plus de 10% de parts de marché.
✔ 2006 : Sortie d'Internet Explorer version 7.0 et Firefox 2.0

Guerre des navigateurs :

➢ http://fr.wikipedia.org/wiki/Guerre_des_navigateurs
➢ http://solutions.journaldunet.com/0208/020823_netscrosoft.shtml

Voici à présent, les différentes recommandations des feuilles de style CSS émissent par le w3c.

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994
pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML,
XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes, mais des
recommandations à valeur de standards industriels. http://www.w3c.org

 Décembre 1996 [CSS 1] :

En 1994, le World Wide Web Consortium (W3C) se créait, et le consortium se prit d'intérêt pour CSS, et
organisa un travail autour du langage. Håkon et Bert étaient les responsables du projet. D'autres
membres, comme Thomas Reardon (de Microsoft) y ont participé. Fin 1996, CSS était presque prêt à
être officialisé. La norme CSS1 fut publiée en décembre 1996.

Version originale en anglais : http://www.w3.org/TR/CSS1
Version française : http://www.yoyodesign.org/doc/w3c/css1/



 Mai 1998 [CSS 2] :

En 1997, CSS a été attribué à un groupe de travail au sein du W3C, présidé par Chris Lilley. Ce groupe
commença par s'occuper des problèmes non réglés par CSS1, ce qui entraîna la parution de CSS2
comme une recommandation officielle en mai 1998.

 En cours ... [CSS 2.1]

Devant les difficultés rencontrées lors de l'implémentation de CSS2, le W3C a décidé de revoir sa copie,
et de présenter une version simplifiée sur la base de ce qui a réellement pu être intégré à différents
navigateurs. Cette nouvelle version, CSS2.1, est actuellement au stade de Candidate Recommendation
en attendant CSS3.

Version originale en anglais : http://www.w3.org/TR/CSS21
Version en français (v2) : http://www.yoyodesign.org/doc/w3c/css2/cover.html

 A venir ... CSS 3

Les spécifications sont en cours de réalisation.

http://www.w3.org/Style/CSS/current-work

En savoir plus sur le CSS 3 :
Aperçu de propriétés CSS3 avec le moteur de rendu Gecko
http://www.css3.info/

(3) XHTML, règle de marquage

 Un marquage standardisé :

XHTML est un langage balisé servant à l'écriture de pages du World Wide Web. XHTML est le
successeur de HTML (de l'anglais HyperText Markup Language), respectant la syntaxe définie par XML.
En respectant les obligations de codage du XHTML, on permet de faire en sorte que les pages
s'affichent correctement sur les différents navigateurs et qu'elles soient conformes auprès des
validateurs du W3C.

 Obligations à respecter pour du code xhtml conforme :

✔ Déclarer un DocType : Strict, Transitional ou Frameset.
✔ Déclarer un espace de nom XML
✔ Déclarer votre type de contenu



✔ Fermer chaque balise, qu'elle soit englobante ou non
✔ Toutes les balises doivent être correctement imbriquées
✔ Les balises incorporées ne peuvent pas contenir de balises de bloc
✔ Écrire toujours les balises en minuscules
✔ Les attributs doivent avoir des valeurs et figurer entre guillemets
✔ Utiliser les équivalents codés pour les signes < et & dans le contenu.

Pour en savoir plus :

➢ http://pompage.net/pompe/declarations/

(4) Avantages du code fondés sur les standards (xhtml, css, ..)

✔ Amélioration des performances : Les pages sont plus légères et se téléchargent plus
rapidement. Nous n'avons besoin que d'un marquage structurel minimal, ainsi que l'utilisation
d'une seule feuille de style pour l'ensemble du site.
✔ La séparation du contenu et de la présentation : Vous pouvez modifier voire changer
totalement le contenu ou la présentation de votre site sans affecter l'autre partie.
✔ La confirmation que votre code est correcte : Utilisation des outils de validation XHTML et
CSS pour signaler les erreurs de codage.
✔ L'accessibilité : Votre site est plus facilement accessible, notamment par la disparition des
tableaux qui ne sont plus nécessaires pour le positionnement des éléments sur la page.
✔ Baisse des coûts de développement et de maintenance : il n'est plus nécessaire de mettre en
place un système (hasardeux) de discrimination des navigateurs pour servir aux différents
navigateurs un document adapté aux technologies propriétaires
✔ Gestion des médias : Possibilité de doter une page de feuilles de style spécifiques selon les
medias (navigateurs graphiques, lecteurs d'écran…).
✔ Présentation alternatives : possibilité de doter une page de présentations alternatives au choix
de l'utilisateur.
✔ Résolutions d'écrans : Création de sites flexibles, qui s'adaptent aux différentes résolutions
d'écran.
✔ Palier certaines insuffisances du langage html : contrôle de la distance entre les lignes,
contrôle des marges et des indentations , ...


➢ http://developpeur.journaldunet.com/tutoriel/theo/041020-raisons-xhtml-css-dom.shtml

(5) Doctype

 Mode standard / Quirks :

En respectant une déclaration de DOCTYPE standard, on s'assure que le navigateur interprétera au
mieux le code de la page. Si aucune déclaration n'est présente, le navigateur adopte le mode "Quirks",



c'est à dire que l'affichage ne suivra pas les standards du W3C.

Note : Le Doctype sert également lors de la validation de votre page web.

 EXEMPLES DE DOCTYPE :

Afin que le doctype soit lisible par tous les navigateurs (surtout IE), vous devez mettre votre ligne en
premier dans votre page (x)HTML.

* HTML 4.01 – Transitional :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

* HTML 4.01 – Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

* XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* XHTML 1.0 Transitional :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


➢ http://pompage.net/pompe/doctype/
➢ http://www.w3.org/International/articles/serving-xhtml/Overview.fr.html#quirks
➢ http://perso.orange.fr/coin.des.experts/reponses/faq9_64.html
➢ http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-
nous
➢ http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-
nous#c3113 (concernant le prologue xml)



(6) Kit de démarrage

 Pour bien demarrer : kit xhtml transitionnel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Modèle de DOCTYPE transitionel</title>
</head>
<body>

<!— CODE XHTML ICI -->

</body>
</html>

B Fonctionnement des CSS

(1) Appliquer un style à un document

Il existe trois manières d'ajouter des CSS à une page web :

a) Les styles locaux (ou en ligne)

Les styles locaux (aussi appelés styles en ligne) sont ajoutés à une balise à l'aide de l'attribut XHTML
"style" :

Voici un exemple de paragraphe avec un style incorporé

<p style="font-size:16px;color:red;">Voici un exemple de paragraphe avec un style incorporé<p>

b) Les feuilles de style incorporées

Les styles intégrés (aussi appelés styles de pages) sont disponibles à l'intérieur de la page, dans la
plupart des cas en-tête de votre document entre la balise <HEAD>.



Voici un exemple de modèle à utiliser :

<style type="text/css">
/* <![CDATA[ */
h1 { font-size:16pt; font-weight:bold;}
p {color:blue;}
/* ]]> */
</style>

Pour en savoir plus concernant le CDATA :

➢ http://www.ljouanneau.com/blog/2004/04/06/262-la-section-cdata-en-xml

c) Les feuilles de style liées

Les styles liés sont disponibles dans un document externe afin d'avoir une amplitude globale (sur tout le
site).

<link href="feuille_de_style.css" media="screen" rel="stylesheet" type="text/css" />

Importer une feuille de style externe (@import) :

La règle @import permet d'inclure un fichier CSS dans un autre fichier CSS ou à partir d'un style
incorporé. Cette règle doit être placée en tête, avant toute autre règle. Elle peut également spécifier un
type de media.

<style type="text/css" >
@import monstyle.css;
@import url(monstyle.css);
@import url(fineprint.css) print;
@import url("bluish.css") projection, tv;
</style>

Link ou @import ?

➢ http://blog.alsacreations.com/2004/09/25/64-link-ou-import
➢ http://web.covertprestige.info/test/17-regles-at-import-et-navigateurs.html



Priorité des styles (du plus prioritaire au moins prioritaire) :

Style local Style intégré Style lié

d) Les médias

L'une des ambitions des feuilles de styles est la possibilité d'offrir des styles spécifiques selon le media
visé, et de faciliter ainsi la réutilisation du même contenu indépendamment du media. Il peut s'agir en
théorie :

✔ [screen] : D'un media visuel non paginé tel un écran d'ordinateur
✔ [projection] : D'un media visuel paginé tel un projecteur
✔ [print] : D'un média destiné à l'impression.
✔ [handheld] : D'un media tactile tel les tablettes brailles
✔ [speech] : D'un media auditif tel les navigateurs vocaux...

Exemples :

<link rel="stylesheet" type="text/css" href="general.css" media="all" >
<link rel="stylesheet" type="text/css" href="ecran.css" media="screen, projection" >
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" >
<link rel="stylesheet" type="text/css" href="impression.css" media="print" >

Pour en savoir plus concernant les médias

➢ http://www.blog-and-blues.org/weblog/2005/08/04/438-les-types-de-media-css

(2) Les classes et ID

 Classe ou ID ? :

Une classe ou un ID permet de cibler une zone spécifique du document. Il est généralement préférable
d'utiliser un ID à la place d'une classe pour une zone qui n'est pas récurrente, qui n'est affichée qu'une
fois sur la page (pied de page, en tête, ...)

 Exemples :

Code XHTML :



<h1 class="entete">Voici un en-tête de texte</h1>

et la classe permettant de modifier son rendu :

.entete {
font-weight:bold;
font-size:16px;
}

Même exemple avec l'utilisation d'un ID :

Code XHTML :

<h1 id="entete">Voici un en-tête de texte</h1>

Code CSS :

#entete {
font-weight:bold;
font-size:16px;
}

(3) Anatomie et écriture d'une règle CSS

 Anatomie d'une regle :

Une règle CSS est constituée de deux parties. Le sélecteur, qui indique
la balise choisie par la règle, et la déclaration, qui indique ce qui se
passe lorsque la règle est appliquée. La déclaration est constituée de
deux éléments : une propriété, qui indique ce qui doit être concerné, et
une valeur, qui indique ce sur quoi la propriété est définie.

 Ecrire une règle CSS :

Une règle peux contenir plusieurs déclarations :

p {color:red; font-size:12px; line-height: 15px;}

Il est possible de grouper plusieurs sélecteurs :



h1, h2, h3, h4 {color:blue;font-weight:bold;}

Plusieurs règles peuvent être appliquées au même sélecteur :

h1, h2, h3, h4 {color:blue;font-weight:bold;}
h3 {font-style:italic;}

 Hierarchie des documents :

On pourrait ainsi représenter ceci : Ainsi :

<body>
<h3>....</h3>
<div id="logo">
<img src="..." />
</div>
<div id="footer">...</div>
</body>

(4) Sélecteurs et pseudo classes

a) Les sélecteurs simples

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par
zéro ou plusieurs sélecteurs d'attribut, d'ID, ou pseudo-classes.

Exemples :

Afficher en rouge tous les paragraphes sur la page :

p {color:red;}

Ou avec l'utilisation d'une classe :

H1.entete { color: green }

Selon la règle ci-dessus, le premier élément H1 n'aurait pas son texte en vert, contrairement au second :



<H1>Pas vert</H1>
<H1 class="entete">Vraiment vert</H1>

b) Les sélecteurs contextuels (ou sélecteur descendant)

Un sélecteur descendant est construit de deux sélecteurs simples ou plus séparés par un blanc. Il cible
les éléments qui sont des descendants d'un élément correspondant au premier sélecteur simple.

Exemples :

div p {color:#F00;}

c) Les sélecteurs enfants

Les sélecteurs enfants sont ignorés par Internet Explorer 6 sous Windows ! Ils sont généralement
utilisés pour créer des variations dans votre feuille de style et contourner les divers inconvénients
de non-compatibilié d'Internet Explorer.

Solution possible pour les curieux/ses :

➢ http://developpeur.journaldunet.com/tutoriel/css/050704-css-selecteur-enfant-equivalent-
ie.shtml

Un sélecteur enfant fonctionne à première vue comme un sélecteur contextuel vue précédemment, mais
il faut prendre en considération la hiérarchie du document !

Exemple :

p>em {color:green;}

Tous les textes compris entre la balise <em> et </em> seront coloriés en vert, uniquement s'ils sont
enfants d'une balise P. Si par exemple la balise EM est comprise dans une balise P et une balise SPAN,
elle ne sera pas affecté.

 Hack :

Tester le code suivant sous Firefox 1.5 et sous Internet Explorer 6 (en mode QUIRKS) :

CODE HTML :

<div class="vert">Boite 1</div>


CODE CSS :

.vert {
background-color: #00ff00;
padding: 0 20px;
border-left: 5px solid #00ff00;
border-right: 5px solid #00ff00;
width: 250px;
}

Puis ajouter cette ligne dans votre feuille de style :

html>body .vert {
width: 200px;
}

d) Le sélecteur universel

Le sélecteur universel s'utilise avec l'astérisque (*) signifie "n'importe quel élément". Ainsi, si vous
utilisez :

• {color:green;}

dans votre feuille de style, tout le texte s'affichera en vert, à l'exception des endroits où vous spécifiez
autre chose dans d'autres règles.

p * em {font-weight:bold;}

Ici, toute balise EM qui est au moins un petit-fils de la balise P (mais pas en enfant) est sélectionnée.
Peu importe l'identité de la balise parent de EM.

Nettoyer les styles :

➢ http://gou.blogspot.com/2005/10/nettoyer-les-styles.html
➢ http://forum.alsacreations.com/topic.php?fid=4&tid=631

e) Le sélecteur de frère adjacent

Ce type de sélecteur n'est pas pris en compte avec Internet Explorer 6 !

Cette règle sélectionne une balise qui suit une balise soeur spécifique (ces balises se trouvent au même
niveau dans hiérarchie de marquage, elles partagent la même balise parent).



Exemple :

Cette règle permet de cibler le premier paragraphe (balise P) qui se trouve juste à coté
(hiérarchiquement) de la balise H1.

h1 + p {font-variant:small-caps}

<div>
<h1>Mon titre de page</h1>
<p>Mon premier paragraphe</p>
<p>Mon deuxième paragraphe</p>
</div>

Le résultat affichera uniquement le texte « Mon premier paragraphe » en petite majuscule.

f) Les sélecteurs d'attributs

Ce type de sélecteur n'est pas pris en compte avec Internet Explorer 6 !

Les sélecteurs d'attributs utilisent les attributs de la balise. Ils servent principalement en XML, mais
peuvent être aussi être utilisé en (x)HTML.

Exemple :

img[title] {border: 2px solid blue;}

Avec ce code, vous aurez un contour bleu de 2 pixels sur toute image ayant un attribut TITLE, peut
importe la valeur de l'attribut.

g) Les pseudo-classes
On parlera ici de pseudo-classes rattachées à la balise <a>, ce sont les seules qui fonctionnent sur tous
les navigateurs. Mais il est également possible de les appliquer à d'autres balises : ul, li, span, ..

Exemple :

<a href="http://www.google.ca">Accès au moteur de recherche Google</a>

Il existe quatre états possibles :

• Lien : Le lien existe et l'utilisateur peut cliquer dessus.
• Visité : L'utilisateur a déjà cliqué sur le lien.
• Survol : La souris pointe sur le lien.
• Actif : Le lien est en cours d'activation

•



Les sélecteurs de pseudo-classes correspondants :

• a:link { color:black;}
• a:visited {color:gray;}
• a:hover {text-decoration:none;}
• a:active {color:navy;}

Un navigateur peut ignorer certaines de ces règles si vous ne les indiquez pas dans
l'ordre cité ci-dessus : lien, visité, survol et actif. (pour se souvenir : LoVe|HAte)

g) Les pseudo-éléments

Généralement incompatible avec la plupart des navigateurs, ils sont très peu utilisés. Voici toutefois un
code à tester qui fonctionne sur Internet Explorer 6 et Firefox, il permet de créer une lettrine pour toutes
les balises de type <p>:

p:first-letter {
font-size:300%;
float:left;
}

Ce qui ne fonctionne pas avec Internet Explorer 6 :

➢ http://www.floatthatbox.com/articles/selecteurs-css-21-partie-3.htm#footer

(5) Les valeurs numériques et de couleurs

 Les valeurs numériques :

Les valeurs numériques servent à décrire la longueur, mais aussi la hauteur, la largeur, l'épaisseur, etc..
de toutes sortes d'éléments. Ces valeurs entrent dans deux groupes principaux : absolues et relatives.

Valeur absolue Abréviation de l'unité
Pouces in
Centimètres cm
Millimètres mm
Points pt
Picas pc
Pixels px
Valeur relative Valeur unitaire
Em em
Ex ex
Pourcentage %



Les deux unités de mesure utilisées généralement lors de la conception de vos feuilles de style sont :

• Px (Pixel, valeur absolute)
• Em (Correspond à la hauteur de la police de caractère utilisé par votre navigateur. Environ 16
pixels , valeur relative)

Pour un meilleure accessibilité il est conseillé d'utiliser les valeurs relatives comme EM par exemple.
Ceci est primordiale dans Internet Explorer pour permettre à l'internaute de modifier la taille de la police
de caractère par défaut, ce qui n'est pas le cas dans Firefox par exemple qui permet de modifier des
valeurs absolues.

Comprendre et gérer du texte avec les EM :

➢ http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em
➢ http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em

 Les valeurs de couleur :

Il y a trois manières d'écrire des valeurs de couleur : Hexadécimale, pourcentage RVB (Rouge, Vert,
Bleu) et les noms de couleurs.

Voici la couleur rouge dans les trois formats :

✔ Hexadécimal : #FF0000
✔ RVB/RGB : rgb(100%, 0, 0);
✔ Nom : red

.fond_entete {background-color:#FF0000;}

La plupart du temps, vous trouverez des valeurs exprimées en hexadécimale. C'est aussi celle qui offre
le plus de possibilité : 16 777 216 combinaisons (256 x 256 x 256 couleurs) contre 1 million en RVB.

Les valeurs à retenir s'il y en avait seraient : #000000 #FFFFFF

C Polices de caractères

(1) Les familles de polices

Un navigateur web est limité sur l'utilisation des polices de caractères et cela peut également varier d'un
navigateur à l'autre. Il existe d'ailleurs plusieurs collections de polices que vous pouvez appeler dans
vos styles :

• Les polices sérif



• Les polices sans-sérif
• Les polices monoscape
• Les polices cursives
• Les polices fantaisie

Il est généralement conseillé d'utiliser des polices "sans-sérif" pour du texte, car elles sont plus nettes et
plus professionnelles d'apparence.

 Ecriture de la déclaration CSS :

Pour écrire une déclaraction CSS, spécifiez un nombre de polices sérif et sans-sérif, en commençant
par celle que vous préférez et en terminant par un nom de police générique comme sérif ou sans-sérif.

Voici un exemple de déclaration pour l'ensemble du document XHTML :

body {
font-family : trebuchet ms, helvetica, arial, sans-sérif;
}

La police utilisée dépendra des polices disponibles sur l'ordinateur de la personne qui navigue sur le site
et la priorité se fera sur la première police déclarée et ainsi de suite jusqu'à "sans-serif" qui correspond à
la police "sans-serif" disponible par défaut sur le navigateur.

Réflexion sur les polices de caractères :

➢ http://www.cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=676

(2) Dimensionnement des polices

Le dimensionnement des polices s'effectuera en fonction de vos choix de valeurs : Absolue ou relative ?
Pixel ou Em ?

 Quels sont les avantages à utiliser l'un et l'autre ?

À noter que lorsqu'on redimensionne du texte à l'aide d'Internet Explorer, cela ne fonctionne que
si l'on utilise les valeurs en EM, si vous avez fait appel à des valeurs en Pixels (px), aucun
changement ne se fera à l'écran. Pour un niveau d'accessibilité supérieur (les malvoyants par
exemple), il est donc préférable d'utiliser les valeurs EM.

(3) Propriétés des polices

Quand on parle de "police", sur quoi agissons nous : Les propriétés de polices font référence à la
taille et à l'apparence des collections de texte : la famille, la taille, le gras ou l'italique...

Voici les propriétés :



• font-style : normal, italic
• font-weight : bold, bolder, lighter
• font-variant : small-caps, normal

On peut également tout écrire sur une seule ligne ainsi :

font: bold italic small-caps 12pt verdana, arial, sans-serif;

La séquence des valeurs est la suivante :

1. font-weight, font-style, font-variant dans n'importe quel ordre, puis
2. font-size (obligatoire)
3. font-family (obligatoire)

(4) Propriété de texte

Quand on parle de "texte", sur quoi agissons nous : Les propriétés de texte sont liées au traitement
de la police, c'est-à-dire la définition de sa hauteur de ligne, l'espacement de ses lettres, son souligné,
etc ..

Voici les propriétés :

• text-indent : valeur positive ou négative
• letter-spacing : valeur positive ou négative
• word-spacing : valeur positive ou négative
• text-decoration : underline, overline, strikethrought, blink
• text-align : left, right, center, justify
• line-height : toute valeur numérique (aucune unité de valeur à indiquer)
• text-transform : uppercase, lowercase, capitalize, none
• vertical-align : sub, sup, top, middle, bottom

D Ressources

(1) Barre de développement pour navigateur web

 But et fonctionnalités

Les barres pour développeurs améliorent grandement la création de sites web et offrent des outils
intuitifs pour la création de pages au format CSS. Ainsi il est possible d'identifier visuellement les
différents calques disponibles sur une page, obtenir des informations sur leur position ou éditer
directement la feuille de style de n'importe quelle page disponible sur Internet. Elles offrent une centaine
de fonctionnalités variées allant de l'affichage des informations contenues dans les cookies à une liste
de liens pour la validation de vos pages. Elles sont gratuites et disponibles pour plusieurs navigateurs
internet dont Firefox qui a été le premier initiateur et Internet Explorer avec une version beta très
prometteuse.



Téléchargement des extensions :

➢ http://chrispederick.com/work/webdeveloper/ (barre de développement)
➢ http://users.skynet.be/mgueury/mozilla/index.html (validateur html basé sur Tidy)
➢ https://addons.mozilla.org/firefox/271/ (colorZilla pour firefox 2)

➢ http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-
BB3E-2D5E1DB91038

(2) Validateurs en ligne

✔ Validateur (x)html du w3c : http://validator.w3.org/
✔ Validateur de pages multiples : http://www.validateur.ca/
✔ Validateur css du w3c : http://jigsaw.w3.org/css-validator/

D'autres validateurs peuvent être disponible ici : http://openweb.eu.org/ressources/validation/

E Références

Pour aller plus loin dans la découverte des feuilles de style en cascade, voici quelques pistes :

 Utilisation des hacks pour un rendu identique dans Firefox et Internet Explorer
✔ Le contournement avec "!important" : Voir ces pages : http://www.babylon-
design.com/site/index.php/2004/12/13/51-le-hack-css-important et http://www.ultra-
fluide.com/ressources/css/css-hacks.htm
✔ Utilisateur des sélecteurs enfants comme HACK pour Firefox :
http://openweb.eu.org/articles/dimensions_boites_css/

 Quelques sites web de référence :
✔ http://openweb.eu.org/ : de la théorie
✔ http://www.alsacreations.com/ : des tutoriaux, un forum de support
✔ http://www.opquast.com/ : Une liste de 153 bonnes pratiques (voir aussi :
http://www.opquast.com/mon-opquast/)
✔ http://wiki.media-box.net/search_plugin/plugin.php5 : Références CSS et outils de
recherche



✔ http://pompage.net/ : Articles francisés sur les CSS
✔ http://www.cssplay.co.uk/ : Ressources css, exemples, etc ... (en anglais)
✔ http://www.w3schools.com/ : Références CSS
✔ http://www.gotapi.com/ : Basé sur w3schools

 Divers :
✔ http://www.visibone.com/html/ : Références au format "papier"
✔ http://wiki.media-box.net/search_plugin/plugin.php5 : Références CSS et outil de recherche
✔ http://www.blog-and-blues.org/weblog/2004/11/03/331-title-et-h1-titre-de-section-et-titre-de-
document-le-malentendu : Utilisation des H1 dans un document
✔ http://www.positioniseverything.net/ : Bogues des navigateurs web (anglais)
✔ http://www.shinze.com/index.php/post/2003/11/28/40-LesBonsConseilsDePappyDave :
Quelques bons conseils
✔ http://chrispederick.com/work/webdeveloper/ : Barre de développement pour Firefox
✔ http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-
BB3E-2D5E1DB91038 : Barre de développement pour Internet Explorer

 Listes de discussion :
✔ Pompage.net : http://pompage.net/liste/
✔ W3Québec : http://w3qc.org/ressources/listedediscussion/


Formation sur le CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Formation sur le CSS

Ähnlich wie Formation sur le CSS (20)

Mehr von Yannick Pavard

Mehr von Yannick Pavard (20)

Formation sur le CSS