Le Css ESGIS 2014 2015

- Les feuilles de styles (CSS) : Cascading Styles Sheets -- ESGIS 2014-2015 -
I. INTRODUCTION AUX FEUILLES DE STYLES CSS
A. Objectifs du cours
• Donner les notions fondamentales sur les feuilles de style CSS avec des
ateliers de travaux pratiques.
• Apprendre les principes de base de développement de contenus Web grâce à

la séparation du fond de la forme
• Réaliser des designs sobres, fluides, mais assez jolis et conformes aux
normes de la W3C.
B. Présentation
Lorsque vous travaillez avec le code HTML, vous mettez tranquillement en
forme des documents à l'aide de tags que les navigateurs interprètent pour restituer
la page origine. Vous pouvez choisir la police, corps gras ou italique ... monter des
cadres, des tableaux, des liens hypertexte, positionner des retraits ... et réaliser des
sites fort agréables et parfois superbes. On dit que le HTML est un langage de
marque logique (vous définissez logiquement le contenu d'une page à l'aide de
tags).
Vous connaissez certainement l'inconvénient majeur qui existe suite aux

divergences d'interprétation des navigateurs ne restituant pas à l'identique les
contenus, sans oublier les "tags propriétaires" qui fonctionnent chez l'un mais pas
-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 1

chez l'autre. Netscape est très pointilleux alors qu'Internet Explorer est moins sévère
mais vous trouverez dans un chapitre adéquat les "astuces" pour limiter les
distorsions des navigateurs.
Le HTML est indispensable mais ses limites peuvent freiner votre esprit de
créativité et s'il devenait possible d'ajouter un "zeste" de quelque chose qui faciliterait
une avancée, ce serait idéal.
Le CSS vous apporte ce "zeste" en imbriquant son langage

complémentaire au HTML de base. Il est officiellement reconnu par le W3C et
donc normalisé. Attention toutefois, de même que pour le JavaScript, il est possible
d'atteindre les mêmes buts par des scripts différents.
Le langage CSS (Cascading Style Sheets) est utilisé pour définir l’aspect
futur de votre site, comme par exemple la couleur du fond de la page ou le type de
police.
Plus concrètement, le CSS (ou feuille de style), c’est un petit fichier (exemple «
style.css ») dans lequel vous allez définir l’aspect futur de votre site.
Pourquoi utiliser le CSS ?
Avantage :
• La structure et la présentation sont gérées séparément

• La conception sans se soucier de la présentation,
• Le code HTML est réduit en taille et en complexité.
Exemple concret :
Je souhaite le fond de mes pages en gris.

Si j'ai un site de 5 pages, je vais répéter 5 fois <body bgcolor="#CCCCCC">
En CSS je vais mettre dans mon fichier CSS (exemple : style.css)
Body {
background-color: #CCCCCC;

Si un jour je souhaite modifier la couleur de mes pages, avec le CSS, j'ai un

seul fichier à modifier, avec HTML 5 !
C. La syntaxe de base des CSS

La syntaxe du CSS est très simple : sélecteur {propriété : valeur ;}.
Exemple: h1 {color: blue;}
Chaque sélecteur (ici body) peut avoir plusieurs propriétés avec des valeurs
indépendantes :
On remarquera un point virgule (;) entre chaque propriétés.
Le "sélecteur" en place de "tag" (balise) du code pur HTML

h2 {font-size: 16pt ;}
La "déclaration" s'applique à l'ensemble

font-size: 16pt
qui à son tour se compose de deux parties :
La "propriété" ici ...... h2 {font-size: 16pt ;}
La "valeur" ici ....... h2 {font-size: 16pt ;}
et enfin :
Le mot "bloc" s'applique à un ensemble précis qui pourrait se limiter à

{ font-size: 16pt ; }
Mais comme vous rencontrez { font-size: 16pt ; font-family: arial ; } soit deux
déclarations ou davantage qui se suivent, on parle alors d'un bloc de
déclarations.
Les "blancs" sont permis : h2{font-size:16pt;} -ou- h2 { font-size: 16pt; }

NB :
Si le HTML supporte que certains tags comme <P> ne soient pas fermés par
</P>, en CSS TOUS les sélecteurs doivent être fermés.
D. Lien entre HTML et CSS

Votre code CSS peut être placé à 3 positions différentes dans la page.
- Internal: Dans la page HTML
- External: Dans un fichier indépendant
- Dans l'élément HTML lui-même
Dans le code HTML de la page
Premier choix: mettre le code dans la page HTML, entre les deux balises <header>
et </header>.
<head>
<title><title>
<style type="text/css">
Ici le code CSS
</style>
</head>
Exemple:
h1 {color: blue;}
</style>
Dans un fichier indépendant
Possibilité n°1 - La balise Link :

Dans un fichier indépendant type style.css c'est-à-dire un fichier séparé

qui portera l'extension .css et contiendra toutes les règles du CSS que vous avez
choisi de définir et utilisées dans votre site (du moins sur les pages portant le code
approprié de liaison), sachant aussi que les tags HTML suivants ne peuvent être
utilisés :
html - head - title - meta - script - base - basefont

Ensuite dans chaque page où vous souhaitez en profiter, entre les tags
<HEAD> et </HEAD> placer une simple ligne de code qui servira d'appel (trait
d'union) et dont voici le modèle :
<head>
<title><title>
<link rel="stylesheet" type="text/css" href="toto.css" />
</head>
Possibilité n°2 - La règle @import :
@import est une propriété CSS2 qui doit être suivie de l'URL d'un fichier qui
contiendra des styles à appliquer en plus de la feuille de style en cours.
Exemple :
@import url(/styles/habillage.css);
</style>
Cette propriété permet en outre d'importer des feuilles de style dans d'autres
feuilles de style. Cela offre des possibilités pour créer des feuilles de style
dynamiques sans avoir à recopier plusieurs fois le même code.
MÉTHODE link ou @import ?
En pratique, le résultat est exactement le même (après avoir testé sur

plusieurs sites), mais il y'a une petite subtilité qui peut se révéler intéressante...

En effet, @import (CSS2) n'est pas reconnu par les très vieux navigateurs
qui ne sont pas encore aux normes au niveau des CSS (par exemple Netscape 4).
Par conséquent, en important sa feuille de style avec @import, les styles

seront appliqués partout sauf sur ces navigateurs dinosaures.
Quel intérêt ? Tout simplement de permettre aux utilisateurs de ces

dinosaures de consulter le site sans trop de problème. En effet, sans feuille de style
le site reste mieux visible qu'avec des styles interprétés n'importe comment.
En clair, avec @import, un Netscape 4 aura une page "brute", sans style,
plutôt qu'une horreur illisible. C'est donc une technique recommandée pour
l'interopérabilité et la compatibilité ascendante.
Dans la balise HTML

Enfin, il possible de mettre un style directement dans la balise HTML
Cette définition se fait à la demande et s'applique à un ou plusieurs mots ou

paragraphes dans la page. Toutefois ce principe n'est pas conçu pour une utilisation
systématique et reste limité à des mises en forme occasionnelles.
A un tag HTML vous appliquez directement des paramètres CSS qui se

trouvent donc codifiés à l'endroit même du code source où ils agissent. Ceci
s'effectue par l'intermédiaire de l'attribut style="..." avec l'aide de valeurs, et en
pratique presque tous les tags HTML peuvent servir, sauf les suivants :
html - head - title - meta - script - base - basefont
On appelle parfois cette déclaration : "style à la volée" ou encore "mise

en forme rapide".
Exemple 1 :
Code source dans BODY que vous placez juste devant le paragraphe
concerné (ou un simple mot ou même caractère et n'oubliez pas le tag de fermeture
</P>).

<p style="color: green ; font-family: times, sans-serif ; ">Vous constatez que ce texte
est seul à présenter dans la page un paragraphe en vert. </p>
Résultat exemple 1
Vous constatez que ce texte est seul à présenter dans la page un paragraphe en vert
.
Exemple 2 : Code source dans BODY
<span style= "color: green ; font-family: Times, sans-serif ; font-size: 14p ; " >Vous
constatez </span> que ce texte n'est pas totalement <span style= "color: green ;
font-family: Times, sans-serif ; font-size: 14pt ; ">en vert. </span>
Résultat exemple 2
Vous constatez que ce texte n'est pas totalement en vert.
E. Les classes
Comment fonctionnent les "class" ?
Avec le sélecteur CLASS, vous pouviez définir plusieurs règles différentes à

l'aide des tags HTML. Ainsi au départ avec le même tag HTML "b" vous pouvez
déclarer un style : b {color: black ;}, et vous pouvez ensuite créer une "class" : b.red
{color: red ;}.
Dans le même genre vous pouvez continuer à ouvrir d'autres "class" comme
b.blue {color: blue ;} etc... mais si le besoin existe sinon vous partez pour la
réalisation d'une "usine à gaz".
C'est évident, les tags HTML disponibles sont limités en nombre. Si jusqu'à
maintenant vous les avez utilisé et avez ainsi réalisé une mise en page de base,
vous allez pouvoir contourner le problème et élargir la palette des possibilités, en
faisant appel à des "CLASS", "SPAN", "DIV" et "ID".

Vocabulaire
Il n'est pas certain que des puristes du CSS trouvent que ces définitions des
"classes" et "sous-classes" soient les meilleures et conformes mot à mot au W3C.
Mais n'ayez crainte les applications sont valables et, ce vocabulaire permet de mieux
comprendre la structure de la syntaxe et de faire le distinguo plus facilement.
p {font-family : arial, sans-serif ;} est une règle de style

p. times {font-family : times ;} est une classe
.olive {text-align:center ; color :olive ;} est une sous-classe.
Exemple : Code dans HEAD
<HEAD>
<TITLE> Nom du site </TITLE>
<STYLE TYPE="text/css">
body { font-family: arial, verdana, sans-serif ; font-size: 10pt ;
color: black ; background-color: #FFFFFF ; }
b { color: blue ; font-weight: bold ; }
h3.green { color: green ; }
.olive { font-family: arial, sans-serif ; color: olive ; font-size: 12pt ;
font-style: italic ; background-color: #FFFFFF ; }
</STYLE>
</HEAD>
Attention : il est impossible d'imbriquer des classes de style.
Exemple 1 : dans BODY du code HTML seulement (règle de style)
<b>Ici le texte est celui du sélecteur "b" qui donne la graisse épaisse. Vous
constatez aussi que le texte est en gras et en bleu. </b>
Résultat de cet exemple 1
Ici le texte est celui du sélecteur "b" qui donne la graisse épaisse. Vous
constatez aussi que le texte est en gras et en bleu.
Exemple 2 : dans BODY avec une "classe" CSS
<h3 class="green"> Cette ligne en vert avec "H3". Je tiens à vous préciser que j'ai
voulu voir ce qu'était le CSS et je suis tombé dans le "chaudron".</h3>

Cette ligne en vert avec "h3". Je tiens à vous préciser que j'ai voulu voir ce
qu'était le CSS et je suis tombé dans le "chaudron".
Exemple 3 : dans BODY avec une "sous-classe" CSS

<p class="olive">Dans cet exemple, le texte est celui de la sous-classe .olive donc
en couleur olive et en style italique avec un corps 12pt. </p>
Dans cet exemple, le texte est celui de la sous-classe .olive donc en couleur olive
et en style italique avec un corps 12pt.
NB :
CLASS est utilisable dans presque toutes les balises HTML sauf : BASE,
BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
F. Les identificateurs
La déclaration d'un ID en CSS est identique à la notion de class à une
exception près: on ne peut déclarer une seule fois un ID. On utilise souvent les ID
pour définir la structure générale du site (le haut, contenu, navigation...). On utilise un
# pour les id et un "." pour les classes.
Exemple :
#encart {
background-color: yellow;
<div id="encart">contenu de l'élément</div>
Les balises SPAN et DIV

La balise SPAN est utilisée en CSS pour modifier l'aspect d'une
zone limitée de données.

Des styles CSS il en existe d'innombrables, mais concernant le TEXTE il est

intéressant de pouvoir s'affranchir des règles contenues dans un ensemble
préétabli par la méthode interne (règles placées en source du fichier) ou par la
méthode externe (sur un fichier séparé).
Lorsque dans votre page pour certains cas particuliers vous avez besoin
d'utiliser rarement une déclaration, pour un caractère, un mot ou un groupe de mots,
alors l'emploi de la balise SPAN est l'application adéquate à utiliser.
Page suivante vous allez découvrir que pour appliquer cette

présentation non plus seulement à un mot ou un groupe de mots, mais à un ou
plusieurs paragraphes placés dans un texte, il suffira d'utiliser la balise DIV.
En résumé la balise SPAN ne sert pas à structurer votre document mais à

appliquer une mise en forme différente sur des éléments du texte. Vous pouvez si
besoin imbriquer des SPAN dans d'autres SPAN.
Source de cette page dans HEAD

</TITLE>
p.grand { font-size: 14pt ; color: blue ; }
.red { color: red ; font-size: 8pt ; }
.vert { background-color:#00FFCC ; }
</style>
</HEAD>
Outre ces facilités de mise en page avec la balise SPAN, il est parfois
agréable pour la présentation par exemple des titres dans une page (mais toujours
avec modération et une couleur ou deux au maximum) de créer de nouveaux effets
pour attirer l'attention du visiteur et agrémenter la présentation générale.
Exemple : Code avec SPAN dans BODY
Un accès satellite < span style=" background-color:#CCFFFF ; " > "uni

directionnel" </span> (uniquement en réception de données, pour l'upload, il fallait
recourir à un modem traditionnel, donc à sa ligne téléphonique),trop cher,< span
style= "background-color: yellow ; font-size: 12pt ; font-weight : bold ; " > trop
compliqué à installer, </span> débits pas meilleurs qu'avec une < span class=
"vert" >ligne téléphonique...</span>

Résultat exemple
Un accès satellite "uni directionnel" (uniquement en réception de données, pour

l'upload, il fallait recourir à un modem traditionnel, donc à sa ligne téléphonique),trop
cher, trop compliqué à installer, débits pas meilleurs qu'avec une ligne
téléphonique...
Analyse :
Ci-dessus deux mots sur fond bleu : background-color: #CCFFFF, ensuite

passage sur fond jaune : background-color: yellow, avec corps gras, en 12 pt, et au
final en vert avec la sous-classe "vert".
Première possibilité - Fond bleu vous avez utilisé SPAN STYLE dont vous avez
choisi suivant votre besoin la couleur de fond tout en conservant le reste des
déclarations de base du paragraphe "p".
Deuxième possibilité - Fond jaune, corps plus grand et en gras tout en respectant
encore les autres règles de "p".
Troisième possibilité - Comme il existe une sous-classe .vert {background-

color:#00FFCC;} dans les déclarations de cette page il suffit d'en profiter si besoin,
avec <span class= "vert";>
Exemple : Code 2 avec SPAN normal plus SPAN imbriqué, dans BODY
<span style=" color: blue ; "> Les balises spéciales <span style= " font-size : 16pt ;
font-weight : bold ; color : red ; " > SPAN et DIV </span> permettent de mettre en
forme des éléments (en ligne ou en bloc). </span>
Résultat exemple 2
Les balises spéciales SPAN et DIV permettent de mettre en forme des éléments (en
ligne ou en bloc).
Analyse :

Voici la possibilité d'imbriquer deux balises SPAN comme indiqué ci-dessus :

La première en bleu couvre l'ensemble de la ligne, alors que celle en marron
encadre les mots "SPAN et DIV" en rouge et de corps plus grand. Tout le monde
hérite pour le reste de l'élément parent "p".
La balise DIV est utilisée en CSS pour modifier l'aspect d’un

paragraphe.
Cette balise DIV est souvent associée avec "class" (et "ID") et se retrouve
souvent pour positionner un élément.
Si la balise SPAN s'appliquait pour une lettre, un mot ou quelques mots

seulement ici avec la balise DIV vous modifiez des paragraphes.
Exemple : Source dans HEAD de cette page
</TITLE>
.marge { margin-left: 75px ; font-style: italic ; }
.jaune {background-color: #FFFF00 ;}
.vert {background-color: #00FF00 ;}
.essai-texte { font-style: italic ; color: green ;}

.essai-grand { font-size: 16pt ; }
.essai-fond { background-color: #CCFF99 ;}
</style>
</HEAD >
Exemple1 : Code placé dans BODY
Utilisation des classes ou sous-classes
<div class="marge">Avec le choix de la sous-classe " .marge" vous

obtenez d'abord sa spécificité d'un écartement de 75px du
bord de la marge gauche (sera vu plus loin) et d'un texte en italique. Pour le reste il y
a héritage direct du parent "p"</div>
Résultat de l'exemple 1
Avec le choix de la sous-classe ".marge" vous obtenez d'abord sa spécificité d'un

écartement de 75px du bord de la marge gauche (sera vu plus loin) et d'un texte en
italique. Pour le reste il y a héritage direct du parent "p"
Exemple 2 : Autre code dans BODY
Utilisation de votre "style" personnel
<div style="font-family: verdana, times, sans-serif ; color: green ; font-size:

12pt ; text-decoration: underline ; background-color: #FFFFFF ;"> Ici vous ne
tenez plus compte des règles CSS mais appliquez un STYLE de votre choix
à un ou plusieurs paragraphes de votre page. De ce fait il n'y a plus notion
d'héritage et vous devez reprendre les déclarations conformes
à ce langage.</div>
Résultat de l'exemple 2
Ici vous ne tenez plus compte des règles CSS mais appliquez un STYLE de votre
choix à un ou plusieurs paragraphes de votre page. De ce fait il n'y a plus notion
d'héritage et vous devez reprendre les déclarations conformes à ce langage.
Il est possible de définir un ou plusieurs paragraphes qui prennent, outre les

styles habituels, une couleur de fond propre à faire ressortir le contenu à l'aide d'une
déclaration associée à DIV. Noter que pour rester en conformité avec les services de
validation du CSS il faut ajouter la déclaration "color:xxxx" qui comme toujours vient
suppléer les navigateurs anciens qui ne supporteraient pas les feuilles de style.
Exemple 3 : Code dans BODY
<DIV STYLE="font-family: arial, sans-serif ; background-color: yellow ; font-

size: 12pt ; color: black ; " >Il est possible de définir un ou plusieurs
paragraphes qui prennent, outre les styles habituels, une couleur de fond propre
à faire ressortir le contenu à l'aide d'une déclaration
associée à DIV.
<br>
<br>
Noter que pour rester en conformité avec les services de validation du CSS il
faut ajouter la déclaration "color:xxxx" qui comme toujours vient
suppléer les navigateurs anciens qui ne supporteraient pas les feuilles de
style.</DIV>
Résultat exemple 3

Il est possible de définir un ou plusieurs paragraphes qui prennent, outre les styles
habituels, une couleur de fond propre à faire ressortir le contenu à l'aide d'une
déclaration associée à DIV.
Noter que pour rester en conformité avec les services de validation du CSS il faut
ajouter la déclaration "color:xxxx" qui comme toujours vient suppléer les navigateurs
anciens qui ne supporteraient pas les feuilles de style.
Dans ce cas un peu particulier pour grouper les deux paragraphes distincts, il
faut remplacer les "p" d'interligne par deux sauts de ligne "br". Vous utilisez dans cet
exemple un corps de 12pt et de ce fait vous n'héritez pas de "p" et devez reprendre
les familles. Si par contre vous aviez choisi de conserver le corps de 10pt (valeur de
"p") vous pouviez directement appliquer <p style="background-color: yellow ; font-
size: 12pt ; color:black ; " > xxxxxxxxxxxx </p>. En essayant un petit exercice tout va
vous sembler évident.
Exemple 3 - Code SPAN dans BODY d'après les sous-classes de HEAD
Couleur de fond sur une partie de texte seulement
Code dans BODY
<P align="center"><b><span class="jaune">C'est jaune</span></b></P>

<P align="center"><b><span class="verte">C'est vert</span></b></P>
Résultats exemple 4
C'est jaune
C'est vert
Exemple 5 - Code dans BODY d'après les sous-classes de HEAD
Couleur de fond sur une ligne de texte seulement
Vous pouvez aussi arriver à un résultat presque semblable, et toujours avec

le même code CSS de départ placé dans HEAD, dont la couleur s'étend cette fois
sur la ligne entière.

<p class="jaune">c'est jaune</p>

<p class="vert"> c'est vert</p>
Résultat exemple 5
c'est jaune
c'est vert
II. COMPRENDRE ET CODER EN CSS
A. Les marges en CSS
Définition
Comme vous l'avez deviné, les marges permettent de définir l'espace entre les
éléments HTML (haut, gauche, bas et droite).
Syntaxe
margin-left: espace en pixels, pourcentage ou auto;
margin-right: espace en pixels, pourcentage ou auto;
margin-bottom: espace en pixels, pourcentage ou auto;

</style>
Vous avez 3 possibilités :
• Espace en pixels (exemple 10px)

• Pourcentage (70%)
• auto (réglage automatique)
Vous pouvez aussi déclarer vos marges comme cela :
margin: 10px 10px 10px 10px;
Les valeurs définissent l'espace entre les éléments HTML dans cet ordre :
1. haut
2. droite
3. bas
4. gauche
A savoir !
Si ne renseignez qu'une valeur, elle sera prise par défaut pour les autres espaces
entre les éléments HTML.
margin: ;
Si vous renseignez deux ou trois valeurs, elles seront la références pour les cotés
opposés.
margin: 10px 10px; /* 2 valeurs */
margin: 10px 10px 10px; /* 3 valeurs */
Vous pouvez définir des marges à zéro. Si vous ne définissez pas les marges, elles
prennent 0 comme valeur par défaut.
margin: -10px;
De nombreuses différences entre navigateurs résultent de problèmes de marges

définies différemment entre deux navigateurs.
Pour combattre cela, il suffit de les mettre à 0.
p {margin: 0;}

Attention Il ne faut pas mettre "px" si la valeur est zéro (Voir exemple ci-dessus)
Exemple concret :
L'exemple ci-dessous défini une marge de 20px à la balise BODY
body{
margin: 20px;
background: #eeeeee;
font-size: small;
font-family: "Tahoma", Arial, sans-serif;
text-align: left;
}
Tableau récapitulatif
Propriétés Utilisation Valeurs
Propriété raccourcie qui spécifie - Longueur

margin la valeur de la marge pour les - Pourcentage, en
quatre côtés à la fois.{ margin-: fonction de la dimension
2cm ; } de l'élément
margin-top
Valeur de la marge supérieure {
margin-right: 12.3% ; }
- en points (pt), cm, mm,
pixels (px)pouces (in) ...
margin-right Valeur de la marge droite - en %

margin- Valeur de la marge inférieure

bottom
margin-left
Valeur de la marge gauche
B. Le Padding en CSS
Définition
Le "Padding", c'est la distance entre le bord d'un élément HTML et son
contenu
Héritage Il n'y pas de notion d'héritage pour les marges.
Syntaxe
padding-left: espace en pixels ou pourcentage;
padding-right: espace en pixels ou pourcentage;
padding-bottom: espace en pixels ou pourcentage;
</style>
Vous avez 2 possibilités :

• Espace en pixels (exemple 10px)

• Pourcentage (70%)
Vous pouvez aussi déclarer vos marges comme cela :
padding: 10px 10px 10px 10px;
Les valeurs définissent l'espace entre les éléments HTML dans cet ordre :
1. haut
2. droite
3. bas
4. gauche
A savoir !
Si ne renseignez qu'une valeur, elle sera prise par défaut pour les autres espaces
entre les éléments HTML
padding: 10px;
Si vous renseignez deux ou trois valeurs, elles seront la références pour les cotés
opposés.
padding: 10px 10px; /* 2 valeurs */
padding: 10px 10px 10px; /* 3 valeurs */
Vous pouvez définir des marges à zéro. Si vous ne définissez pas les marges, elles
prennent 0 comme valeur par défaut.
padding: -10px;
Attention : Il ne faut pas mettre "px" si la valeur est zéro (Voir exemple ci-dessus)
Exemple concret 1 :
L'exemple ci-dessous défini une marge de 20px à la balise "container"
#container{
margin: 20px;
background: #eeeeee;
<span class="greenboldtext">padding: 30px;</span>
font-size: small;
font-family: "Tahoma", Arial, sans-serif;
text-align: left;
Propriété raccourcie qui spécifie la

padding
valeur de la marge interne pour les
quatre côtés à la fois.
padding-top Valeur de la marge supérieure {

padding-top: 15px ; }
- En points, pouces ,
padding- en cm, en pixels...
right
Valeur de la marge droite
- Pourcentage
padding-
bottom
Valeur de la marge inférieure
padding-left
Valeur de la marge gauche
C. Mettre en forme un texte en CSS

En CSS, est bien pratique de mettre en forme un contenu et le définir une
seule fois dans sa feuille de style.
• color: Gestion de la couleur du texte

• letter-spacing: Espace entre les lettres

• text-align: Alignement d'un texte
• text-decoration: Habillement d'un texte
Couleur
Vous pouvez fixer la couleur d'un texte comme suivant :
color: valeur;
</style>
Les différentes valeurs sont :
• Nom de la couleur - exemple:(red, black...)
• Nombre hexadécimal - exemple:(#ff0000, #000000)
• Code RGB - exemple:(rgb(255, 0, 0), rgb(0, 0, 0))
Voici un texte en bleu

.bleutext { color: #336699; }
<span class="bleutext">Voici un texte en bleu</span>
Espace entre les lettres

Vous pouvez ajuster les espaces entre les lettres dans un texte. Vous
pouvez mettre une valeur négative.
letter-spacing: valeur;
Les valeurs possibles sont :
• normal
• une valeur en px
Exemple
Voici des lettres espacées de 5px

.espace5px{ letter-spacing: 5px; }
<span class="espace5px">Voici des lettres espacées de 5px</span>

Alignement d'un texte

Vous pouvez ajuster la position d'un texte
text-align: valeur;
Les valeurs possibles sont :
• Gauche
• droite
• centre
• justifié
Autres propriétés
Texte ou première lettre en - capitalize

majuscules ou en - uppercase
text-transform
minuscules h3 { text- - lowercase
tranform: uppercase } - none
- none (aucun)
Formatage de texte :
- underline (souligné)
Text- souligner, surligner, barrer,
- overline (surligné)
decoration clignotement ... p.souligne {
- line-through (barré)
text-decoration: underline
- blink (clignotant) (non
}
reconnu par IE)
Pour créer un effet d'ombre Suivant les valeurs

text-shadow
sur un texte h3 { text- numériques
shadow; 2px 4px red; } (pour mémoire)
Définit l'espacement entre - valeur relative : em, ex, px

letter-spacing les lettres, chiffres ou signes - valeur absolue : mm, cm,
body { letter-spacing: pt, ptt, pc, in
0.3em; } - en poucentage %
word-spacing Définit l'espacement entre - valeur relative : em, ex, px

les mots d'un texte en + ou - - valeur absolue : mm, cm,

body { word-spacing: 1em; pt, ptt, pc, in
} - en poucentage %
tag de base à associer, pour spécifier les propriétés

color
suivantes
Couleur du texte h4 {color:

blue}
-en code langue anglaise
color texte h4 {color: #ff0000;}
-en code hexadécimal
voir page 07a h4 {color: rgb(0,0,255) ; }
-en code rgb 16 bits
h4 {color:
rgb(0%,0%,100%) ;}
D. Gestion des différentes polices
Introduction
La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables
en CSS.
• font-family: Famille de police

• font-size: Taille de votre police de caractère
• font-style: Gras, italique, oblique...
• font-variant: Variante de police
• font-weight: Taille de la police
A savoir Dans ce chapitre, la notion d'héritage est appliquée. Les noms de

familles contenant des espaces doivent être mis entre guillemets:
font-family: "Trebuchet MS", Verdana, Geneva, Arial;
Famille de police
Il est très utile de fixer avec le CSS la police de caractère.
font-family: Verdana, sans-serif;
Deux valeurs possibles :
• Nom de la famille

• Famille généric
Si vous mettrez un nom de famille comme "verdana", c'est bien de mettre

d'autre police de caractère dans l'ordre de votre préférence.
En effet, si la police que vous souhaitez pour votre site s'affiche correctement
si votre ordinateur, elle peut ne pas être présente sur un autre ordinateur.
D'ou l'intérêt d'en mettre d'autres.
Taille de votre police de caractère

Vous pouvez aussi définir la taille de votre texte.
font-size: valeur;
Valeurs possibles (en anglais):
• xx-large
• x-large
• larger
• large
• medium
• small
• smaller
• x-small
• xx-small
• length
• % (pourcentage)
Gras, italique, oblique...

Vous pouvez définir de nombreuses choses grâce au CSS: Gras, italique,
oblique...
font-style:valeur ;
Valeurs possibles :
• normal
• itailc (italique)
• oblique

Texte en italique.
.italic_exemple{ font-style: italic; }

<div class="italic_exemple">Texte en italique.</div>
Exemple :
Texte en italique.
Texte oblique.
Variante de police
Cette option d'afficher en petites capitales, peut vous être utile pour réaliser
des titres ou sous-titres mais son utilité est vite limitée et sa répétition peut devenir
pénible pour le visiteur.
font-variant: valeur;
Valeurs possibles :
• normal
• small-caps
VOICI UN TITRE EN PETITES MAJUSCULES
.small-caps { font-variant: small-caps ;}

<p class="small-caps">Voici un titre en petites majuscules</p>
Taille de la police
Vous pouvez contrôler la taille de votre texte :
font-weight: valeur;
Valeurs possibles :
• lighter
• normal

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder
Tag de base à
associer, pour spécifier
font
les propriétés
suivantes
Familles de polices
usuelles. Toujours noms de famille
font- utiliser au moins en fin : arial, verdana,helvetica, "comic sans
family de déclaration une MS", etc...
police de la famille famille générique : serif, sans-serif,
générique h1 { font- cursive, fantasy, monospace
family: verdana; }
italic est la normale ou normal

font-style
sinon oblique h1 { italic
font-style: italic; } oblique
font- Affichage en petites

normal
variant majuscules p { font-
small-caps
variant: small-caps; }
font- Poids de la police qui normal

weight détermine l'épaisseur bold

des caractères en plus bolder
ou moins gras p { font- lighter
weight: bold; } 100|200|300|400|500|600|700|800|900|
(multiples de 100) avec 400 pour
"normal" et 700 pour "bold"
bolderet lighter augmentent ou

diminuent le poids : exemple, de 100 à
200 (bolder) ou de 500 à 400 (lighter)
Taille absolue
xx-small
x-small
small
medium
large
Définit la taille de la x-large
police de quatre xx-large
manières possibles : Valeur numérique
font-size taille absolue, taille relative : px, em et ex
relative, longueur ou absolues : pt, pc, mm, cm, in
pourcentage p { font- Taille relative
size: 14pt; } h2 { font- smaller
size: 24px; } larger (par rapport au style parent)
Longueur
définit la taille par rapport à la largeur
d'un em, pc, pt...
En pourcentage
spécifie une taille de police absolue
par rapport à celle de l'élément parent.
ultra-condensed
extra-condensed
font- condensed
Etendue de la chasse
stretch semi-condensed
des mots p { font-
normal
stretch: expanded; }
expanded
extra-expanded
ulta-expanded

E. Ancres, Liens et Pseudo Classes

Les pseudos classes en css permettent de définir l'apparence de certain élément
contenu dans une classe.
• link: Couleur des liens
• Anchor: Gestion des encres...
• pseudo-class: les Pseudo Classes
Gestion des la couleur d'un lien

Voici comment choisir l'apparence de vos liens sur votre site :
a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #FF0000;}
a:focus {color: #000000;}
a:active {color: #009900;}
Maintenant, explication, un par un:
La première ligne définie la couleur du lien si aucun évènement intervient.
La deuxième définie la couleur du lien si l'internaute a déjà cliqué sur le lien.
a:hover {color: #FF0000;}
La troisième définie la couleur du lien en cas de survol avec la souris (ici en rouge)
Le quatrième presque identique au précédent, couvre le cas ou l'internaute n'utilise

pas de souris mais plutôt une touche de son clavier. (Il possible de naviguer sur un
site avec le clavier si le webmaster le permet)

Le dernier définie la couleur si le lien est cliquée. Attention Vous devez déclarer
"a:link and a:visited" avant de déclarer "a:hover" pour un bon fonctionnent
a:hover {color: #333333;}
Gestion de la couleur d’une ancre

Une ancre, c'est un lien mais qui pointe vers une partie de la page sur
laquelle l'internaute se trouve (concrètement il n'y a pas de rechargement de la page
lors du clique).
les Pseudo Classes

Vous pouvez définir des styles précis pour certaine partie de votre site
seulement (au centre par exemple).
selector:pseudo-class {property: value}
Disons que le centre de votre site soit nommée "content" et que tous les liens soit
selon ce code CSS.
#content a:link {color: #009900;}

#content a:visited {color: #999999;}
#content a:hover {color: #333333;}
#content a:focus {color: #333333;}
#content a:active {color: #009900;}
Dans cet exemple, nous avons défini des liens de différentes couleurs en fonction de
leurs positions sur la page.
Définissons une colonne :
#column a:link {color: #009900;}

#column a:visited {color: #999999;}
#column a:hover {color: #333333;}
#column a:focus {color: #333333;}
#column a:active {color: #009900;}
Bien sûr, le nom "column" c'est vous qui le définissez (ici c'est colonne en
Anglais)
Il est possible de faire la même action en déclarant une class plutôt d'un ID
a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: #333333;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}
A travers cet exemple, il faut ajouter une classe comme suivant :
<a href="" class="column" >texte ici</a>
Une autre façon plus simple consiste à écrire le code suivant :
.column a:link {color: #009900;}
.column a:visited {color: #999999;}
.column a:hover {color: #333333;}
.column a:focus {color: #333333;}
.column a:active {color: #009900;}
Puis dans le code HTML :

<div class="column"><br><a href="" title="">some link text</a><br></div>
F. Couleur de fond de la page
Pour définir une valeur globale

background idem que color texte
body {background: white; }
background- Définit la couleur de fond du

- en anglais
color document h2 { background-
- en numérique
color: #ffffcc ;}
- jpg
background- Spécifie une image de fond
- gif
image body { background-image:
- npg : pas encore accepté
tigre.jpg"; }
par tout les outils.
Définit la façon de répéter - repeat

background-
l'image de fond body { - no-repeat
repeat
background-repeat: no- - repeat-x
repeat; } - repeat-y
Spécifie si l'image de fond est

background- attachée au texte de premier
attachment plan ou si elle est fixée sur le - scroll - fixed
fond. body { background-
attachment: scroll; }
Permet de spécifier la position

background- de l'image de fond par rapport
- top ou center ou bottom -
position à l'angle supérieur gauche p {
center ou left ou right
background-position:
center; }
G. Les bordures en CSS

border Raccourci vers les propriétés de

bordure { border: solid ; }
border-top Valeur de la bordure supérieure {

border-top: 12px ; }
-unités de longueur,
Valeur de la bordure de droite {
border-right
margin-right: 5% ; }
- pourcentage
border- Valeur de la bordure inférieure {

bottom border-bottom: 1cm ; }
Valeur de la bordure de gauche{

border-left
margin-right: 12mm ; }
border-width Raccourci pour les propriétés

d'épaisseur de la bordure
- thin
border-top- - medium
Epaisseur de la bordure supérieure
width - thick
{ border-top-width: 3mm ; }
border-right- Epaisseur de la bordure droite {

width border-right-width: 3mm ; } - points (pt),
- pouces (in),
border- Epaisseur de la bordure inférieure{ - en cm,
bottom-width border-bottom-width: 3mm ; } - en pixels (px),...
- ou en %
border-left- Epaisseur de la bordure gauche {
width border-left-width: 3mm ; }
Raccourci pour les styles de la

border-style
bordure - dotted,
{ border-style: solid thick ; } - dashed,
- solid,
border-top-
Style de la bordure supérieure { - double,
style - groove,
border-top-style: solid ; }
- ridge,

border-right- Style de la bordure droite { border- - inset,

style right-style: solid ; } - outset
border- Style de la bordure inférieure {

bottom-style border-bottom-style: solid ; }
border-left- Style de la bordure gauche {

style border-left-style: solid ; }
Raccourci pour la couleur de la

border-color
bordure { border-color: red green
blue yellow ; }
border-top-
Couleur de la bordure supérieure {
color
border-top-color: blue ; } - hexadécimal,
- RGB,
border-right- Couleur de la bordure droite {
color border-right-color: #00FFBB ; }
- en anglais
border- Couleur de la bordure inférieure {

bottom-color border-bottom-color: tellow ; }
border-left- Couleur de la bordure gauche {

color border-left-color: green ; }
H. Ordre & Listes désordonnées

Vous pouvez définir une apparence pour vos liste (balise HTML <li> et </li>
• list-style-image: Liste avec une image

• list_style_position: Position de votre liste
• list_style_type: Apparence de la liste
Image devant la liste

Vous pouvez utiliser une image devant une liste ordonnées ou non grâce à la
propriété : list-style

list-style-image: url(path_to_image.gif, jpg or png);

< /style>
A savoir Si vous utiliser une image, vous pouvez utiliser la propriété "list-style-type"
aussi car cela permet de désactiver l’image en cas de besoin.
liste 1
liste 2
liste 3
ul {
padding: 10px 0 15px 20px;
margin:0;
}
li {
margin-bottom:5px;
list-style-image: URL(themes/default/images/star.png);
color: #3B6EBF;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>list 3</li>
</ul>
Position de la liste
Vous pouvez aussi contrôler la position d'un liste grâce à la propriété : list-
style-position
list-style-position: valeur;
Valeurs possibles :
• inside
• outside
• inherit

Effet sur une liste

Vous pouvez mettre des effets grâce au CSS avec la propriété : list-style-
type . list-style-type: valeur;
Valeurs possibles :
• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none
list-style Propriété raccourcie qui spécifie la - (list-style-type)

- (list-style-position)
valeur définie.
- (list-style-image)
- disc,
list-style-type
Valeurs listes non numérotées - circle,
- square,
list-style-type : square
- none
decimal | lower-roman |
upper-roman | lower-
alpha | upper-alpha |
decimal-leading-zero |
Valeurs listes numérotées et lower-latin | upper-latin |
list-style-type lower-greek | hebrew |
alphabétiques
armenian | georgian |
list-style-type : decimal cjk-ideographic |
hiragana | katakana |
hiragana-iroha |
katakana-iroha.

list-style-
- outside
position En retrait ou pas
- inside
list-style-position: outside
- ajouter pour les

list-style-
navigateurs ignorant les
image Image remplace puce
images la propriété
list-style-image: url ( " image.gif " )
"font-style-type: circle"
I. Définition des Largeur et Hauteur en CSS

Hauteur, largeur, le css vous permet de définir ses paramètres importants.
• height : Hauteur
o line-height: Hauteur d'une ligne
o max-height : Hauteur maxium
o min-height Hauteur minimum
• width : Largeur
o max-width : Largeur maximum
o min-width : minimum
• A savoir
Héritage Il n'y pas de notion d'héritage pour les marges.
Hauteur
Vous pouvez définir la hauteur d'un élément avec la propriété : height
height: valeur;
Valeurs possibles:
• auto
• Valeurs en px
• pourcentage

Voici un exemple avec 30px
.feuille {height:30px; border-width:1; }
<span class="feuille">Voici un exemple avec 30px</span>
Hauteur d'une ligne

Vous pouvez définir la hauteur d'une ligne avec la propriété : line-height
line-height: valeur;
Valeurs possibles:
• normal
• nombre
• Valeurs en px
• pourcentage
Hauteur maximum
Vous pouvez définir la hauteur maximum d'une ligne avec la propriété : max-
height
max-height: valeur;
Valeurs possibles:
• none (rien)
• Valeurs en px
• percentage
Hauteur minimum
Vous pouvez définir la hauteur minimum d'un élément avec la propriété :
min-height
min-height: valeur;
Valeurs possibles:

• length
• percentage
Largeur
Vous pouvez définir la largeur d'un élément avec la propriété : width .
width: valeur;
Valeurs possibles:
• auto
• Valeurs en px
• pourcentage
Largeur Max
Vous pouvez définir la largeur maximum d'une ligne avec la propriété :max-
width.
max-width: valeur;
Valeurs possibles:
• none
• Valeurs en px
• pourcentage
Largeur Min
Vous pouvez définir la largeur minimum d'un élément avec la propriété : min-
width
min-width: valeur;
Valeurs possibles:
• length
• percentage
Une hauteur plus petite que son contenu

Si le conteneur a une hauteur (height) plus petite que son contenu, sous
Internet Explorer le contenu agrandit la hauteur, alors que Netscape / FireFox le
contenu sort de la balise mais le conteneur est à la bonne taille.
Exemple : Code CSS :
#conteneur{
width:200px;
height:50px;
border:1px solid #000000;
.contenu{
background-color:red;
margin:0 0 50px 0;
Code HTML :
<div id="conteneur">
<div class="contenu">
Sous IE, j'agrandis mon parent
</div>
</div>

Dans le cas où la hauteur du conteneur (parent) est véritablement plus petite

que son contenu vous devez spécifier au parent la propriété overflow:hidden.
Dans le cas où vous voulez que la hauteur du parent s'adapte au contenu,

vous devez spécifier au parent la propriété height:auto.
J. Classification en CSS
Les propriétés clear et clip permettent la gestion d'éléments flottants.
• Clear:
o none
o left
o both
o left
• Clip
• Cureur: Apparence du curseur
• display : Gestion d'affichage
• float : gestion du flottement
• overflow
• visibility: Visibilité
• Z-Index
Clear
La propriété "clear" va être utilisée pour définir si un élément doit se trouver
sur la même bande horizontale qu’un élément flottant.
On peut donc écrire que cette propriété indique de quelle manière le texte va être
placé par rapport à une boîte flottante précédente.

clear: valeur;
Valeurs possibles:
• none (rien)
• both (les deux)
• left (gauche)
• right (droite)
Allons plus loin dans les explications :
Valeur "None" : Avec la propriété "clear: none;" rien n'est affecté par rapport aux
éléments flottants et cette propriété n'influence pas le positionnement en cours.
Both : Avec la propriété "clear: both;" la boîte générée va se déplacer sous chacune
des boîtes flottantes qui précèdent dans le code source.
Left : La propriété "clear: Left;" va placer l'élément en bas juste à droite de celui qui le
précède dans le code source.
Right : A l'inverse du précédent, La propriété "clear: right;" va placer l'élément en bas

juste à gauche de celui qui le précède dans le code source.
Clip
Vous pouvez contrôler la visibilé des éléments avec la propriété : clip
clip: valeur;
Valeurs possibles:
• auto
• shape
Souvent, "shape est reconnu par le clip rect (rectangle)
clip: rect(10px, 10px, 10px, 10px);
.imageclip { position:absolute ; width: 200px ; clip: rect (0px, 70px, 200px, 0px) ; }
<div class= "imageclip"><img src= "images/w3c.gif"></div>
Curseur
Vous pouvez définir l'apparence de votre curseur grâce à la propriété :cursor

cursor: valeur;
Valeurs possibles:
• auto
• crosshair
• default
• help
• move
• pointer
• text
• url
• wait
• e-resize
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• s-resize
• w-resize
K. Affichage
Vous avez le contrôle des éléments à afficher ou non avec la propriété :
display
display: valeur;
Valeurs possibles:
• block
• inline
• list-item
• none

Flottement
Cette propriété "float" définit le flottement d'une boîte à gauche, à droite ou

pas du tout.
On peut l'appliquer à tous les éléments générant des boîtes sauf si elles sont en
position absolue.
float: valeur;
Valeurs possibles:
• left
• right
• none
Overflow
La propriété de feuille de style css overflow permet de gérer les

dépassements de blocs (calque, champ formulaire...).
overflow: valeur;
Valeurs possibles:
• auto
• hidden
• visible
• scroll
Comme vous pouvez voir, avec cette propriété vous pouvez imiter une iframe. Ce
box est définie en "auto" Signifiant que si le contenu de l'élément dépasse les bornes
il devrait ajouter un scrollbar.
#overflow_box { width:200px; height:200px; border-top: 1px solid #eee; border-left:

1px solid #eee; border-bottom: 1px solid #eee; padding: 10px; overflow: auto;}
<div id="overflow_box">Contents</div>
Visibilité
Vous pouvez rendre un élément visible ou pas grâce à la propriété : visibility
visibility: valeur;
Valeurs possibles:
• hidden
• visible
Z-Index
La propriété de feuille de style css z-index permet de spécifier la position

d'empilement d'un bloc par rapport aux autres (notion de profondeur).
z-index: valeur;
Valeurs possibles:
• auto
• nombre
L. Positionnement
Propriété : Position
La propriété sert à définir la position des éléments dans une page HTML
Héritage Il n'y pas de notion d'héritage pour les marges La propriété de feuille de
style position css est généralement utilisée pour la création de calques (Layer).
position: valeur;
Valeurs possibles:
• static
• relative
• absolute
• fixed
La propriété de feuille de style position css est généralement utilisée pour la création
de calques (Layer).
Valeurs possibles:

• top
• left
• right
• bottom
position: absolute; top: 10px; right: 10px;
M. Pseudo Eléments
Les pseudos-éléments font référence à des parties de texte qui ne sont pas
forcément délimités par des balises HTML.
• La syntaxe
• Elements:
o first-line
o First Letter
La syntaxe
La syntaxe des pseudo éléments est un peu différente du CSS simple, mais
sans grand changement.
selector:pseudo-element
Les pseudos-éléments font référence à des parties de texte qui ne sont pas
forcément délimités par des balises HTML.
Par exemple le pseudo-élément : First-Letter désigne la première lettre d'un

paragraphe. Le nom des pseudo-éléments est précédé de deux-points (:).
Eléments
• first-line
• first-letter
First Line
Désigne la première lettre de tous les blocs de texte (titres H1 et autres,

paragraphes...)
Au lieu de :
p{
font-size: small;
}
On va mettre :
p: first-line {
font-size: medium; color: #ff0000;
}
Valeurs possibles :
• background
• clear
• color
• font
• letter-spacing
• line-height
• text-decoration
• text-transform
• vertical-align
• word-spacing
Comme vous pouvez le voir, les paragraphes sont exposés à une petite taille
de police, mais la première ligne est définie comme une taille moyenne et une
couleur rouge.
p.special:first-line {font-size: medium; color: #ff0000;}

<p class="special">the content</p>
First Letter
La pseudo-classe : first-letter sert à définir des lettrines ou caractères en

capitale ouvrant un paragraphe.
Les propriétés suivantes peuvent être affectées à la première lettre pseudo-

élément:
• background

• border
• clear
• color
• float
• font
• line-height
• margin
• padding
• text-decoration
• text-transform
• word-spacing
On obtient ainsi des effets qui sont agréables mais dont il ne faut pas abuser
du point de vue design de votre page. Attention Notez un " tous les navigateurs ne
supportent pas encore ce style. On l'appelle aussi "pseudo-style" ou "pseudo-
élément".
Voici quelques avantages de l'utilisation des feuilles CSS.
Les pages web se chargent plus rapidement et utilisent moins de bande

passante
Les feuilles de styles (téléchargée une seule fois puis stockée dans la
mémoire cache) simplifies le code HTML ce qui permet de consommer moins de
bande passante lors du chargement de la page.
Le CSS est compatible avec tous les navigateurs

Les sites web qui emploient correctement le CSS ont une apparence
similaire quelque soit le navigateur utilisé.
Le CSS peut être utilisé pour créer des pages web faciles à imprimer
Les images, les couleurs et les autres éléments difficiles à imprimer sont
alors éliminés et les pages imprimées plus facilement.
Le CSS permet à l'utilisateur de personnaliser une page web

Aujourd'hui, de nombreux sites web permettent à l'utilisateur de changer la
mise en page d'un site sans modifier le contenu.

Les feuilles de styles qui sont stockées en externe permettent à l'utilisateur

d'effectuer les changements requis par eux-mêmes.
Le CSS facilite le positionnement dans les moteurs de recherche

Le contenu est fourni en premier pour qu'il soit plus facilement "capturable"
par les spiders des moteurs.
Le CSS rend également le code HTML plus "propre" facilitant le travail des
robots d'indexation.
Le CSS facilite la portabilité du contenu

En employant le CSS, vous pouvez régler séparément les feuilles de style
pour différents médias. Cela vous donne donc une plus grande souplesse dans la
présentation de votre contenu.
Le CSS vous permet de modifier les caractéristiques des éléments d'un site
web en fonction de la nécessité de la situation. Conclusion Le CSS est créé pour
rendre les choses plus faciles pour votre site web mais également pour vous le
contrôle de différents éléments de votre site web.
Utiliser les avantages du CSS vous permettra d'obtenir des pages web plus
conviviales.
III. Conclusion
Le CSS définit principalement la structure et la présentation d'un contenu de

site web. Une seule feuille CSS peut contrôler la police, le positionnement, la
couleur, et le style des informations de tout un site. Plusieurs d’autres fonctionnalités
sont ajoutées avec la version 3 de ce langage (CSS3).

Le Css ESGIS 2014 2015

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Le Css ESGIS 2014 2015

Titre original :

Transféré par

Droits d'auteur :

- Les feuilles de styles (CSS) : Cascading Styles Sheets -- ESGIS 2014-2015 -

I. INTRODUCTION AUX FEUILLES DE STYLES CSS

• Apprendre les principes de base de développement de contenus Web grâce à

Vous connaissez certainement l'inconvénient majeur qui existe suite aux

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 1

Le CSS vous apporte ce "zeste" en imbriquant son langage

Pourquoi utiliser le CSS ?

• La structure et la présentation sont gérées séparément

Je souhaite le fond de mes pages en gris.

En CSS je vais mettre dans mon fichier CSS (exemple : style.css)

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 2

Si un jour je souhaite modifier la couleur de mes pages, avec le CSS, j'ai un

C. La syntaxe de base des CSS

Exemple: h1 {color: blue;}

On remarquera un point virgule (;) entre chaque propriétés.

Le "sélecteur" en place de "tag" (balise) du code pur HTML

La "déclaration" s'applique à l'ensemble

qui à son tour se compose de deux parties :

La "propriété" ici ...... h2 {font-size: 16pt ;}

La "valeur" ici ....... h2 {font-size: 16pt ;}

Le mot "bloc" s'applique à un ensemble précis qui pourrait se limiter à

Les "blancs" sont permis : h2{font-size:16pt;} -ou- h2 { font-size: 16pt; }

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 3

D. Lien entre HTML et CSS

- Internal: Dans la page HTML

- External: Dans un fichier indépendant

- Dans l'élément HTML lui-même

Dans le code HTML de la page

Dans un fichier indépendant

Possibilité n°1 - La balise Link :

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 4

Dans un fichier indépendant type style.css c'est-à-dire un fichier séparé

html - head - title - meta - script - base - basefont

Possibilité n°2 - La règle @import :

MÉTHODE link ou @import ?

En pratique, le résultat est exactement le même (après avoir testé sur

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 5

Par conséquent, en important sa feuille de style avec @import, les styles

Quel intérêt ? Tout simplement de permettre aux utilisateurs de ces

Dans la balise HTML

Cette définition se fait à la demande et s'applique à un ou plusieurs mots ou

A un tag HTML vous appliquez directement des paramètres CSS qui se

html - head - title - meta - script - base - basefont

On appelle parfois cette déclaration : "style à la volée" ou encore "mise

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 6

Exemple 2 : Code source dans BODY

Vous constatez que ce texte n'est pas totalement en vert.

Avec le sélecteur CLASS, vous pouviez définir plusieurs règles différentes à

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 7

p {font-family : arial, sans-serif ;} est une règle de style

Exemple : Code dans HEAD

Attention : il est impossible d'imbriquer des classes de style.

Exemple 1 : dans BODY du code HTML seulement (règle de style)

Résultat de cet exemple 1

Exemple 2 : dans BODY avec une "classe" CSS

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 8

Résultat de cet exemple 2

Exemple 3 : dans BODY avec une "sous-classe" CSS

Résultat de cet exemple 3

<div id="encart">contenu de l'élément</div>

Les balises SPAN et DIV

-AHOUANDJINOU Juste Wilfried (Ing Informatique) - justodewill@gmail.com 9

Des styles CSS il en existe d'innombrables, mais concernant le TEXTE il est

Page suivante vous allez découvrir que pour appliquer cette

En résumé la balise SPAN ne sert pas à structurer votre document mais à

<div class="marge">Avec le choix de la sous-classe " .marge" vous