Faculté de génie électrique et informatique L2

Département d’informatique Année : 2022/2023

Module : Développement Web

LES FEUILLES DE STYLES : CSS

Responsable du module : Mme Bousnina Lila

1
 Intérêt des feuilles de style

HTML :
Permet de structurer les différents éléments d'une page.
La visualisation est réalisée par le navigateur après
interprétation du code HTML.
Pour chaque élément HTML, il existe un style standard (par
défaut) qui permet d'obtenir un rendu dans toutes les situations.
CSS :
Les CSS permettent de définir une ou plusieurs apparences à
différents éléments.
Apporte une meilleure maîtrise de la présentation de la page.
Facilite l'unification des styles de toutes les pages d'un site sans
modification du contenu de la page.
2
Reste indépendant du code HTML et en simplifie l‘écriture.
CSS
Il est possible de modifier le style par défaut grâce aux CSS :
Cascading Style Sheets ou en français feuilles de style en cascade.

CSS est un langage qui permet de donner du look à votre page Web
et la rendre ainsi présentable. En appliquant du design à son
contenu.
Il couvre tous les aspects visuels d'une page Web, commençant de
la simple coloration des objets et allant jusqu'aux et transformations
complexes de ceux ci et le responsive design.

La première version du CSS a vu le jour vers 1996.

Actuellement, on est à la version 3 du CSS.
3
Le Css (Cascading Style Sheets) est le langage de mise en forme

et de mise en page des pages .html.

Mise en forme : souligner du texte, le mettre en gras, en

rouge, encadrer...

Mise en page : disposer les blocs les uns par rapport aux

autres dans la page.

Ce second point est plus difficile que le premier.

4
Exemple de code sans CSS :

5
Même code avec du CSS :

6
• Idée :

Séparer la structure et le contenu d’un document de sa

présentation :
La structure d’un document et son contenu sont décrits en HTML;
Sa présentation est gérée par les CSS.

Le CSS s’intéresse à la mise en forme du contenu intégré avec

du HTML.

7
Principe
CSS permet d'appliquer des styles sur différents éléments sélectionnés dans un
document HTML, pour mettre en forme une page web.

Le langage CSS définit un ensemble de propriétés qui ont une influence

sur l’affichage des éléments d’une page.
Pour chaque propriété il existe un ensemble de valeurs possibles.
Il est possible de fixer ces propriétés pour chacun des éléments d’un
document HTML.
Les propriétés agissent sur l’apparence de la boîte d’un élément.
Les propriétés concernent :
L’apparence du contenu (fonte, style, couleur, ...)
La taille de la boîte (largeur, marges, ...)
Le positionnement de la boîte (absolu ou relatif, visibilité)
... 8
Principe

CSS permet d'appliquer des styles sur différents éléments

sélectionnés dans un document HTML, pour mettre en forme
une page web.

Comment sélectionner un ou plusieurs éléments?

On (cible) sélectionne un élément grâce à son nom de balise, ou

en fonction de ses attributs ou même de son état. On écrit ainsi
ce qu’on appelle le sélecteur.

Le sélecteur détermine (sélectionne) les éléments sur lesquels

s’appliquera le style. Par exemple p, h1,…
9
Et qu’est ce que la mise en forme ?

Puis on choisit quel(s) aspect(s) (ou “styles”) de l’élément HTML

que l’on souhaite modifier. On précise ainsi ce qu’on appelle la
propriété (à modifier). Par exemple la couleur.

À chaque propriété CSS on doit indiquer une valeur. Par exemple,

pour la couleur, il faut indiquer le nom de la couleur, par exemple
« red » . Pour la taille, il faut indiquer quelle taille on veut etc...

10
Appliquer un style à des balises

L’affectation d’une valeur à une propriété définit une déclaration CSS.

La ou les déclarations associées à un ou plusieurs sélecteurs définissent une

règle de style.
déclarations "propriete : valeur;".

propriétés
valeurs

sélecteur
déclarations

11
Syntaxe (1)
selecteur { propriete : valeur ; }

Exemple de règles de style :

h1 { /* On modifie le style des titres */

color: red; /* Le texte sera écrit en rouge */
font-variant: small-caps; /* Le texte sera affiché en majuscules */
}

strong { /* On modifie le style des mots importants */

background-color: gold; /* Le texte sera écrit sur un fond doré */
text-decoration: underline; /* Le texte sera souligné */
}

Note : Il existe plus de 300 propriétés en css3.

Tableau récapitulatif des propriétés
https://www.w3.org/TR/CSS2/propidx.html

12
Syntaxe (2)
1. Il est possible de regrouper plusieurs déclarations dans une règle,
les déclarations sont alors séparées par des points-virgules.

Exemple :
« tous les éléments <h1> auront
h1 {
color : blue ; leur texte en bleu et une taille
font-size : 12px; de police de 12px »
}

2. On peut factoriser les règles partagées par des sélecteurs,

les sélecteurs sont alors séparés par des virgules.

Exemple : « les éléments <h1> et les éléments

h1 , h2 {
color : blue ; <h2> auront leur texte en bleu et
font-size : 12px; une taille de police de 12px »
}

13
Les propriétés raccourcies

Certaines propriétés peuvent être définies de manière groupée en une seule

propriété raccourcie.
Exemple :
Avec 4 valeurs:
Au lieu de :

p {
margin-top :10px; margin-right : 20px;
margin-bottom : 30px ; margin-left : 40px;
}
/* margin-top margin-right margin-bottom margin-left */

On réunit dans margin dans cet ordre:

p {
margin:10px 20px 30px 40px;
}
/* margin-top margin-right margin-bottom margin-left */
14
Avec 3 valeurs:

p {margin:10px 20px 30px}

/* margin-top (margin-rignt et margin-left) margin-bottom */

Si on ne renseigne que 3 valeurs pour cette même propriété:

La marge au haut sera de 10px, les deux marges latérales seront à 20px et la
marge du bas sera de 30px.

Avec 2 valeurs:

p {margin:5px 10px}
/* (margin-top et margin-bottom) (margin-rignt et margin-left) */

Les marges verticales seront de 5px, les deux marges latérales seront de 10px.

15
Des commentaires dans du CSS

Pour faire un commentaire, vous tapez /*, suivi de votre

commentaire, puis */ pour terminer votre commentaire.

Les commentaires peuvent être sur une ou plusieurs lignes.

Exemple:
body {
font-family: verdana;
/* le type de police du texte du body comme times new reman*/

background-color: #d8c5c2;
/* background c'est le fond du body, en ajoutant color ca sera la propriété couleur du
fond, si on ajoute image, alors ça sera l'image du fond de la page */

background-image: url(../images/bg.jpg)
/* ici c'est la propriété fond avec image, on utilise le mot clé url(chemin vers l'image)*/
}
16
Feuille de style :

Une feuille de style CSS regroupe un ensemble de règles CSS.

Où écrire ces règles CSS ?

Nous avons trois possibilités pour écrire notre CSS. La

première est préférable aux deux autres:

Méthode A : en liant au document HTML, une feuille de

style (fichier .css) externe (CSS externes, c’est le moyen le
plus recommandé).

Méthode B : en utilisant des balises <style>, dans l'en-tête

(bloc <head>) du fichier html (CSS internes ).

Méthode C : directement dans les balises html (inline CSS)

17
 La méthode "à l'arrache" dans les balises (Méthode C)
(fortement déconseillée)

Attribut de style local :

Elle consiste à ajouter un attribut style sur les balises pour leur
appliquer un style particulier (attribut de style local).
Exemple :

18
Inconvénients :

1. Mélange structure et présentation;

2. Le style ainsi défini ne s'applique qu'à la balise sur

laquelle il est déclaré. Or, sur une page Web, il existe
plusieurs éléments qui se ressemblent (décrits par la même
balise en général). Il est donc judicieux que ces éléments
aient le même style, et par conséquent on serait obligé de
redéclarer le même style local autant de fois qu'il y a
d'éléments similaires.

19
Directement dans le header de la page HTML (Méthode B) (pas recommandée)

Style global à la page :

Il est aussi possible de taper du CSS directement à l'intérieur même du

fichier HTML, entre les balises <head> </head>. Vous devrez y mettre
une balise <style> </style> à l'intérieur, comme ceci :
Exemple :

20
Inconvénients :

Cette méthode peut être utile lorsqu'une page d'un site est un
peu à part des autres et nécessite une mise en forme
particulière.

Pour harmoniser l'ensemble du site web : par exemple

mettre tout les titres de mon site en rouge, on serait obligé de
redéclarer les mêmes balises style autant de fois qu'il y a de
pages constituant note site.

21
Dans une feuille (fichier) .css (Méthode A) (à privilégier):

La feuille de style en cascade :

Il suffit de définir le style une seule fois dans la feuille css au

lieu de le répéter sur chaque page du site.

Le code CSS est écrit dans un fichier spécial ayant l'extension

.css.

C'est la méthode la plus pratique car elle vous permettra de

faire changer le design du site en un clin d'œil!

22
 Avantages :

Avoir une feuille .css commune dans un fichier séparé du code

html permet de :
Changer le design du site en un clin d'œil! sans toucher le document
html;
Faciliter la maintenance du site ;
Harmoniser l'ensemble du site web;

Alléger la taille des fichiers .html, ce qui rendra le site plus

rapide. Car le fichier .css ne sera téléchargé qu'une seule fois
pour toutes les pages du site, .

23
Comment accèdent les pages .html à la feuille de style .css?

Il faut y ajouter une ligne entre les balises <head> </head> qui va
permettre de dire au fichier HTML quel fichier CSS doit être charger :

<link rel="stylesheet " type="text/css" href = "design .css" />

La balise <link /> comporte plusieurs attributs :

rel="stylesheet " : indique que le fichier inclu est une feuille de

style.

type="text/css" : norme de styles, utilisée dans le fichier.

href : c'est l'emplacement où se trouve votre feuille de style sous

forme de lien relatif (l’URL de la feuille de style).

(Dans cet exemple le CSS se trouve dans le même dossier.)

24
L’héritage en CSS

L’héritage signifie que tout élément HTML va hériter des

styles de ses parents (c’est le fameux « cascading »).

En HTML, si un élément A est inclus dans un élément B ;

l’élément A s’appellera l’enfant, et l’élément B sera le parent de
l’élément A.

Si l’on applique un style à l’élément B, l’élément A en héritera

automatiquement.

25
 Exemple :

• Relations Parent - Enfant :

<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
<p>Bonjour !</p>
</body>
</html>

• <html> parent de <body> qui est parent de <p>.

• <p> hérite de <body> qui hérite de <html>.
• L'enfant hérite des propriétés de ses parents.
26
L’héritage en CSS (2)

Que se passe-t-il lorsque l’on donne deux ordres contradictoires à un

élément parent et à son enfant en CSS ??

(Par exemple, donner une couleur rouge au parent et bleu à l’enfant) ?

Le style appliqué sera celui le plus proche de l’élément en question :

Possible d’imbriquer dans le même documents plusieurs styles avec

un niveau de priorité différent.

Les propriétés non définies pour la balise courante sont

hérités des balises qui contiennent la balise courante.

Un style défini directement dans une page HTML sera plus

prioritaire qu’un style défini dans un fichier externe.
27
Exercice : Soit le code html suivant:
<body>
<h1>Roger, maître du HTML et dresseur de pokémon</h1>
<h2>Présentation</h2>
<p>Bonjour et bienvenue sur mon site. </p>

<h2>Mes pokémons</h2>
<p>Je collectionne les pokémons. C'est mon jeu préféré, j'adore.</p>

<h2>Mes autres passions</h2>

<p>
Après Pokémon GO, mon autre passion est le football. </p>
<p style = « color=pink »>
Si je ne joue pas à Pokémon GO et que je ne regarde pas un match de
football de Dunkerque, j'écoute du Céline Dion.
</p>
</body>

Soit le code CSS:

body { p { Quelle est la couleur des

color: red; } color: orange;} paragraphes au final?

28
Les attributs class et id
Soit l’exemple suivant :

TOUS les paragraphes de la page seront écrits en rouge, avec une taille
de 18 pixels.
Comment faire pour que seulement certains paragraphes (ou certains
titres, ou certaines citations) soient écrits d'une manière différente ? 29
L’attribut class
Les attributs id et class permettent de distinguer une ou des balises de
même nature (des paragraphes par exemple) qui n'ont pas la même
«finalité».

Pour distinguer les éléments qui doivent êtres écrits d'une manière
différente, il faut définir des groupes de balises à l'aide de l'attribut class.

Existe pour tous les éléments;

Permet de marquer des éléments d’un document comme appartenant à
une même « classe »;
Ajoute une sémantique commune aux éléments de la même classe.
Permet de définir un style personnalisé.
30
Exemple :

Voici comment écrire en vert, 18px des paragraphes correspondants aux

énoncés d'exercices :
• En html : Ajoutez l'attribut class= " enonce" à chacune des balises à
lesquelles vous voulez appliquer ce style. <!-- Partie html -->
<p class="enonce">
• html : </p>
Un énoncé d'exercice.

<p class="solution">
Solution de l’exercice.
</p>

• En CSS, au lieu de mettre le nom de la balise avant les accolades (comme p

ou encore h1), vous devez écrire un point suivi du nom de la class :
• CSS :
. enonce{ color : green; font-size : 18px; }
. solution{ color : blue; font-style : italic;
31
Et l'attribut id alors ?

Il fonctionne exactement de la même manière que class, à un détail

près : il désigne un élément unique.

Par exemple si on veut atteindre un paragraphe bien précis d’une page

à partir d’un lien d’une autre page, ce paragraphe doit être identifié çad
doit avoir un attribut id.

Dans la css, ce n'est pas un point que vous devez mettre avant le nom
de l'id, mais un dièse (#) :

32
Pseudo-classes

Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à
un sélecteur CSS pour appliquer un style à un élément dans un cas
particulier. L'utilisation des pseudo-classes est très populaire sur les liens
hypertextes qui changent de décor selon si ils sont nouvellement affichés,
déjà visités ou survolés...
Syntaxe des pseudo-classes :

sélecteur:pseudo-classe {
déclaration(s) de style
}
Les pseudo-classes peuvent également être utilisées avec des classes.
Elles se noteront alors :
sélecteur.classe:pseudo-classe {
déclaration(s) de style } 33
Voici la liste des pseudo-classes les plus utilisées en CSS:

:link
La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle
spécifiée dans son attribut href) n'a pas encore été visitée. Elle peut aider les
internautes à distinguer les liens qu'ils n'ont pas encore exploré.
:visited
A l'inverse de link, la pseudo-classe :visited désigne un lien hypertexte dont
la page cible a déjà été visitée. C'est un genre d'historique en quelque sorte.

a{ a:hover{
font-weight:bold; color:#000088;
color:#EE6600; text-decoration:underline;
text-decoration:none; }
}

34
:active
La pseudo-classe :active désigne un lien hypertexte sélectionné.
Il s'agit de l'instant où le visiteur clique sur le lien, si celui-ci
reste affiché sur la page (cas où la page est figée après le clic, ou
le lien est ouvert dans une nouvelle fenêtre) on peut voir l'effet
de cette pseudo-classe.
:hover
La pseudo-classe :hover désigne un objet survolé par le curseur
de la souris, il peut être un hyperlien ou n'importe quel autre
objet.

35
Sélecteurs CSS (D'autres sélecteurs existent )

Motif Signification

* Sélecteur universel, sélectionne toutes les balises sans exception.

.val Les éléments dont l’attribut class ="val"

#mon_id Les éléments dont l’id est mon_id.

E La balise E (un élément de type E).

E,F Sélectionne la balise E et F.

EF La balise F descendant de la balise E.

E+F La balise F immédiatement précédé par la balise E.

E[att] La balise E qui contient l’attribut att(peu importe la valeur).

E[att="val"] La balise E qui contient l’attribut att à la valeur val.

E.val La balise E dont l’attribut class ="val“.

E#mon_id La balise E dont l’ID est mon_id.

36
Les éléments div et span (conteneurs génériques)

• Il arrivera parfois que vous ayez besoin d'appliquer une class à certains
mots qui ne sont pas entourés par des balises.

• En effet, le problème des class c'est qu'il s'agit d'un attribut, vous ne
pouvez donc en mettre que sur une balise.

• Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le

paragraphe suivant :

<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>

Ça serait facile à faire s'il y avait une balise autour de "Neil Armstrong".

37
La balise span :

Nous allons faire appel à la balise inline <span>. On la met autour de

Neil Armstrong, on lui rajoute une class et on crée le CSS.
Code HTML :

La mise en forme des éléments html de même attribut class sera faite ensuite
par du code css.
Code CSS :

L’élément span va servir de conteneur interne à un élément.

La balise span est utilisée pour créer des propriétés css à un endroit précis.
38
La balise div :

<div> est une balise de type block. Comme <p>, <h1> etc...

<div> crée un nouveau "bloc" dans la page, et provoque donc

obligatoirement un retour à la ligne. C'est une balise très utilisée pour faire un
design.

<div> est un conteneur de différents éléments qui facilite l’application des

mêmes styles CSS à tous les éléments contenus dans ce div par héritage.

L’élément div va servir de conteneur de plusieurs éléments.

La balise div permet de regrouper plusieurs éléments HTML.

39
Exemple :
Pour appliquer la même mise en forme à plusieurs éléments, nous allons
simplement placer ces différents éléments à l’intérieur de nos
balises <div> et </div> puis appliquer les styles CSS directement au div.

Comment peut-on régler le

même problème à l’aide de
classes?
40