Institut Supérieur des Arts de MultiMédia

Concepts et outils pour le web

TP 4
Les feuilles de style CSS
1ère année CM
Plan
 Introduction
 Notion de sélecteurs
 Sélecteurs standards
 Sélecteurs personnalisés
 Intégration des styles CSS
 Les pseudo-classes et les pseudo-éléments
 Combinaison de sélecteurs
 Principe de l’héritage et cascade

2
Introduction (1/2)
• CSS : Cascading Style Sheets (feuilles de style en cascade)
• Développé par le w3C à partie de 1996
• Il pour but de séparer totalement la présentation d’une page web de son
contenu.
 Facilité la maintenance et l’accessibilité dans un site.

• Lorsqu’on n’utilise pas de feuille de style : il faut reprendre

toutes les pages HTML une par une pour modifier une police
de caractère ou une couleur de fond, …
 Avec les feuilles de style CSS, ce problème est résolu.

3
Introduction (2/2)
• C'est dans la feuille de style CSS on déclare toute la mise en forme
des pages :
• le positionnement des éléments
• l'image de fond
• les polices de caractère
• les couleurs, …

• Celle-ci sera liée à chaque page html.

 Ainsi, lorsqu'on en modifiera un élément, cela se répercutera
immédiatement sur toutes les pages html.

4
Notion de sélecteur (1/3)
• Un sélecteur permet de définir à quelles balises un style donné doit être
appliqué.
• La syntaxe d'un style est toujours la même : elle précise la balise à laquelle
le style va s'appliquer, et les différentes propriétés du style (couple
propriété/valeur).

• Syntaxe :

• Exemple :

 La police de la balise <h3>est définie en Arial, en italique et le texte sera vert. Dans
5
toutes nos pages web où ce style est appliqué, toutes les balises <h3> auront ce style.
Notion de sélecteur (2/3)
• Il est à noter que :
• Les propriétés sont entourées par des "{".

• Dans le couple "propriété/valeur", la propriété est séparée de sa valeur

par un double-point (:).

• L'espace entre la propriété et sa valeur n'est pas obligatoire mais aide

fortement à la lisibilité du code source.

• Les couples "propriété /valeur" sont séparés par un point-virgule (;).

• Il n'y a pas de limite pour le nombre de couples "propriété/valeur".

• Pour la lisibilité toujours, il est préférable d’écrire les styles sur plusieurs
lignes.

6
Notion de sélecteur (3/3)
• Il est possible de définir un style de balise directement dans le code HTML
de la balise.
• la notion de sélecteur n’existe plus puisque le style est appliqué directement à la
balise à laquelle on a ajouté l’attribut style.
• Les accolades sont remplacées par les guillemets.
• Les remarques sur les couples "propriété /valeur" citées précédemment restent
valables

• Syntaxe :

• Exemple :

7
Sélecteurs standards (1/2)
• Sélecteur universel (*)
• Le sélecteur universel permet de sélectionner toutes les balises, sans
exception, sur lesquelles le style va être appliqué.

• Il est souvent utilisé pour appliquer une mise en forme commune à tous les
éléments d’une page.

• Exemple :

• Dans cet exemple, la règle s'appliquera à toute la page, pour définir la taille du texte
de tous les éléments, y compris les titres (qui ont une plus grande taille par défaut).

8
Sélecteurs standards (2/2)
• Sélecteurs CSS de balise (de type) :
• Un sélecteur de type est le nom d'une balise dans la page web.
• Exemple :

• Dans cet exemple, tous les paragraphes auront un texte centré en vert.
• Remarque : Il est possible de grouper les balises à l'aide de virgules pour
appliquer un style commun à un ensemble de sélecteur.
• Exemple :

• Dans cet exemple tous les titres auront comme police « Georgia ».
9
 Sélecteurs personnalisés (1/4)
• Sélecteurs de classe
• Le concept de classe sert à affecter le même style à différentes balises qui
peuvent être de type différents (<p>, <table>, <tr>, <td>, <h1>, …).
• Code CSS :

• IMPORTANT : Il faut toujours précéder le nom de la classe dans le code CSS par
un « . ».
• Pour attribuer une classe dans une balise HTML, il suffit d’ajouter un attribut «
class » à cette balise et de lui affecter le nom de la classe.
• Code HTML :

10
Sélecteurs personnalisés (2/4)
• Remarque :
• Le sélecteur de classe s'applique typiquement à des éléments redondants dans le
page HTML.
• Un élément HTML peut avoir une ou plusieurs classes associées en séparant ces
noms de classe par des espaces.

• Exemple :

11
Sélecteurs personnalisés (3/4)
• Sélecteurs d’identifiants :
• Le sélecteur d'identifiant (ID) ne peut être appliqué qu'à un seul élément dans une
page HTML, par exemple un seul paragraphe.
• Il concerne généralement les éléments uniques de structuration du document,
comme les blocs principaux (logo, en-tête, pied de page...).
• Le sélecteur d'identifiant est spécifié en CSS par un dièse « # »
• Code CSS :

• Code HTML :

• Notons que dans une page HTML, on ne pourra avoir qu’une seule balise
ayant un id égal à nom_id. Donc on ne pourra effectuer qu'un seul appel à #nom_id
par page HTML. 12
Sélecteurs personnalisés (4/4)
• Une balise HTML peut avoir à la fois des attributs de classes et
d’identification.

13
Intégration des styles CSS (1/3)
• Il existe 3 façons d’intégrer un style CSS dans un document HTML :

• Directement dans la balise :

• Exemple :
<body>
...
<div
style="background
image:url(images/fond.jpg);
border-color: #849460; b
border-width: 2px;
width:300px;
text-align:left;
padding-left:80px;"> Contenu de votre élément
</div>
...
</body>

14
Intégration des styles CSS (2/3)
• Une feuille de style interne :
• Il est possible d'écrire du code CSS dans l'entête d'un document HTML, dans la balise
<head>.
• Il suffit pour cela de l'encadrer par une balise <style> ayant pour attribut type="text/css".
• Exemple :
<head>
<style type="text/css">
body {
background-color: white;
font-family: Verdana, sans-serif;
font-size: 100%; }
h1 {
font-size: 200%;
color: navy; t
text-align: center; }
h2 {
font-size: 150%;
color: red;
padding-left: 15px; }
p,ul,li,td {
color: black; } 15
</style> </head>
Intégration des styles CSS (3/3)
• Feuille de style interne :
• Définir un fichier feuille de style indépendant du document HTML (extension .css)

• Faire appel au fichier css à partir du document HTML dans la balise head.

• Exemple :
<head>
<link rel="stylesheet" type="text/css"
href="monstyle.css"/>
</head>

16
Les pseudo-classes et les pseudo-éléments(1/4)
• Lors de l'élaboration d'une feuille de style, il est parfois utile de n'appliquer
un style qu'à un seul petit élément (ex: la première ligne d'un paragraphe).
• Or, les sélecteurs courants, comme « body », « p » ou « h1 », ne permettent
pas de définir un style aussi précis.
• Il existe d'autres types de sélecteurs, appelés pseudo-classes et pseudo-
éléments, qui permettent d'affiner le style appliqué.
• Syntaxe :

• Exemple
• a:hover (pour appliquer un style particulier aux liens survolés)
• p:first-letter (pour appliquer un style particulier à la première lettre du
paragraphe).
• Remarque :
• Les noms des pseudo-classes sont des mots-clés prédéfinis du langage CSS.
• Les pseudo-classes sont définies à l’intérieur des balises <style></style> dans
l’entête de la page HTML ou dans un fichier de style externe. On ne peut pas la17
définir à l’intérieur d’une balise
Les pseudo-classes et les pseudo-éléments(2/4)
• Pseudo-classes :
• On s’intéressera dans cette section aux pseudo-classes appliquées à la
balise <a>.
• Elles sont au nombre de quatre :
• :link, permet d'appliquer un style aux liens qui n'ont pas encore été
visités ;
• :visited, permet d'appliquer un style aux liens qui ont déjà été visités ;
• :hover, permet d'appliquer un style aux liens " survolés " par la souris ;
• :active, permet d'appliquer un style aux liens qui sont en train d'être
cliqués.
• Exemple :

18
Les pseudo-classes et les pseudo-éléments(3/4)
• Les pseudo-éléments :
• On s’intéressera dans cette section aux pseudo-éléments appliqués au
texte.
• Les pseudo-éléments de texte permettent d'appliquer un style à une
portion de texte bien délimitée.
• Ainsi les pseudo- éléments de texte s'utilisent généralement avec la balise
de paragraphe <p>.
• On retiendra deux principales pseudo-classes de texte :
• :first-line, qui permet d'appliquer un style à la première ligne du
paragraphe ;
• :first-letter, qui permet d'appliquer un style à la première lettre du
paragraphe (utilisé dans le cas des lettrines).
• Exemple (lettrine) :

19
Les pseudo-classes et les pseudo-éléments(4/4)
• Il est possible également d’insérer un contenu textuel avant ou
après un élément, à l'aide des pseudo-classes :before et :after.

• Le contenu à insérer est alors précisé avec la propriété content.

• Le texte statique à insérer doit être placé entre guillemets,

comme suit :

• Il est également possible d'insérer une image, dans ce cas,

content doit être suivi de la mention url("nom_image.png").
• Exemple :

20
Combinaison de sélecteurs

• Il est possible de raffiner la cible sur laquelle vont être

appliqués les styles CSS en combinant deux ou plusieurs
sélecteurs.

• Ci-dessous un tableau récapitulatif avec des exemples des

principales combinaisons possibles :

21
22
Principes de l’héritage et cascade (1/3)
• On peut déclarer les styles :
• A l’intérieur d’une balise avec l’attribut style
• Entre les balises <head> et </head>
• Dans un fichier externe d’extension .css

• Question : que ce passe t-il si pour une balise donnée, il existe plusieurs
styles pouvant être appliqués à cette balise ?

• Réponse : l’application des styles suit le principe de cascade suivant :

• appliquer les styles des fichiers externes .css
• puis, appliquer les styles existant entre les balises <head> et </head>
• puis, appliquer le style qui existe à l’intérieur de la balise

23
Principes de l’héritage et cascade (2/3)

24
Principes de l’héritage et cascade (3/3)

• le paragraphe sera de couleur bleu, aligné à droite et en

italique.

• On dit que la propriété font-style: italic est héritée du fichier

style.css alors que les autres propriétés ont été remplacées.

25