Qu'est-ce que CSS?

CSS: Cascading Style Sheets

CSS : comment afficher les éléments HTML

Ajoutés à HTML 4.0 pour résoudre un problème

Les feuilles de style externes permettent d'économiser beaucoup de travail

Les feuilles de style externes sont stockées dans des fichiers CSS

1/33
 Feuilles de style pour résoudre un gros problème
HTML n'a jamais été destiné à contenir des balises pour le formatage d'un document.

HTML a été destiné à définir le contenu d'un document, comme:

<h1>Ceci est un titre</h1>

<p>Ceci est un paragraphe.</p>

Lorsque les balises comme <font>, et les attributs de couleur ont été ajoutées à la spécification
HTML 3.2, -> cauchemar pour les développeurs.

Processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

En HTML 4.0, la mise en forme peut être retiré du document HTML, et stockée dans un fichier
CSS séparé.

Tous les navigateurs prennent en charge CSS aujourd'hui.

CSS permet d'économiser beaucoup de travail!

2/33
 Syntaxe CSS
Une règle CSS comporte deux parties principales: un sélecteur et une ou plusieurs déclarations:
h1 {color:blue;font-size:12px}

Le sélecteur est normalement l'élément HTML que vous voulez mettre en forme.

La propriété est l'attribut de style que vous souhaitez modifier. Chaque propriété a une valeur.

3/33
 Commentaires en CSS
Les commentaires sont utilisés pour expliquer votre code, et peuvent vous aider lorsque vous
modifiez le code source à une date ultérieure. Les commentaires sont ignorés par les navigateurs.
Un commentaire commence par CSS "/*", et se termine par "*/", comme ceci:
/*Ceci est un commentaire*/
p
{
text-align:center;
/*Un autre comentaire*/
color:black;
font-family:arial;
}

4/33
 CSS id et class
En plus de définir un style pour un élément HTML, CSS vous permet de spécifier vos propres
sélecteurs appelés id et class.

Le sélecteur d'ID est utilisé pour spécifier un style pour un seul élément unique.
Le sélecteur d'ID utilise l'attribut id de l'élément HTML, et est définie par un "#".
La règle de style ci-dessous sera appliquée à l'élément avec un id = "para1":
#para1
{
text-align:center;
color:red;
}

Le sélecteur de classe est utilisé pour spécifier un style pour un groupe d'éléments. Contrairement
au sélecteur d'ID, le sélecteur de classe est le plus souvent utilisé sur plusieurs éléments.
Cela vous permet de définir un style particulier pour les éléments HTML avec la même classe.
Le sélecteur de classe utilise l'attribut HTML class, et est définie par un "."
Dans l'exemple ci-dessous, tous les éléments HTML avec class = "center" seront alignés au centre:
.center {text-align:center;}
p.center {text-align:center;}
td.center {text-align:center;}
5/33 ...
 Regroupement des sélecteurs
.texte {
margin-left: 0;
}
p {
margin-left: 0;
}
h1 {
margin-left: 0;
}
h2 {
margin-left: 0;
}

Sera équivalent à :
.texte, p, h1, h2 {
margin-left: 0;
}

6/33
 Regroupement des propriétés
p {
font-family: Arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 120%;
line-height: 140%;
}

peut se remplacer en :
p {
font : italic bold 120%/140% Arial, sans-serif;
}

7/33
 Autres sélecteurs hiérarchiques
Les normes CSS 2 et CSS 3 (actuellement en préparation) prévoient d’autres formes de sélection
hiérarchique. On peut ainsi ne désigner que le premier enfant d’un élément, ne pointer que des
éléments directement adjacents à un autre, etc.
Il est même possible de prendre en compte les attributs des éléments pour les sélectionner.
Motif Description
* n'importe quel élément.
e les éléments de type e
ef les éléments f descendants de e
e>f les élements f qui sont des fils de e
e:first-child les éléments e qui sont les premiers fils de leur parent
e:link, e:visited les éléments e s'ils sont les sources d'une ancre ou d'un hyperlien (pas encore visité ou visité)
e:active, e:hover, e:focus les éléments e suivant une action
e:lang(c) les éléments e dont la langue est c.
e+f les éléments f tel que l'élément frère qui précède est un élément e
e[foo] les éléments e avec un attribut "foo"
e[foo="warning"] les éléments e avec un attribut "foo" dont la valeur est "warning"
e[foo~="warning"] les éléments e avec un attribut "foo" dont l'une des valeurs est "warning"
les éléments e avec un attribut "foo" dont l'une des valeurs (séparé par un trait d'union) est
e[lang|="en"]
"en"
div.warning identique à div[class~="warning"]
e#myid l'élément e ayant pour id "myid"

8/33
 Trois façon d'insérer une feuille de style
Feuille de style externe
Une feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages.
Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site Web tout en
changeant un seul fichier.
Chaque page doit être liée à la feuille de style en utilisant la balise <link> à l'intérieur de la section
d'entêre:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

9/33
 Trois façon d'insérer une feuille de style
Feuille de style interne
Une feuille de style interne doit être utilisée quand un seul document a un style unique. Vous
définissez les styles internes dans la section head d'une page HTML, en utilisant la balise <style>,
comme ceci:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

10/33
 Trois façon d'insérer une feuille de style
Inline Styles
Utilisez cette méthode avec parcimonie!
Pour utiliser des styles inline vous utilisez l'attribut de style dans la balise considérée.
L'attribut style peut contenir n'importe quelle propriété CSS.
L'exemple qui suit montre comment changer la couleur et la marge de gauche d'un paragraphe:
<p style="color:sienna;margin-left:20px">Ceci est un paragraphe.</p>

11/33
 Plusieurs feuilles de style
Feuille de style externe
h3
{
color:red;
text-align:left;
font-size:8pt;
}

Feuille de style interne

h3
{
text-align:right;
font-size:20pt;
}

Alors une feuille contenant les deux définitions aura comme propriétés:
color:red;
text-align:right;
font-size:20pt;

12/33
 Plusieurs feuilles de style en cascade
Les styles peuvent être spécifiées à plusieurs endroits

A l'intérieur d'un élément HTML

Dans la section entête du document HTML
Dans un fichier externe

Remarque: Plusieurs feuilles de style externes peuvent être utilisées

Priorité:

1. Navigateur par défaut

2. Feuille de style externe
3. Feuille de style interne (section head)
4. Style en ligne

Note: Si le lien vers la feuille de style externe est placée après la feuille de style interne en HTML,
la feuille de style externe remplace la feuille interne.
Hack CSS: !important permet de définir une propriété de style qui sera obligatoirement utilisé.

13/33
 Toutes les propriétés de fond en CSS
Propriété Description Valeurs CSS (1 ou 2)
background-color
background-image
background fixe toutes les propriétés en une seule 1
background-repeat background-
attachment background-position
l'image est fixe ou bouge avec le reste de la
background-attachment scroll,fixed 1
page
color-rgb (eg. rgb(255,255,255))
color-hex(eg. #00ff00)
background-color couleur de fond d'un élément 1
color-name(eg. red,blue)
transparent
url(url)
background-image définit l'image de fond d'un élément 1
none
left top, left center, left bottom, right
top, right center, right bottom,
définit la position de départ d'une image de center top, center center, center
background-position 1
fond bottom
x% y%
xpos ypos
repeat
repeat-x
background-repeat définit la répétition de l'image 1
repeat-y
no-repeat

14/33
 Toutes les propriétés de texte en CSS
Propriété Description Valeurs CSS (1 ou 2)
color définit la couleur d'un texte couleur 1
direction définit l'orientation du texte ltr, rtl 2
normal
number
line-height définit la distance entre les lignes 1
length
%
augmenter ou diminuer l'espace entre les normal
letter-spacing 1
caractères length
text-align aligne le texte dans un élément left, right, center, justify 1
none, underline, overline,
text-decoration ajoute une décoration au texte 1
line-through, blink
retrait de la première ligne de texte dans un length
text-indent 1
élément %
none
text-shadow ombre d'un texte color
length
none, capitalize, uppercase,
text-transform contrôles des lettres dans un élément 1
lowercase
baseline, sub, super, top, text-top,
middle, bottom, text-bottom
vertical-align définit l'alignement vertical d'un élément 1
length
%
définit comment sont traités les espaces à
white-space normal, pre, nowrap 1
l'intérieur d'un élément
normal
word-spacing augmenter ou diminuer l'espace entre les mots 1
length

15/33
 Toutes les propriétés de fonte en CSS
Propriété Description Valeurs CSS (1 ou 2)
font-style, font-variant, font-weight,
définit toutes les propriétés de police en une font-size/line-height, font-family,
font 1
déclaration caption, icon, menu, message-box,
small-caption, status-bar,
family-name
font-family spécifie la famille de polices pour le texte 1
generic-family
xx-small, x-small, small, medium,
large, x-large, xx-large, smaller,
font-size spécifie la taille de la police du texte 1
larger, length
%
font-style indique le style de police pour le texte normal, italic, oblique 1
indique si un texte doit être affiché dans une
font-variant normal, small-caps 1
police small-caps
normal,bold, bolder, lighter
font-weight indique l'épaisseur d'une police 100, 200, 300, 400, 500, 600, 700, 1
800, 900

16/33
 Toutes les propriétés de liste en CSS
Propriété Description Valeurs CSS (1 ou 2)
list-style-type
définit toutes les propriétés d'une liste en une
list-style list-style-position 1
déclaration
list-style-image
spécifie une image comme marqueur d'élément url
list-style-image 1
de liste none
indique si le point de marqueurs liste doit
list-style-position apparaître à l'intérieur ou à l'extérieur du flux inside, outside 1
de contenu
none, disc, circle, square, decimal,
decimal-leading-zero, armenian,
list-style-type indique le type de marqueur georgian, lower-alpha, upper-alpha, 1
lower-greek, lower-latin, upper-
latin, lower-roman, upper-roman

17/33
 Boîtes en CSS
margin
border
padding
contenu

Marge externe (margin) : efface une zone autour de la frontière. La marge est complètement
transparente
Bordure (border) : Une frontière qui délimite la marge extérieure de la marge intérieure.La
bordure est affectée par la couleur de fond de la boîte
Marge interne (padding) : Efface une zone autour du contenu. La marge intérieure est affectée
par la couleur de fond de la boîte
Contenu : zone où le texte et les images apparaissent

La largeur d'un élément se calcule comme suit : largeur totale = largeur + padding gauche +
padding right + bordure gauche + bordure droite + marge gauche + marge droite

La hauteur d'un élément se calcule comme suit : hauteur totale = hauteur + padding haut + padding
bas + bordure haute + bordure basse + marge haute + marge basse
18/33
 Boîtes en CSS
margin
border
padding
contenu

Compatibilité avec IE : IE inclut le padding et le border dans la largeur, lorsque la propriété

width est fixée, sauf si un DOCTYPE est déclaré.

19/33
 Toutes les propriétés de la bordure en CSS
Propriété Description Valeurs CSS (1 ou 2)
border-width, border-style,
border toutes les déclaration en une 1
border-color
toutes les déclarations pour border-bottom en border-bottom-width, border-
border-bottom 1
une bottom-style, border-bottom-color
border-bottom-color définit la couleur pour la bordure basse border-color 2
border-bottom-style définit le style de la bordure basse border-style 2
border-bottom-width définit l'épaisseur de la bordure basse border-width 1
color_name, hex_number,
border-color définit la couleur des quatre bordures 1
rgb_number, transparent
border-left-width, border-left-style,
border-left toutes les déclarations pour border-left en une 1
border-left-color
border-left-color définit la couleur de la bordure gauche border-color 2
border-left-style définit le style de la bordure gauche border-style 2
border-left-width définit l'épaisseur de la bordure gauche border-width 1
border-right-width, border-right-
border-right toutes les déclarations pour border-right en une 1
style, border-right-color
border-right-color définit la couleur de la bordure droite border-color 2
border-right-style définit le style de la bordure droite border-style 2
border-right-width définit l'épaisseur de la bordure droite border-width 1
none, hidden, dotted, dashed, solid,
border-style définit le style pour les quatre bordures 1
double, groove, ridge, inset, outset
border-top-width, border-top-style,
border-top toutes les déclarations pour border-top en une 1
border-top-color
border-top-color définit la couleur pour la bordure haute border-color 2
border-top-style définit le style pour la bordure haute border-style 2
border-top-width définit l'épaisseur de la bordure haute border-width 1
thin, medium, thick
20/33 border-width définit l'épaisseur pour les quatre bordures 1
length
 Toutes les propriétés du contour en CSS
Un contour est une ligne dessinée autour des éléments, en dehors de la bordure, afin de
démarquer cet élément.

un exemple avec la propriété {outline-style:dotted;border:1px solid red;}

Propriété Description Valeurs CSS (1 ou 2)
définit toutes les propriétés du contour en une outline-color, outline-style,
outline 2
déclaration outline-width
color_name, hex_number,
outline-color définit la couleur du contour 2
rgb_number, invert
none, dotted, dashed, solid, double,
outline-style définit le style du contour 2
groove, ridge, inset, outset
thin, medium, thick
outline-width définit l'épaisseur du contour 2
length

21/33
 Toutes les propriétés de la marge extérieure en
CSS
Propriété Description Valeurs CSS (1 ou 2)
définit toutes les propriétés de la marge margin-top, margin-right, margin-
margin 1
extérieure en une déclaration bottom, margin-left
auto
margin-bottom définit la marge extérieure basse length 1
%
auto
margin-left définit la marge extérieure gauche length 1
%
auto
margin-right définit la marge extérieure droite length 1
%
auto
margin-top définit la marge extérieure haute length 1
%

22/33
 Toutes les propriétés de la marge intérieure en
CSS
Propriété Description Valeurs CSS (1 ou 2)
définit toutes les propriétés de la marge padding-top, padding-right,
padding 1
intérieure en une déclaration padding-bottom, padding-left
auto
padding-bottom définit la marge intérieure basse length 1
%
auto
padding-left définit la marge intérieure gauche length 1
%
auto
padding-right définit la marge intérieure droite length 1
%
auto
padding-top définit la marge intérieure haute length 1
%

23/33
 Affichage et visibilité en CSS
display:none
du texte
<div> style="display:none;width:100px;height:100px;color:red">
</div>
du texte en dessous du div
du texte du texte en dessous du div

visibility:hidden
du texte
<div style="visibility:hidden;width:100px;height:100px;color:red">
</div>
du texte en dessous du div
du texte

du texte en dessous du div

La propriété display permet de modifier la propriété d'afichage par défaut des éléments (block ou
inline)
24/33
 Positionnement des éléments en CSS
Le positionnement statique : les éléments HTML sont par défaut en position statique (par rapport
au flux normal d'affichage). Les éléments en position statique ne sont pas affectés par les
propriétés top,left,right et bottom.

Le positionnement fixe : les éléments HTML en position fixe sont positionnés relativement par
rapport à la fenêtre du navigateur. Ces éléments ne bougeront pas même si l'on se déplace dans la
page.

Le positionnement relatif : positionnement par rapport à sa position normale (positionnement

statique)

Le positionnement absolu : un élément en position absolu est positionné relativement par rapport à
un élément parent dont la position est autre que statique. Si un tel élément parent n'existe pas le
block conteneur est <html>
Les éléments en position absolue sont retirés du flux normal (comme la propriété display:none).
Ces élément peuvent se chevaucher. On règle la priorité de chevauchement (par défaut le flux
normal) en utilisant la propriété z-index en CSS. L'élément possédant la valeur la plus grande en
z-index sera affiché au dessus des autres éléments.

25/33
 Positionnement des éléments en CSS
Propriété Description Valeurs CSS (1 ou 2)
bottom définit le positionnement bas d'un élément auto, length, % 2
clip clip un élément possédant la position absolue. shape, auto 2
url, auto, crosshair, default, pointer,
move, e-resize, ne-resize, nw-resize,
cursor spécifie le type de curseur à afficher 2
n-resize, se-resize, sw-resize,
s-resize, w-resize, text, wait, help
left définit le positionnement gauche d'un élément auto, length, % 2
définit ce que l'on doit faire si un élément sort
overflow auto, hidden, scroll, visible 2
de la boîte parente
position définit le positionnement d'un élément absolute, fixed, relative, static, 2
right définit le positionnement droit d'un élément auto, length, % 2
top définit le positionnement haut d'un élément auto, length, % 2
z-index définit l'empilement des éléments number, auto 2

Une liste dans le flux normal :

1. élément 1
2. élément 2
3. élement 3

La même liste en position relative avec un décalage à gauche de 1 cm et de 0.5 cm en haut :

1. élément 1
2. élément 2
3. élement 3
26/33
 La propriété flottant en CSS
Par défaut, les éléments de type block occupent toute la largeur de la page, même si l'on spécifie
une largeur.
Pour positionner deux éléments de type block l'un à côté de l'autre, on utilise la propriété
float(left,right,none).
Exemple : deux éléments de type block de largeur 3cm dans le flux normal

Les mêmes avec la propriété {float:left;margin-left:2mm} :

Pour repositionnner les éléments HTML dans le flux normal, on utilise la propriété
clear(left,right,none,both)
Même avec un <br/>, le texte continue à côté du div flottant.
Maintenant on revient dans le flux normal d'affichage.

27/33
 Pseudo-classes en CSS
Nom Description CSS (1 ou 2)
:active ajoute un style à un élément qui est activé 1
:first-child ajoute un style à un élément qui est le premier enfant d'un autre élément 2
:focus ajoute un style à un élément qui a le focus clavier 2
:hover ajoute un style à un élément lorsque l'on passe la souris dessus 1
:lang ajoute un style à un élément avec un attribut lang spécifiques 2
:link ajoute un style à un lien non visité 1
:visited ajoute un style à un lien visité 1

28/33
 Pseudo-éléments en CSS
Nom Description CSS (1 ou 2)
:after ajoute un contenu après un élément 2
:before ajoute un contenu avant un élément 2
:first-letter ajoute un style sur le premier caractère d'un texte (lettrine) 1
:first-line ajoute un style à la première ligne d'un texte 1

29/33
 Maladies exotiques des CSS ?
La divite chronique
Symptômes : crise de la perception du monde sensé, le malade ne jurant plus que par une seule
balise : l’élément <div>, par lequel il remplace toutes les structures utilisées auparavant (tableaux
imbriqués, paragraphes, titres, citations, etc.). Le patient transforme donc tout ce qu’il a connu en
<div>. Il s’exprime souvent de la sorte : « Sus aux tableaux ! Je les remplace par des <div>) ».

Conséquences : transformer cent cellules de tableaux imbriquées en autant de <div> imbriqués ne

résout rien. La structure, plus complexe, est devenue incompréhensible et inutilisable.

Pire : remplacer toutes les balises logiques (<p>, <h1>, <cite>, <blockquote>, …) par la balise
unique et générique <div> fait perdre aux documents tout leur sens et toute leur sémantique, les
rendant inintelligibles aux navigateurs non graphiques et aux moteurs de recherche.

Traitement : un traitement lourd est nécessaire. Il faut (ré)apprendre au patient qu’un document
HTML doit avoir du sens et qu’il faut y utiliser chaque balise à bon escient : <p> structure des
paragraphes, <div> délimite les grandes zones du document, <h1>… <h6> dénotent les niveaux
de titres, <ul> introduit les listes et menus, etc. Le risque de rechute est alors faible.

30/33
 Maladies exotiques des CSS ?
La classite aiguë
C’est une admiration exacerbée des classes CSS, proche de la dévotion. Certaines thèses y voient
un rapprochement religieux.

Symptômes : la classite se manifeste par une utilisation à outrance des propriétés class sur chaque
balise rencontrée. Ce besoin d’identifier chaque élément par une classe (souvent répétée) témoigne
d’un soudain manque de confiance en soi provoqué par une connaissance évasive des sélecteurs
CSS et de leur héritage parent-enfant.
<div id="menuglobal">
<ul class="menu">
<li class="menuitem"><a class="bouton" href="#">Lien 1</a></li>
<li class="menuitem"><a class="bouton" href="#">Lien 2</a></li>
<li class="menuitem"><a class="bouton" href="#">Lien 3</a></li>
<li class="menuitem"><a class="bouton" href="#">Lien 4</a></li>
</ul>
Conséquences : prise de poids soudaine et excessive (exprimée en octets). Le code est inutilement
alourdi et la répétition de ces propriétés le rend parfois difficile à interpréter.

Traitement : une cure d’apprentissage des sélecteurs CSS et de leurs propriétés d’héritage est
nécessaire pour venir à bout de cette affection.
<ul id="menu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
31/33 </ul>
 Maladies exotiques des CSS ?
La cellulite ravageuse
Cette forme de maladie est une réminiscence de nos anciennes habitudes de conception de sites
web à l’aide de tableaux et de cellules. Cette technique impliquait de multiples découpes des
éléments en petites cellules, contenant chacune un morceau d’image de l’arrière-plan ou une partie
du contenu.

Symptômes : on reconnaît le patient atteint de cellulite ravageuse à son obsession à vouloir tout
découper, imbriquer et « celluliser ».
Par exemple, le site d’Alsacréations sera immédiatement perçu comme un enchevêtrement
élémentaire de multiples cellules auxquelles seront appliqués des équivalents des propriétés
rowspan et colspan. Autre symptôme fréquent : le patient continue de tronçonner toutes ses images
d’arrière-plan en plusieurs fichiers, se compliquant la tâche pour l’intégration de son code.

Conséquences : à l’instar de la classite, la cellulite ravageuse implique une prise de poids

conséquente chez le malade. Elle produit surtout une structure inextricable et illogique, opaque
même aux yeux d’un utilisateur averti. Avec le temps et l’évolution de la maladie, le patient ne
comprendra plus son propre code. Quant aux navigateurs, la complexité du site les incitera à mal
interpréter les documents.

Traitement : cette pathologie lourde nécessite une complète remise en cause de ses propres
conceptions et de son expérience de webmaster.
32/33
 Maladies exotiques des CSS ?
La négativite virulente
C’est l’obstination à nier en bloc l’existence des maladies précédentes. Le malade reste cloîtré
dans son monde et refuse de s’ouvrir à la réalité. Il feint de croire aux promesses des standards
CSS tout en réfutant chaque argument proposé en leur faveur.

La strictite aveugle
Cette nouvelle forme de contagion fait croire aux débutants que tous les sites web doivent être
validés en XHTML Strict.
Méfiez-vous de ces charlatans de la médecine qui vous submergent de remèdes (règles, doctypes,
prologues). Le débutant est alors noyé de doctrines à respecter, alors qu’il est souvent préférable
d’aller à son rythme, de commencer en transitionnel, voire de conserver un squelette minimal en
tableaux et d’y insérer les mises en forme CSS par à-coups.

33/33