04/04/2023

Intérêt des feuilles de style

Faculté de génie électrique et informatique L2 HTML :

Département d’informatique Année : 2022/2023 Permet de structurer les différents éléments d'une page.
Module : Développement Web
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.
LES FEUILLES DE STYLES : CSS 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.
Responsable du module : Mme Bousnina Lila
1 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 : Le Css (Cascading Style Sheets) est le langage de mise en forme
Cascading Style Sheets ou en français feuilles de style en cascade.
et de mise en page des pages .html.
CSS est un langage qui permet de donner du look à votre page Web
Mise en forme : souligner du texte, le mettre en gras, en
et la rendre ainsi présentable. En appliquant du design à son
contenu. rouge, encadrer...

Il couvre tous les aspects visuels d'une page Web, commençant de Mise en page : disposer les blocs les uns par rapport aux
la simple coloration des objets et allant jusqu'aux et transformations
autres dans la page.
complexes de ceux ci et le responsive design.

Ce second point est plus difficile que le premier.

La première version du CSS a vu le jour vers 1996.
Actuellement, on est à la version 3 du CSS.
3 4

Même code avec du CSS :

Exemple de code sans CSS :

5 6

1
 04/04/2023

Principe
• Idée : CSS permet d'appliquer des styles sur différents éléments sélectionnés dans un
Séparer la structure et le contenu d’un document de sa document HTML, pour mettre en forme une page web.

présentation : Le langage CSS définit un ensemble de propriétés qui ont une influence
sur l’affichage des éléments d’une page.
La structure d’un document et son contenu sont décrits en HTML;
Pour chaque propriété il existe un ensemble de valeurs possibles.
Sa présentation est gérée par les CSS.
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.
Le CSS s’intéresse à la mise en forme du contenu intégré avec Les propriétés concernent :
du HTML. 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é)
7 ... 8

Principe
Et qu’est ce que la mise en forme ?
CSS permet d'appliquer des styles sur différents éléments
sélectionnés dans un document HTML, pour mettre en forme Puis on choisit quel(s) aspect(s) (ou “styles”) de l’élément HTML
une page web. que l’on souhaite modifier. On précise ainsi ce qu’on appelle la
Comment sélectionner un ou plusieurs éléments? propriété (à modifier). Par exemple la couleur.

On (cible) sélectionne un élément grâce à son nom de balise, ou À chaque propriété CSS on doit indiquer une valeur. Par exemple,
en fonction de ses attributs ou même de son état. On écrit ainsi pour la couleur, il faut indiquer le nom de la couleur, par exemple
ce qu’on appelle le sélecteur. « red » . Pour la taille, il faut indiquer quelle taille on veut etc...
Le sélecteur détermine (sélectionne) les éléments sur lesquels
s’appliquera le style. Par exemple p, h1,…
9 10

Appliquer un style à des balises

Syntaxe (1)
L’affectation d’une valeur à une propriété définit une déclaration CSS. selecteur { propriete : valeur ; }

La ou les déclarations associées à un ou plusieurs sélecteurs définissent une Exemple de règles de style :
règle de style.
h1 { /* On modifie le style des titres */
déclarations "propriete : valeur;". color: red; /* Le texte sera écrit en rouge */
font-variant: small-caps; /* Le texte sera affiché en majuscules */
}
propriétés
strong { /* On modifie le style des mots importants */
valeurs background-color: gold; /* Le texte sera écrit sur un fond doré */
text-decoration: underline; /* Le texte sera souligné */
}

sélecteur
déclarations 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

11 12

2
 04/04/2023

Syntaxe (2) Les propriétés raccourcies

1. Il est possible de regrouper plusieurs déclarations dans une règle,
Certaines propriétés peuvent être définies de manière groupée en une seule
les déclarations sont alors séparées par des points-virgules.
propriété raccourcie.
Exemple : Exemple :
« tous les éléments <h1> auront
h1 {
Avec 4 valeurs:
color : blue ; leur texte en bleu et une taille Au lieu de :
font-size : 12px; de police de 12px »
} p {
margin-top :10px; margin-right : 20px;
2. On peut factoriser les règles partagées par des sélecteurs, margin-bottom : 30px ; margin-left : 40px;
}
les sélecteurs sont alors séparés par des virgules. /* margin-top margin-right margin-bottom margin-left */

Exemple : « les éléments <h1> et les éléments On réunit dans margin dans cet ordre:
h1 , h2 {
color : blue ; <h2> auront leur texte en bleu et
font-size : 12px; une taille de police de 12px » p {
} margin:10px 20px 30px 40px;
}
13 /* margin-top margin-right margin-bottom margin-left */
14

Avec 3 valeurs:
Des commentaires dans du CSS

p {margin:10px 20px 30px} Pour faire un commentaire, vous tapez /*, suivi de votre
/* margin-top (margin-rignt et margin-left) margin-bottom */
commentaire, puis */ pour terminer votre commentaire.
Si on ne renseigne que 3 valeurs pour cette même propriété:
Les commentaires peuvent être sur une ou plusieurs lignes.
La marge au haut sera de 10px, les deux marges latérales seront à 20px et la
Exemple:
marge du bas sera de 30px. body {
font-family: verdana;
Avec 2 valeurs: /* le type de police du texte du body comme times new reman*/

p {margin:5px 10px} background-color: #d8c5c2;

/* background c'est le fond du body, en ajoutant color ca sera la propriété couleur du
/* (margin-top et margin-bottom) (margin-rignt et margin-left) */
fond, si on ajoute image, alors ça sera l'image du fond de la page */

Les marges verticales seront de 5px, les deux marges latérales seront de 10px. 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)*/
}
15 16

Feuille de style : La méthode "à l'arrache" dans les balises (Méthode C)

(fortement déconseillée)
Une feuille de style CSS regroupe un ensemble de règles CSS.

Où écrire ces règles CSS ? Attribut de style local :

Nous avons trois possibilités pour écrire notre CSS. La Elle consiste à ajouter un attribut style sur les balises pour leur
première est préférable aux deux autres: appliquer un style particulier (attribut de style local).

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

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 18

3
 04/04/2023

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

Inconvénients : Style global à la page :
1. Mélange structure et présentation; Il est aussi possible de taper du CSS directement à l'intérieur même du

2. Le style ainsi défini ne s'applique qu'à la balise sur fichier HTML, entre les balises <head> </head>. Vous devrez y mettre
une balise <style> </style> à l'intérieur, comme ceci :
laquelle il est déclaré. Or, sur une page Web, il existe
Exemple :
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 20

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

Inconvénients :
La feuille de style en cascade :
Cette méthode peut être utile lorsqu'une page d'un site est un
Il suffit de définir le style une seule fois dans la feuille css au
peu à part des autres et nécessite une mise en forme
lieu de le répéter sur chaque page du site.
particulière.
Le code CSS est écrit dans un fichier spécial ayant l'extension
Pour harmoniser l'ensemble du site web : par exemple
.css.
mettre tout les titres de mon site en rouge, on serait obligé de
C'est la méthode la plus pratique car elle vous permettra de
redéclarer les mêmes balises style autant de fois qu'il y a de
faire changer le design du site en un clin d'œil!
pages constituant note site.

21 22

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

Avoir une feuille .css commune dans un fichier séparé du code Il faut y ajouter une ligne entre les balises <head> </head> qui va

html permet de : permettre de dire au fichier HTML quel fichier CSS doit être charger :

Changer le design du site en un clin d'œil! sans toucher le document <link rel="stylesheet " type="text/css" href = "design .css" />

html; La balise <link /> comporte plusieurs attributs :

Faciliter la maintenance du site ; rel="stylesheet " : indique que le fichier inclu est une feuille de
Harmoniser l'ensemble du site web; style.

Alléger la taille des fichiers .html, ce qui rendra le site plus type="text/css" : norme de styles, utilisée dans le fichier.

rapide. Car le fichier .css ne sera téléchargé qu'une seule fois href : c'est l'emplacement où se trouve votre feuille de style sous
forme de lien relatif (l’URL de la feuille de style).
pour toutes les pages du site, .
(Dans cet exemple le CSS se trouve dans le même dossier.)
23 24

4
 04/04/2023

L’héritage en CSS
Exemple :

• Relations Parent - Enfant :

L’héritage signifie que tout élément HTML va hériter des
styles de ses parents (c’est le fameux « cascading »). <html>
<head>
En HTML, si un élément A est inclus dans un élément B ; <title>Ma première page Web</title>
</head>
l’élément A s’appellera l’enfant, et l’élément B sera le parent de <body>
<p>Bonjour !</p>
l’élément A. </body>
</html>
Si l’on applique un style à l’élément B, l’élément A en héritera
automatiquement. • <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.
25 26

Exercice : Soit le code html suivant:

L’héritage en CSS (2) <body>
<h1>Roger, maître du HTML et dresseur de pokémon</h1>
<h2>Présentation</h2>
Que se passe-t-il lorsque l’on donne deux ordres contradictoires à un <p>Bonjour et bienvenue sur mon site. </p>

élément parent et à son enfant en CSS ?? <h2>Mes pokémons</h2>

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

(Par exemple, donner une couleur rouge au parent et bleu à l’enfant) ? <h2>Mes autres passions</h2>
<p>
Après Pokémon GO, mon autre passion est le football. </p>
Le style appliqué sera celui le plus proche de l’élément en question : <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.
Possible d’imbriquer dans le même documents plusieurs styles avec </p>
</body>
un niveau de priorité différent.
Soit le code CSS:
Les propriétés non définies pour la balise courante sont
hérités des balises qui contiennent la balise courante. body { p { Quelle est la couleur des
color: red; } color: orange;} paragraphes au final?
Un style défini directement dans une page HTML sera plus
prioritaire qu’un style défini dans un fichier externe.
27 28

Les attributs class et id L’attribut class

Les attributs id et class permettent de distinguer une ou des balises de
Soit l’exemple suivant :
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;

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
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

5
 04/04/2023

Exemple : Et l'attribut id alors ?

Voici comment écrire en vert, 18px des paragraphes correspondants aux
Il fonctionne exactement de la même manière que class, à un détail
énoncés d'exercices :
près : il désigne un élément unique.
• En html : Ajoutez l'attribut class= " enonce" à chacune des balises à
Par exemple si on veut atteindre un paragraphe bien précis d’une page
lesquelles vous voulez appliquer ce style. <!-- Partie html -->
<p class="enonce">
à partir d’un lien d’une autre page, ce paragraphe doit être identifié çad
• html : </p>
Un énoncé d'exercice.

<p class="solution"> doit avoir un attribut id.

Solution de l’exercice.
</p>
Dans la css, ce n'est pas un point que vous devez mettre avant le nom
• En CSS, au lieu de mettre le nom de la balise avant les accolades (comme p de l'id, mais un dièse (#) :
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 32

Pseudo-classes Voici la liste des pseudo-classes les plus utilisées en CSS:

Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à
:link
un sélecteur CSS pour appliquer un style à un élément dans un cas
La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle
particulier. L'utilisation des pseudo-classes est très populaire sur les liens
spécifiée dans son attribut href) n'a pas encore été visitée. Elle peut aider les
hypertextes qui changent de décor selon si ils sont nouvellement affichés,
internautes à distinguer les liens qu'ils n'ont pas encore exploré.
déjà visités ou survolés...
:visited
Syntaxe des pseudo-classes :
A l'inverse de link, la pseudo-classe :visited désigne un lien hypertexte dont
sélecteur:pseudo-classe {
la page cible a déjà été visitée. C'est un genre d'historique en quelque sorte.
déclaration(s) de style
} a{ a:hover{
Les pseudo-classes peuvent également être utilisées avec des classes. font-weight:bold; color:#000088;
color:#EE6600; text-decoration:underline;
Elles se noteront alors : text-decoration:none; }
}
sélecteur.classe:pseudo-classe {
déclaration(s) de style } 33 34

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

:active
Motif Signification
La pseudo-classe :active désigne un lien hypertexte sélectionné.
* Sélecteur universel, sélectionne toutes les balises sans exception.
Il s'agit de l'instant où le visiteur clique sur le lien, si celui-ci .val Les éléments dont l’attribut class ="val"
reste affiché sur la page (cas où la page est figée après le clic, ou #mon_id Les éléments dont l’id est mon_id.

le lien est ouvert dans une nouvelle fenêtre) on peut voir l'effet E La balise E (un élément de type E).

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

de cette pseudo-classe.
EF La balise F descendant de la balise E.
:hover
E+F La balise F immédiatement précédé par la balise E.
La pseudo-classe :hover désigne un objet survolé par le curseur
E[att] La balise E qui contient l’attribut att(peu importe la valeur).
de la souris, il peut être un hyperlien ou n'importe quel autre E[att="val"] La balise E qui contient l’attribut att à la valeur val.
objet. E.val La balise E dont l’attribut class ="val“.

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

35 36

6
 04/04/2023

La balise span :
Les éléments div et span (conteneurs génériques)

• Il arrivera parfois que vous ayez besoin d'appliquer une class à certains
Nous allons faire appel à la balise inline <span>. On la met autour de
mots qui ne sont pas entourés par des balises.
Neil Armstrong, on lui rajoute une class et on crée le CSS.
• En effet, le problème des class c'est qu'il s'agit d'un attribut, vous ne Code HTML :
pouvez donc en mettre que sur une balise.

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

paragraphe suivant : La mise en forme des éléments html de même attribut class sera faite ensuite
par du code css.
<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>
Code CSS :

Ça serait facile à faire s'il y avait une balise autour de "Neil Armstrong".
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.
37 38

Exemple :
La balise div :
Pour appliquer la même mise en forme à plusieurs éléments, nous allons
<div> est une balise de type block. Comme <p>, <h1> etc... simplement placer ces différents éléments à l’intérieur de nos
<div> crée un nouveau "bloc" dans la page, et provoque donc balises <div> et </div> puis appliquer les styles CSS directement au div.
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.

Comment peut-on régler le
La balise div permet de regrouper plusieurs éléments HTML. même problème à l’aide de
classes?
39 40