Langage 

CSS
Support de cours 

Plan
1. Principe de la séparation du fond et de la forme
2. Les éléments de base du langage CSS
3. Sélecteurs
4. Pseudo‐classes et pseudo‐éléments
5. Héritage des propriétés de style
6. Unités de tailles et couleurs
7. Requêtes de média (Media queries)
1. Principe de la séparation du fond et de la
forme
‡ Le W3C définit le langage CSS comme le suivant:

"Le langage CSS (Cascading Style Sheets ‐ feuilles de style en cascade‐) est le langage qui permet aux
concepteurs de pages web de modifier le rendu d’un document structuré, tels les documents HTML. En
séparant le contenu de sa mise en forme, CSS simplifie la création et la maintenance des documents web. C’est
le principe de la séparation du fond et de la forme. "

E. NFAOUI (elhabib.nfaoui@usmba.ac.ma)    2

Figure 1. Principe de la séparation fond/forme

1. Principe de la séparation du fond et de la
forme

‡ L’intérêt de la séparation entre la forme (CSS) et le contenu (HTML) est multiple, elle permet :
„ de pouvoir disposer d’une feuille de styles unique, applicable à des documents multiples ;
„ de pouvoir disposer de feuilles de styles alternatives, en fonction du choix des concepteurs ou des
utilisateurs ou en fonction des médias ;
„ d’avoir une meilleure maintenabilité d’un site web (les mises à jour sont plus simples et plus
rapides);
„ d’avoir une plus grande flexibilité (une seule modification du CSS modifie l’ensemble des pages d’un
site web) ;
„ de concevoir le document en prêtant attention à la sémantique des éléments.
‡ CSS permet également l’accessibilité des données en supportant les feuilles de styles spécifiques par
média.
‡ CSS est un standard web en constante évolution. Il définit un ensemble de règles de mise en
forme appliquées de façon combinée selon un degré de priorité (styles intrinsèques au navigateur, styles
utilisateur, styles selon le média de consultation).
2. Les éléments de base du langage CSS

2.1  Principe de CSS
2.2  Syntaxe de la déclaration d’un style CSS
2.3  Propriétés
2.4  Écrire des feuilles de style

2.1 Principe de CSS

‡ Les feuilles de styles CSS sont composées de blocs définissant un ensemble de déclarations à appliquer à
une ou plusieurs balises HTML dans le but de définir la présentation de la page web. Ces balises sont
désignées par le sélecteur CSS précédant le bloc.

‡ Au chargement de la page HTML, le navigateur construit un modèle arborescent correspondant à

l’ensemble des balises de la page web appelé le DOM ( Document Object Model ). Il charge ensuite la (ou
les) feuille(s) de styles puis applique les différentes règles aux objets du DOM au fur et à mesure de la
lecture des styles.
2.2 Syntaxe de la déclaration d’un style CSS

‡ Une déclaration de style comporte plusieurs parties, selon l’ordre suivant:

„ Un sélecteur qui détermine à quel élément et éventuellement dans quelles conditions s’applique le
style.
„ Les déclarations des propriétés que l’on veut voir appliquées à l’élément sélectionné. Elles doivent
être incluses entre des accolades ouvrante ( { ) et fermante ( } ), déterminées chacune par un mot‐clé
propre à CSS suivi du caractère deux‐points ( : ), puis de la valeur attribuée à cette propriété. Chaque
déclaration doit être séparée de la précédente par le caractère point‐virgule ( ; ).

sélecteur {
propriété1:valeur1;
propriété2:Valeur2;
...
}

Autant que les propriétés, c’est la variété des sélecteurs qui fait la richesse de CSS.

Afin d'améliorer la lisibilité et la maintenance du document, il peut être utile, voire même souhaitable de
commenter le code CSS à l'intérieur des balises d'insertion de définition de style. La commande /*
Commentaire */ permet l'insertion de commentaire au sein du code CSS.

Exemple

‡ Dans l’exemple ci‐dessous, h1 est le sélecteur, color est la première propriété qui détermine la couleur
du texte de l’élément, red est la valeur attribuée à cette couleur, background‐color est la
seconde propriété qui représente la couleur de fond et yellow sa valeur. Tous les éléments <h1> de la
page dans laquelle se trouve cette déclaration ont donc un contenu écrit en rouge sur fond jaune.

h1 {
color : red ; 
background‐color : yellow ;
}
2.3 Propriétés

‡ CSS définit plusieurs propriétés permettant de définir la présentation des pages Web.

Tableau 1: Quelques propriétés pour le texte

2.3 Propriétés

Tableau 2: Quelques propriétés pour les fonds
2.4 Écrire des feuilles de style

‡ Dans cette section, nous allons étudier les différentes méthodes d’écriture des styles CSS et la façon dont
on peut les lier à un document HTML. En fait, Les styles peuvent êtres écrits dans une balise style en en‐
tête de la page HTML, dans un fichier séparé qui sera lié à la page, ou bien dans l’attribut style d’une
balise HTML.

a. Insérer des styles dans l’en‐tête du document

‡ On peut d’abord placer des styles CSS à l’intérieur de la balise <style> dans l’en‐tête HTML (contenu de
l’élément <head>). La balise <style> a pour vocation de renfermer les définitions des styles CSS utilisables
dans la page qui le contient (on l’appelle aussi style de document). Il doit toujours être inclus dans
l’élément <head> et il ne peut contenir que des définitions de styles CSS et des commentaires HTML
délimités par <!‐‐ et ‐‐> ou des commentaires CSS délimités par /* et */ .

<head>
<style type="text/css">
body{
color: navy;
}
</style>
</head>

Cette technique sépare correctement le contenu et la mise en forme. Cependant la portée du style
défini se limite au document HTML du fichier. Dans l’idéal, le design général du site s’appliquera
automatiquement, sans devoir être explicité dans chaque document HTML. Pour aboutir à cet effet,
nous placerons les règles CSS dans un fichier distinct (style externe).
b. Lier les styles à partir d’une feuille séparée
(style externe)
‡ Afin de séparer le contenu et la présentation des pages web, l’écriture des styles dans les fichiers externes
est fortement conseillée (recommandée). Le fichier ne doit contenir que des sélecteurs et les définitions
des styles ainsi que des commentaires CSS (délimités par les caractères /* et */ ) mais aucune balise
d’élément HTML.

Exemple: 
L’exemple de code suivant montre un fichier CSS nommé commun.css .

/* Styles communs à toutes les pages */
/* fichier: commun.css */
body {
background‐color: white; 
color: marine;
}
h1 {
color: black; 
font‐size: 20px;
}

b. Lier les styles à partir d’une feuille séparée
(style externe)
‡ Pour lier le fichier externe de styles  à une page HTML on peut utiliser l’élément HTML <link> ou la règle
CSS @import.

„ Liaison par la balise <link>

Pour lier cette feuille de styles à toutes les pages HTML du site, il est d’usage de placer une balise <link>
dans l’en‐tête (<head>) de ces dernières.

Exemple : Appel de la feuille de style commun.css située dans le dossier « chemin _ressource »

<head>
<link rel="stylesheet" type="text/css" href="chemin_ressource/commun.css" />
</head>
b. Lier les styles à partir d’une feuille séparée
(style externe)
„ Utiliser la règle css @import

Exemple : Appel de la feuille de style commun.css avec la règle @import depuis la page HTML

<head>
<style type="text/css">
@import url(chemin_ressource/commun.css);
</style>
</head>

b. Lier les styles à partir d’une feuille séparée
(style externe)
Méthode link ou @import? 

Les méthodes link et @import permettent de gérer une feuille de styles externe qui est liée à plusieurs pages
HTML, ce qui permet de limiter le téléchargement des styles par chacune des pages du site. Le résultat obtenu
par les deux méthodes est en pratique identique, cependant on note quelques différences:
‡ <link> est une balise HTML qui n’est pas uniquement dévolue aux feuilles de styles. Quand elle désigne
une feuille de styles CSS, elle s’accompagne des attributs et valeurs suivantes : rel="stylesheet",
type="text/css" et media=[type de média souhaité]. Par exemple :
<link rel="stylesheet" href="/styles/habillage.css" type="text/css" media="screen" />

‡ La règle @import, propriété CSS, sera suivie de l’URL d’un fichier contenant les styles à appliquer en plus
de la feuille de styles en cours. Par exemple :

<style type="text/css">
@import url(/styles/habillage.css);
</style>

Cette propriété permet en outre d’inclure des feuilles de styles dans d’autres, ce qui permet de créer
des feuilles de styles dynamiques sans devoir recopier plusieurs fois le même code.
c. Intégrer les styles dans l’attribut style d’une
balise HTML
‡ Cette méthode d’inclusion des styles permet de modifier un seul élément de la page. C’est une méthode
non optimisée et non préconisée.

<p style="text‐decoration: underline;"> CSS est un langage de style…</p>

d. Ordre de priorité des styles

‡ Si une règle de style vient contredire une règle précédente, c’est en général le dernier style défini qui
s’applique.
‡ Ajoutons que les styles importés au moyen de l’élément <link /> sont réputés apparaître avant ceux qui
sont écrits dans l’élément <style>.

Cas 1:
h1, h2 {color: yellow;}
h1 {color: navy;}

Dans ce cas, le titre <h1> a un texte de couleur navy car ce style apparaît en dernier et écrase le 
précédent.

Cas 2:
Style écrit dans un fichier externe:
/*Style écrit dans le fichier externe « monstyle.css »
h1 {color: navy;}
d. Ordre de priorité des styles

Styles liés et style internes:
Dans l’en‐tête <head>
<link rel="stylesheet" type="text/css" href="monstyle.css" />
<style type="text/css">
h1 {color: red;}
</style>

Ou encore:
<style type="text/css">
@import url(monstyle.css)
h1 {color: red;}
</style>

Le titre <h1> a un texte de couleur red car les styles liés apparaissent avant ceux qui sont écrits dans l’élément 
<style>

e. La déclaration !important

‡ Pour donner une importance à un style, il faut insérer la déclaration d’importance à l’aide du mot‐clé !
important en le plaçant entre la valeur attribuée à la propriété et le point‐virgule qui termine la
déclaration. Dans l’exemple suivant:

*{
color: black !important; 
background‐color: yellow;
} 
div{
color: blue; 
background‐color: white;
}
3. Sélecteurs

3.1  Introduction
3.2  Sélectionner un seul élément (Sélecteur d’élément)
3.3  Sélectionner plusieurs éléments (Sélecteur multiple)
3.4  Le sélecteur universel
3.5  Les classes de style
3.6  Le sélecteur d’identifiant (id)
3.7  Les sélecteurs d’attributs
3.8  Les sélecteurs de valeur d’attribut
3.9  Les sélecteurs contextuels parent‐enfant
3.10  Les sélecteurs parent‐enfant directs
3.11  Les sélecteurs parent‐enfant
3.12  Les sélecteurs d’éléments adjacents

3.1 Introduction

‡ Les sélecteurs permettent de sélectionner les éléments HTML auxquels on veut attribuer un style
donné. Ils sont la base de la recherche d’éléments HTML dans le DOM.

sélecteurCSS {
propriétéCSS: valeurCSS;
}

‡ Le sélecteur d’élément permet de définir un style propre à un élément. Le sélecteur est constitué du nom
de l’élément.
3.3 Sélectionner plusieurs éléments (Sélecteur 
multiple)
‡ Nous pouvons très facilement appliquer le même style à plusieurs éléments différents en les énumérant
et en les séparant par une virgule dans le sélecteur.

Exemple:
h1, div, p {
color : black ; 
background‐color : red;

Exemple:
h1,div,p {
color : black ; 
background‐color : red;
}
div {margin : 20px;}
3.4 Le sélecteur universel

‡ Pour appliquer un style à tous les éléments, nous utiliserons le sélecteur universel * avant la définition
d’une ou de plusieurs propriétés.

Exemple:

Par exemple, pour que la couleur de fond de tous les éléments soit le jaune, nous écrirons :

*{
background‐color : yellow;
}

3.5 Les classes de style

‡ Nous avons vu que tous les éléments HTML possèdent l’attribut class. Pour créer une classe, le sélecteur
est constitué du nom choisi pour la classe précédé d’un point ( . ).

‡ Nous pouvons également définir une classe en la déclarant
 applicable seulement à un élément en faisant précéder son 
nom de celui de l’élément. Nous pouvons écrire par exemple
3.5 Les classes de style

‡ Appliquer plusieurs classes au même élément

Pour utiliser plusieurs classes dans le même élément HTML, il faut donner à son attribut class la liste des
noms des classes en les séparant par un espace comme ceci :

<div class="classe1 classe2"> Ceci est un texte avec la classe 1 et 2 </div>

Les combinaisons d’emploi des classes sont alors multiples, chaque classe pouvant définir une
caractéristique, et chaque élément pouvant en utiliser plusieurs au choix.

3.6 Le sélecteur d’identifiant (id)

‡ Nous pouvons donc écrire un style qui ne sera applicable qu’à l’élément dont l’attribut id a une valeur
précise en donnant cette valeur au sélecteur (comme pour une classe) et en le faisant précéder du
caractère dièse ( # ).
3.7 Les sélecteurs d’attributs

‡ Il est également possible d’appliquer un style à un élément déterminé dès qu’il possède un attribut
donné, quelle que soit la valeur de cet attribut. Pour appliquer ce sélecteur, le nom de l’élément doit être
suivi du nom de l’attribut placé entre crochets ( [ ) et ( ] ).

Exemple:

/* Style CSS */
abbr[title] {
color: red; 
background‐color: gray;
}

Tous les éléments <abbr> qui possèdent un attribut title , quelle que soit sa valeur, ont un contenu
affiché en rouge sur fond gris.

3.7 Les sélecteurs d’attributs

‡ Nous pouvons également créer un style applicable à tous les éléments qui possèdent un attribut donné en
utilisant le sélecteur universel * placé devant les crochets qui contiennent le nom de l’attribut choisi.

Exemple:

*[title] {
background–color: yellow;
}

Ce style sera appliqué sur tous les éléments ayant l’attribut title.

‡ Il est possible de sélectionner plusieurs attributs pour un élément en faisant suivre son nom de plusieurs
attributs entre crochets.

h2[title][id]{
background‐color: yellow;
}

Le style sera appliqué sur les titres <h2> ayant à la fois les attributs title et id.

3.8 Les sélecteurs de valeur d’attribut

‡ Pour affiner la sélection, nous pouvons appliquer un style à un élément à condition que tel attribut ait
une valeur précise en utilisant la syntaxe suivante :

élément [attribut="valeur"] {
Définition du style;
}

Exemple:
code[title="code JavaScript"] { color: blue; }

Le style est appliqué sur les éléments <code> ayant l’attribut title dont la valeur est la chaîne "code 

JavaScript".

‡ Il est aussi possible de particulariser davantage l’application du style en sélectionnant plusieurs attributs
et leurs valeurs en utilisant la syntaxe :

élément[attribut1="valeur1"][attribut2="valeur2"] { Définition du style; }

3.8 Les sélecteurs de valeur d’attribut

Autres possibilités:
‡ élément [attribut ~="valeur"] { Définition des styles; } : Le style est attribué à l’élément dont l’attribut
« attribut » a une valeur contenant exactement la chaîne « valeur » au sein de valeurs séparées par des
espaces.
Exemple 1:
[attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de valeurs séparées par des espaces.

Exemple 2:
td[id ~="nom"]{ background‐color: #222; color: white; }

‡ élément [attribut *= "val"] { Définition des styles; } : si l’attribut contient la sous‐chaîne « val » au sein de
la chaîne contenant la valeur.
Exemple:
[attr*="kiwi"] : si l’attribut contient la sous‐chaîne « kiwi » au sein de  la chaîne contenant la valeur.
3.8 Les sélecteurs de valeur d’attribut

‡ élément[attribut ^= "valeur"]{ définition du style } : Le style est attribué à l’élément dont la valeur de

l’attribut commence par la chaîne « valeur ».

Exemple:
[attr^="kiwi"] : sélection si la valeur de l’attribut attr débute par la chaîne « kiwi ».

‡ élément [attribut |="valeur"] { Définition des styles; } : Le style est attribué à l’élément dont la valeur de
l’attribut débute par la chaîne « valeur » au sein de valeurs séparées par des traits‐d’union. Autrement dit,
il cible l’élément qui a: attribut = valeur‐ .

Exemple 1: 
[attr|="kiwi"] : si la valeur de l’attribut attr débute par « kiwi » au sein de valeurs séparées par des traits 
d’union.

Exemple 2: 
*[lang |= en] : cible pour l’attribut « lang » les valeurs « en‐US », « en‐GB », etc.

3.8 Les sélecteurs de valeur d’attribut

‡ element[attribut $="valeur"]{définition du style} : si l’attribut finit par la chaîne valeur.

Exemple
[attr$="kiwi"] : si l’attribut « attr » finit par la chaîne « kiwi ».
3.9 Les sélecteurs contextuels parent‐enfant

‡ Plutôt que de définir un style pour toutes les occurrences d’un élément, nous pouvons souhaiter ne
l’appliquer qu’en fonction de sa position relative par rapport à un autre dans la hiérarchie des éléments
de la page. Ce type de sélecteur est dit contextuel. Nous pouvons, par exemple, définir un style général
pour l’élément <p> et vouloir lui en appliquer un autre quand il se trouve inclus dans un élément <div>.

Syntaxe:
élément_parent élément_enfant {
définition des styles;
}

Exemple:
p { color: blue; }
div p{ color: red; }

3.10 Les sélecteurs parent‐enfant directs

‡ Le sélecteur parent‐enfant direct permet d’appliquer un style à un élément à condition qu’il soit un enfant
direct d’un autre élément et non plus un descendant indirect.

Syntaxe :

élément_parent > élément_enfant {
Définitions des styles;
}

Exemple:
3.11 Les sélecteurs parent‐enfant

‡ CSS offre d’autres possibilités de sélection d’un élément enfant en fonction de ses caractéristiques. Voici
deux sélecteurs parmi plusieurs autres:

Syntaxe Définition

élément:nth-child(n) { style } le énième enfant de son parent (élément) en

commençant par le début.

élément:nth-last-child(n) { style } le énième enfant de son parent en commençant par la fin.

3.12 Les sélecteurs d’éléments adjacents

Syntaxe :

élément1 + élément2 {
Définitions des styles;
}

Ce sélecteur permet de créer un style qui s’appliquera à l’élément de type 2 uniquement s’il suit
immédiatement (successeur direct) un élément de type 1 dans le code HTML sans y être inclus.
4. Pseudo‐classes et pseudo‐éléments

4.1  Les pseudo‐classes applicables aux liens
4.2  Les pseudo‐classes dynamiques
4.3  Pseudo‐classes utilisables essentiellement pour des éléments de      
formulaire
4.4  Les pseudo‐éléments

4.1 Les pseudo‐classes applicables aux liens

‡ Il y’a deux pseudo‐classes spécifiques aux éléments qui possèdent un attribut href faisant référence à un
document externe (lien vers une autre page) ou interne (ancre vers une partie du même document). Il
s’agit des pseudo‐classes suivantes :
„ :link
Cette pseudo‐classe permet d’attribuer un style à un lien qui pointe vers un document non encore vu.
C’est l’état normal de tous les liens à l’ouverture de la page.

„ :visited
Cette pseudo‐classe permet d’attribuer un style à un lien qui pointe vers un document déjà visité, après
un retour sur la page d’origine.

Exemple:
a:link {color: blue;}
a:visited {color: red;}
4.2 Les pseudo‐classes dynamiques

‡ Elles permettent d’attribuer un style à un élément en fonction des actions effectuées par le visiteur. Ces
pseudo‐classes sont dynamiques car le style attribué disparaît avec le motif de leur création.
„ La pseudo‐classe : hover {...} agît lorsque le curseur de la souris pointe l'élément.
„ La pseudo‐classe : active {...} agît lors de l'activation de l'élément par un clic de souris
notamment.
„ La pseudo‐classe :focus {...} agît lors de la réception du focus par le clavier ou par la souris.

‡ Les pseudo‐classes peuvent également être combinées afin que l'élément réagisse à une combinaison de
types d'événement.
a:focus:hover {font‐size: 12pt; color: red;}

Dans cet exemple, cette commande correspond à un lien qui reçoit le focus et qui est pointé par le
curseur d'une souris.

4.3 Pseudo‐classes utilisables essentiellement pour 
des éléments de formulaire

‡ La pseudo‐classe :enabled affecte un style aux éléments <input> dont l’attribut enabled vaut la valeur
enabled (valeur par défaut), c’est‐à‐dire qui sont accessibles à l’utilisateur (cases qui peuvent être cochées
par exemple).

‡ La pseudo‐classe :disabled affecte un style aux éléments <input> dont l’attribut disabled vaut la valeur
disabled, donc qui ne sont pas accessibles à l’utilisateur.

‡ La pseudo‐classe :checked affecte un style aux éléments <input> et particulièrement à ceux du

type bouton radio ou case à cocher quand ils sont dans l’état coché. Notez que les styles appliqués sont
dynamiques donc réversibles et disparaissent quand on décoche une case par exemple.