Université de Carthage

Ecole Supérieure de la Statistique et de l’Analyse de l’Information

Les bases du CSS

o Syntaxe générale :

balise1
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise2
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise3
{
propriete: valeur;
}

o Taille du texte : font-size


En pixels : c'est une façon très précise d'indiquer la taille du texte. C'est à vous de
dire combien de pixels exactement doit faire le texte. Pour avoir un texte de 16
pixels de hauteur, vous devez écrire : font-size:16px;
 En donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très
gros", "petit", "minuscule". Voici la liste des différentes valeurs que vous pouvez
mettre ainsi que leur signification :
o xx-small : minuscule
o x-small : très petit
o small : petit
o large : grand
o x-large : très grand
o xx-large : euh... gigantesque
Exemple : Code CSS
.minuscule
{
font-size: xx-small;
}
.trespetit
{

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 1

font-size: x-small;
}
.petit
{
font-size: small;
}
.moyen
{
font-size: medium;
}
.grand
{
font-size: large;
}
.tresgrand
{
font-size: x-large;
}
.supermegagigatresgrand
{
font-size: xx-large;
}

 En em : c'est une autre façon d'indiquer de manière relative la taille du texte. On doit
indiquer la taille du texte par rapport à la taille normale de la police. Je m'explique : "1em"
signifie "Taille normale". Si vous mettez un nombre supérieur (généralement un nombre
décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De même pour
réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
Exemple : code CSS
.petit_em
{
font-size: 0.7em;
}
.grand_em
{
font-size: 1.3em;
}

 En pourcentage : Si vous indiquez "100%", le texte aura une taille "normale". Si vous
mettez "130%", le texte aura une taille correspondant à 130% de la taille normale.

o La police : font-family
La propriété CSS qui permet d'indiquer la police est font-family. Vous devez indiquer le nom de
la police comme ceci :
font-family: police;

Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez
donc utiliser sans crainte :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 2

Verdana

Exemple :

h1
{
font-family: "Arial Black", Arial, Verdana, serif; /* On essaie
d'avoir Arial Black en priorité */
}
p{
/* La police Comic Sans MS est agréable à lire pour les
paragraphes je trouve */
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}

o Alignement :
 Alignement simple :
Le langage CSS nous permet de faire tous les alignements que l'on connaît : à gauche, centré, à
droite et justifié.
On utilise la propriété text-align, et on indique l'alignement désiré :
 left : le texte sera aligné à gauche (c'est le réglage par défaut).
 center : le texte sera centré.
 right : le texte sera aligné à droite.
 justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute
la largeur possible sans laisser d'espace blanc à la fin des lignes.

Exemple : code CSS

h1
{
text-align: center; /* Pour centrer le titre */
font-family: "Arial Black", Arial, Verdana, serif; /* Un titre en
Arial Black c'est mieux :o;) */
}
blockquote
{
text-align: justify; /* La citation sera justifiée */
}
.signature
{
text-align: right; /* Pour aligner à droite ma signature */
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
font-size: 80%;
}

 L’indentation : propriété « text-indent »

On doit indiquer quelle est la taille du retrait : on peut le faire en pixels, en centimètres, en
millimètres...
Exemple : code CSS
P
{
text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
text-align: justify; /* Ils seront justifiés */

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 3

font-size: large;
}

o Les effets de style

 Mettre en italique : font-style

Concrètement, pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs
:
 italic : le texte sera mis en italique.
 oblique : le texte sera mis en italique.
 normal : le texte sera normal (par défaut).

 Mettre en gras : font-weight

La propriété CSS pour mettre en gras est font-weight, et prend les valeurs suivantes :
 bold : le texte sera en gras.
 normal : le texte sera écrit normalement (par défaut).

 Les majuscules en CSS

Le CSS permet d'appliquer des effets très intéressants sur du texte, en modifiant
automatiquement les majuscules.
2 propriétés CSS travaillent sur les majuscules :
1- La propriété font-variant, qui prend uniquement 2 valeurs différentes :
o small-caps : le texte sera écrit en petites capitales.
o normal : le texte sera écrit normalement (par défaut).
Exemple : Code : CSS
p{
font-variant: small-caps;
}

2- La propriété text-transform. Elle peut prendre ces valeurs :

 uppercase : tout le texte sera écrit en majuscules.
 lowercase : tout le texte sera en minuscules.
 capitalize : la première lettre de chaque mot sera en majuscule.
 none : pas de transformation (par défaut).

 Un peu de déco : text-decoration

Cette propriété permet, entre autres, de souligner le texte. Voici les différentes valeurs qu'elle peut
prendre :
 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.
 blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer ni sous
Google Chrome. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont
Mozilla Firefox.
 none : normal (par défaut).

Exemple : Code CSS

h1

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 4

{
text-align: center;
font-family: "Arial Black", Arial, "Times New Roman", serif;
text-decoration: blink; /* Le titre sera clignotant ! (ne
fonctionne pas sous Internet Explorer) */
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}

Code : HTML
<h1>A ne pas manquer !</h1>
<p>La propriété CSS <em>text-decoration</em> permet de décorer un
peu son texte :<br />
<span class="souligne">en le soulignant</span>...<br />
<span class="barre">en le barrant</span>...<br />
...ou encore <span class="ligne_dessus">en mettant une ligne au dessus
</span>.
</p>

o Les couleurs : color

Exemple : code CSS
p
{ color : red ;
/* color:#FFFFFF;*/
}

o Le Fond
Contrairement à ce qu'on pourrait croire, le fond ne désigne pas forcément le fond de toute une
page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore
à certains mots d'un paragraphe.
Il faut tout d'abord savoir qu'il existe 2 types de fonds :
 Les fonds comportant une couleur
 Les fonds comportant une image de fond

 La couleur de fond : background-color

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de
la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur,
l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui,
<body> correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on
changera la couleur de fond de la page web.

Exemple : Code CSS

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 5

body /* On travaille sur la balise body, donc sur TOUTE la page */
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}

 L’image de fond : background-image

Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcément à la page
entière, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on
doit lui mettre url("nom_de_l_image.png").
Exemple : Code CSS
body /* On travaille sur la balise body, donc sur TOUTE la page */
{
background-image: url(« fond.png »); /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}

Il existe 2 propriétés en rapport avec les images de fond :

La première d'entre elle est celle qui gère la répétition de l'image de fond. Cette propriété s'appelle
background-repeat et peut prendre ces valeurs :
 no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
 repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
 repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
 repeat : le fond sera répété (par défaut).
La deuxième propriété concerne la position de l'image de fond.
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété
n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète
pas).
Vous devez donner à background-position 2 valeurs en pixels pour indiquer la position du fond
par rapport au coin supérieur gauche de la page (ou du paragraphe si vous appliquez le fond à un
paragraphe). Ainsi, si vous tapez : background-position:30px 50px;
... votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi possible de
mettre ces valeurs en anglais :
 top : en haut.
 bottom : en bas.
 left : à gauche.
 center : centré.
 right : à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous
taperez :background-position: top right;

Exemple : Code CSS

body
{
background-image: url("../images/skieur.gif"); /* Le fond est l'image "skieur.gif" */
background-repeat: no-repeat; /* Le fond ne se répète pas */

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 6

background-position: top right; /* Le fond est aligné en haut à droite */
}
On peut combiner toutes ces propriétés dans la même propriété : background
Exemple : Code CSS
body
{
background : url("../images/skieur.gif") no-repeat top right;
}

o Les pseudo-formats

 Les liens

Par défaut, les liens s'affichent en bleu et sont soulignés. Supposons que vous ne vouliez pas du
soulignement, vous allez utiliser : text-decoration:none;
... ce qui aura pour effet d'annuler le soulignement. Vos liens ne seront alors plus soulignés.

Exemple : Code CSS

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red ; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique */
}

Nous pouvons modifier l'apparence des liens :

... lorsque le visiteur pointe dessus avec la souris.
... lorsque le visiteur clique dessus.
... lorsque le visiteur a sélectionné le lien.
... lorsque le visiteur a déjà vu la page.
 Au passage de la souris : (:hover)
Le premier pseudo-format s'appelle :hover. Comme tous les autres pseudo-formats il s’agit d’une
information que l'on rajoute après le nom de la balise (ou de la class) dans le CSS, comme ceci :

Exemple : Code CSS

a:hover
{
…
}
":hover" signifie "Dessus".
"a:hover" signifie donc : "Quand la souris est sur le lien" (quand on pointe dessus).

 Au moment du clic ( :active)

Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. Le lien
gardera cette apparence très peu de temps : juste pendant que vous cliquez avec le bouton de la
souris. En clair, ce n'est pas forcément toujours bien visible.

Exemple : Code CSS

a:active /* Quand le visiteur clique sur le lien */
{
background-color: #FFCC66;
}
a:hover /* Quand le visiteur pointe sur le lien */
{

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 7

text-decoration: underline;
color: green;
}
a /* Lien normal */
{
text-decoration: none;
color: red ;
font-style: italic;
}

 Quand la page a déjà été vue ( :visited)

Il est possible d'appliquer un style à un lien vers une page qui a déjà été vue. Par défaut, le
navigateur colore le lien en un violet.

Exemple : Code CSS

a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: line-through;
}
a:focus /* Quand le visiteur sélectionne le lien */
{
background-color: #FFCC66;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline;
color: green;
}
a /* Lien normal */
{
text-decoration: none;
color: red ;
font-style: italic;
}

 Première lettre et première ligne

1- La première lettre ( :first-letter)

On peut s'en servir pour écrire en gras et en plus gros la première lettre de tous les paragraphes
de votre page.

Exemple : Code CSS

p:first-letter /* La première lettre de chaque paragraphe */
{
font-weight: bold ; /* En gras */
font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
color: blue; /* En bleu */
}
2- La première ligne ( :first-line)
Un autre pseudo-format intéressant permet de modifier cette fois la première ligne. Il s'agit de
:first-line.
Appliqué aux paragraphes, il permet d'inciter à la lecture du texte. Par exemple, vous pourriez
automatiquement écrire en petites capitales la première ligne de chaque paragraphe, afin de les
rendre plus attrayants :
Exemple : Code CSS
p:first-line /* La première ligne de chaque paragraphe */
{

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 8

font-variant: small-caps; /* En petites capitales */
}

 Décorer vos listes (CSS)

 Retrait des listes
La première des propriétés permet d'indiquer si on veut que la liste soit mise en retrait ou non.
Cette propriété s'appelle list-style-position, et peut prendre 2 valeurs :
 inside : la liste n'est pas mise en retrait.
 outside : la liste est mise en retrait (par défaut).

Exemple : Code CSS

.pas_de_retrait
{
list-style-position: inside;
}
.retrait
{
list-style-position: outside;
}

Code HTML :
<p>Voici une liste avec retrait (par défaut) :</p>
<ul class="retrait">
<li>Liste<br />à puces</li>
<li>Ligne 1<br />Ligne 2</li>
<li>Vous pouvez voir<br />que le texte est décalé sur la droite</li>
</ul>
<p>Voici une liste sans retrait :</p>
<ul class="pas_de_retrait">
<li>Liste<br />à puces</li>
<li>Ligne 1<br />Ligne 2</li>
<li>Vous pouvez voir<br />que le texte n'est pas décalé sur la droite</li>
</ul>
 Représentation de la puce
Nettement plus intéressante, la propriété list-style-type vous permet de changer l'apparence de
la puce.
La propriété list-style-type peut prendre de nombreuses valeurs. Certaines d'entre elles
concernent uniquement les listes non ordonnées, d'autre concernent uniquement les listes
ordonnées :
Pour les listes non ordonnées (<ul>) :
 disc : un disque noir (par défaut).
 circle : un cercle.

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 9

  square : un carré.
 none : aucune puce ne sera utilisée.
Pour les listes ordonnées (<ol>), le choix est vaste :
 decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
 decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...).
 upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
 lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
 upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
 lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
 lower-greek : numérotation grecque.

 Changer l'image de la puce : list-style-image

La propriété list-style-image vous permet d'utiliser n'importe quelle image à la place d'une puce.
Vous devez lui indiquer comme valeur "url" suivi de l'adresse de l'image à utiliser.

Exemple : Code CSS

ul /* Ma liste aura des puces en forme de dossiers */
{
list-style-image: url("dossier.png");
}

 Les bordures

Le CSS vous offre un large choix de bordures pour décorer votre page. Pour border on peut
utiliser jusqu'à 3 valeurs pour modifier l'apparence de la bordure :
 La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme
2px), ou utilisez un des mots-clé suivants :
o thin : bordure fine
o medium : bordure moyenne
o thick : bordure épaisse
C'est le navigateur qui choisit le nombre de pixels qui correspond à thin, medium et thick. En
général, c'est à peu près pareil sur tous les navigateurs.
 La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom
de couleur ("black", "red"...), soit une valeur hexadécimale (#FF0000), soit une valeur rgb
(rgb(198, 212, 37))
 Le type de bordure : là, vous avez pas mal de choix. Votre bordure peut être un simple
trait, ou des pointillés, ou encore des tirets etc... Voici les différentes valeurs disponibles :
o none : pas de bordure (par défaut)
o solid : un trait simple.
o dotted : pointillés.
o dashed : tirets.
o double : bordure double.
o groove : en relief.
o ridge : effet 3D.
o inset : autre effet 3D (on a l'impression que le block forme un creux).
o outset : encore un autre effet 3D (on a l'impression que le block est surélevé).

Exemple : Code CSS

p{

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 10

width: 300px; /* Tous les paragraphes font 300px */
text-align: justify; /* Tous les paragraphes sont justifiés */
}
.rien
{
border: none;
}
.solid
{
border: 2px solid black;
}
.dotted
{
border: 2px dotted green;
}
.dashed
{
border: 2px dashed red ;
}
.double
{
border: 4px double maroon;
}
.groove
{
border: 4px groove teal;
}
.ridge
{
border: 4px ridge fuchsia;
}
.inset
{
border: 3px inset black;
}
.outset
{
border: 3px outset black;
}

 En haut, à droite, à gauche, en bas...

Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite),
vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces 4 propriétés :
o border-top : bordure en haut.
o border-bottom : bordure en bas.
o border-left : bordure à gauche.
o border-right : bordure à droite.
Exemple : Code CSS

h2
{
border-bottom: 2px solid black;
}
.haut_bas
{
border-top: 1px dashed red ;
border-bottom: 1px dashed red ;
}
.points
{

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 11

border-top: 3px dotted blue;
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 3px dotted blue;
}
.tres_solide
{
border-left: 6px solid black;
border-right: 6px solid gray;
}
Exemple 2 : Code CSS
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}

F. Chaker - Cours Programmation Web : Les bases du CSS (2011/2012) Page 12