Chapitre 3 : Production des feuilles de style

Compétences visées :

 Savoir comment insérer les styles,

 Savoir comment appliquer les styles,
 Faire une mise en forme générale d’une page Web

Leçon 17 : Utilisation de l’attribut "style" dans une balise

Compétences visées :
 Ajouter un attribut style dans une balise html,
 Ajouter à un document html un style pour changer le background du document,
 Ajouter à une page html une propriété de style pour changer la couleur du texte.
Introduction
Le CSS (Cascading Style Sheets) est un langage qui permet de réaliser la mise en forme et le
graphisme de la page Web. Si le HTML s’occupe de créer le fond ou le contenu, le CSS
s’occupe de la mise en forme et donne au contenu l’apparence qu’on souhaite.
I. Utilités et avantages du CSS
- Séparation du contenu et de la mise en forme.
- Cohésion de la présentation tout au long du site avec les feuilles de style externes.
- Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en quelques
lignes plutôt que de devoir changer un grand nombre de balises.
- Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses
différentes versions.
- Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
- Réduire le temps de chargement des pages.
- Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance
entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux
ou de balise <DD>...) et ainsi augmenter la créativité des écrivains du Web.
- Permettre le positionnement au pixel près du texte et/ou des images sans passer par les
"layers" exclusifs à Netscape 4.0.

II. Fonctions du CSS dans un document HTML

La feuille de styles va vous permettre de définir autant de styles que vous souhaitez et que
vous pourrez alors appliquer à l’ensemble des pages web de votre site. En outre, la feuille
de styles vous permettra de décider de la couleur, de la taille, de la police, de vos
hyperliens, aidera à la réalisation d’une partie de l’ergonomie de votre site web, etc.
III. Ou placer le code CSS dans un document HTML
On peut écrire le code CSS dans trois endroits du fichier HTML: dans les balises, dans l’entête
"head" et dans un fichier CSS externe. Dans le cadre de cette leçon nous n’aborderons que
le premier cas.
IV. Insertion du code CSS dans les balises du fichier html
1. Syntaxe
Avec cette méthode, un attribut "style" doit être ajouté à chaque balise dont on aimerait
effectuer la mise en forme du contenu.

©BAKONGA JB Page 1 sur 9

Sa syntaxe est la suivante : <balise style="propriété1 : valeur1; propriété2 : valeur2 ;
… ;">
Ou : - Propriété représente un effet de style que l’on veut appliquer à la balise. Il peut
s’agir de couleur, la taille, la police, …
- Valeur : à chaque propriété il faut associer une valeur. Exemple "blue" pour la
propriété "color".
Remarque :
- Les propriétés de style sont entourées par des doubles côtes " ".
- Le couple "propriété de style/valeur" est séparé par un double-point (:).
- Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
- Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
- On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les
différentes valeurs par des virgules. <H3 style ="font-family: Arial, Helvetica, sans-serif">
2. Exemples
Code CSS Signification
<p style="font-style:italic;">Ce paragraphe est en L’attribut style mets le paragraphe en italique
italique</p>
<p style="Background-color : red ;"> le fond du L’attribut style ajoute au paragraphe une couleur de
paragraphe est rouge </ > fond rouge
<p style="color : blue font-style:italic;">Ce L’attribut style mets le paragraphe en bleu et en
paragraphe est bleu et italique</p> italique

Conclusion : cette méthode est très simple mais on retrouve les mêmes inconvénients que
l’utilisation des mises en page dans le document. On ne sait pas comment faire le lien entre
les propriétés et les objets sur lesquels elles portent. Elle est la moins recommandée.

Exercice d’intégration

1. À quoi sert l’attribut "style" ? Donner la syntaxe de cet attribut ?

2.

©BAKONGA JB Page 2 sur 9

Leçon 18 : Utilisation de la balise "style" dans la section "head"
Compétences visées :
 Insérer un attribut style dans la section ‘head’ du fichier html pour modifier le style
de toutes les balises de la page.
 Modifier un style à l’intérieur d’un paragraphe ou appliquer un style différent à des
morceaux de paragraphes.
 Appliquer un même style à plusieurs paragraphes sans devoir répéter les éléments de
style.
Introduction
Cette méthode consiste à insérer le code CSS directement dans une balise <style>…</style>
à l’intérieure de l’entête du fichier html c’est-à-dire à l’intérieure de la balise
<head>…</head>. Pour y parvenir il faut d’abord connaitre la structure ou syntaxe d’une
feuille de style et ensuite l’appliquer soit à une balise, soit à plusieurs balises, soit à un
sélecteur, puis l’insérer dans une balise <style>…</style> et enfin mettre l’ensemble à
l’intérieure de la balise <head>…</head>.
1. Structure de base d’une feuille de style et d’une balise "STYLE"
1.1. D’une feuille de style
La structure de base d’un code CSS est la suivante :
Elément {
Propriété : valeur ;
Propriété : valeur ;
Propriété : valeur ;
}
Où : - Elément peut être une balise, un ensemble de balise ou un sélecteur
- Propriété représente un effet de style que l’on veut appliquer à Elément. Il peut
s’agir de couleur, la taille, la police, …
- Valeur : à chaque propriété il faut associer une valeur. Exemple "blue" pour la
propriété "color".
Remarque :
- Les feuilles de style portent sur des balises principalement et quelques autres éléments
comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme
balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY...
- Les propriétés de style sont entourées par des "{" et pas des [ou des parenthèses.
- Le couple "propriété de style/valeur" est séparé par un double-point (:).
- Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
- Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
- L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la
lisibilité du code source.
- Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes :
H3 {font-family: Arial;
font-style: italic;
font-color: green}

©BAKONGA JB Page 3 sur 9

 - On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les
différentes valeurs par des virgules. H3 {font-family: Arial, Helvetica, sans-serif}
- On peut attribuer un même style à plusieurs balises (séparées par des virgules).
H1, H2, H3 {font-family: Arial; font-style: italic}
1.2. D’une balise "style"
La structure de base d’une balise "style" dans la section HEAD est la suivante :
<STYLE type="text/css">
<!--
La ou les feuille(s) de style
-->
</STYLE>

• La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
• L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading
style sheets (css).
Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions
de ce "langage".
• La balise Html de commentaires <!-- ... --> empêche que les browsers qui ne connaissent
pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur
des tags de commentaires seront ignorées par ces browsers.
• Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention
désormais classique (C, C++, Javascript...) de /* commentaires */.
2. Appliquer un style à une balise
Ici, Elément est une balise. La syntaxe est la suivante :
Syntaxe Exemple Signification
Balise { <head> Ce code permet de mettre le texte de tous les
Propriété : valeur ; <style type = “text/css”> paragraphes en bleu avec une taille de 12
Propriété : valeur ; <!-- pixels et une couleur de fond pink.
………. P{
} Color : blue ;
Font-size : 12px ;
Background-color :pink;
}
-- >
</style>
</head>
balise { <head> Ce code insère une image de fond dans le
Background-image : <style> document web
url("nom de l’image") ; body {
} Background-image :
url("maphoto.jpg") ;
}
</style>
</head>

3. Appliquer un style à plusieurs balises

Ici, Elément est plusieurs balises. La syntaxe est la suivante :

©BAKONGA JB Page 4 sur 9

Syntaxe Exemple Signification
Balise1, Balise1, … { <head> Ce code permet de mettre le texte de tous les
Propriété : valeur ; <style> paragraphes et titre de niveau 1 en bleu avec
Propriété : valeur ; P,h1 { une taille de 12 pixels.
………. Color : blue ;
} Font-size : 12px ;
}
</style>
</head>

4. Appliquer un style avec un sélecteur

Un sélecteur est un attribut spécial qui permet d’appliquer une mise en forme aux contenus
de certaines balises. Il existe deux types de sélecteurs : le sélecteur de classe déclaré par
l’attribut "class" et le sélecteur d’identifiant déclaré par l’attribut "id".
4.1. Le sélecteur de classe
Il permet de décrire une mise en forme pour plusieurs éléments d’une même page HTML
grâce au mot clé "class".
Syntaxe : sa structure de base est la suivante :
.nomdelaclasse {
Propriété : valeur ;
Propriété : valeur ;
……….
}

NB : L'emploi du point (.) devant le nom de classe est indispensable.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.
<balise class="nom_de-classe"> .... </balise>
Exemple de Code CSS Exemple de code HTML signification
<head> <p class="introduction"> Bonjour et Ce code définit une couleur rouge et
<style> bienvenue sur mon site </p> une écriture en gras pour toutes les
.introduction { balise de la page HTML ou il est inclus
color : red ; et qui sont définies comme étant de la
font-weight : bold ; classe "introduction"
}
</style>
</head>

4.2. Le sélecteur d’identifiant

Il permet de décrire une mise en forme pour un seul élément d’une même page HTML grâce
au mot clé "id".
Sa syntaxe est la suivante :
#nomIdentifiant {
Propriété : valeur ;
Propriété : valeur ;
……….
}
NB : L'emploi du point (#) devant le nom d’identifiant est indispensable.
©BAKONGA JB Page 5 sur 9
Pour appeler l'effet de style dans le document, on ajoute le nom de l’Identifiant à la balise.
<balise id=" nom_de_ID"> .... </balise>
Exemple de Code CSS Exemple de code HTML signification
<head> <p id="introduction"> Bonjour et Ce code définit une couleur rouge et
<style> bienvenue sur mon site </p> une écriture en gras pour la première
#introduction { balise de la page HTML ou il est inclus
color : red ; et qui sont définies comme étant de
font-weight : bold ; l’identifiant "introduction"
}
</style>
</head>

5. Les balises <SPAN> et <DIV>

Deux problèmes se posent lors de l'utilisation des feuilles de style :
Le premier est de pouvoir modifier facilement un style à l'intérieur d'un paragraphe ou si
vous préférez d'appliquer des styles différents à des morceaux de paragraphes. La balise
<SPAN> </SPAN> permet de résoudre ce problème.
Le deuxième problème est l'inverse du précédent. Comment appliquer un même style à
plusieurs paragraphes sans devoir répéter les éléments de style? Ce problème est résolu par
la balise <DIV> </DIV> qui permet de délimiter une zone de plusieurs paragraphes.
5.1. La balise <SPAN> </SPAN>

La balise <SPAN> ... </SPAN> permet d'appliquer des styles à des éléments de texte
d'un paragraphe ou à un morceau de paragraphe (phrase, mot, lettre, …).

Exemple : je voudrais écrire : Un monde de géants

. <HTML>
<HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P>Un monde de <SPAN class=element>géants</SPAN>.</P>
</BODY>
</HTML>

5.2. La balise <DIV> </DIV>

La balise <DIV> ... </DIV> permet de regrouper plusieurs paragraphes ou si vous

préférez, de délimiter une zone comportant plusieurs paragraphes.
Exemple :
<HTML>
<HEAD>
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
<DIV class=zone>

©BAKONGA JB Page 6 sur 9

 <P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!</P>
</DIV>
</BODY>
</HTML>

Conclusion : Avec cette méthode le style est dédié au document. On ne peut pas l'utiliser
ailleurs. On ne sait pas également comment faire le lien entre les propriétés et les objets
sur lesquels elles portent. Elle est moins intéressante.

Activités d’intégration
1. Quelle est la différence entre l‘attribut class et l‘attribut id ?
2. Écrire le code CSS permettant de mettre en gras, italique et faire clignoter un mot
particulier d‘un paragraphe.
3. Soit l’exercice 2 de l’activité d’intégration précédente :

4.

©BAKONGA JB Page 7 sur 9

 Leçon 19 : Création d’un fichier de styles
Compétences visées :
 Créer un fichier de style externe aux pages html
 Joindre des liens de référence entre le fichier de style et les pages html
 Insérer des commentaires dans une feuille de style.
 Appliquer le contenu d’une feuille de styles à plusieurs pages HTML..
Introduction
Jusqu’ici, nous avons étudiés une présentation de style valable pour une page (styles
internes). Mais CSS nous propose mieux. Définir une présentation de style valable pour
plusieurs pages et même pour toutes les pages d'un site. Ce qui est possible, en créant une
page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette
page de style.
1. Méthode et syntaxe du lien entre le fichier html et le fichier de style.
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css (soit styles.css)
qui contiendra toutes les feuilles de style. Ensuite, on crée une page normale html soit
page1.htm (bien entendu dans le même répertoire que le fichier styles.css). Enfin, on inclut
dans le fichier html le fichier de style en utilisant toujours dans l’entête une balise spéciale
de lien comme suit :
<LINK rel=stylesheet type="text/css" href="styles.css">
Ce lien permet d’indiquer à la page web quelle feuille de styles elle doit appliquer
Explication des attributs :
• La balise <LINK> avertit le browser qu'il faudra réaliser un lien.
• L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de
style externe.
• L'attribut type="text/css" précise que l'information est du texte et du genre cascading style
sheets (css).
• L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.
2. Exemple : Appliquer le contenu d’une feuille de styles à plusieurs pages HTML
Soient deux pages utilisant le même fichier CSS.

Code du fichier CSS Code du fichier HTML de la Code du fichier HTML de la page2
page1
.intro { <html> <html>
font-family: Arial, <head> <head>
Helvetica, sans-serif; <title>Feuille de style externe</title> <title>Feuille de style externe</title>
font-size: 16px; <link href=”feuille_externe.css” <link href=”feuille_externe.css”
font-style: italic; rel=”stylesheet” type=”text/css”> rel=”stylesheet” type=”text/css”>
color: red; </head> </head>
text-decoration: <body> <body>
underline; <p class="intro">Bonjour, chers <h1 class="intro">Bonjour le monde</h1>
} élèves, utiliser le CSS avec </body>
Body{ modération. Merci</p> </html>
Background- </body>
color:yellow;} </html>

©BAKONGA JB Page 8 sur 9

3. Insertion des commentaires
Pour insérer des commentaires dans un fichier CSS, il suffit de placer le contenu dans les
signes /* contenu du commentaire */
Conclusion :
Il est plus fastidieux et difficile d‘insérer une feuille de style directement dans les balises
parce qu‘on se retrouve à faire la même opération plusieurs fois. De plus, si on désire
changer la mise en forme, il faut modifier chaque balise. Or avec un fichier CSS externe, on
n‘aura besoin d'écrire les instructions de mise en forme qu'une seule fois pour tout le site.
On écrit un seul fichier de mise en forme et on l‘utilise pour plusieurs pages web en l‘insérant
à l‘entête de toutes les pages à l‘aide de l‘instruction < link rel="stylesheet" type = "text/css"
href="nom_fichier.css" />

Activités d’intégration
1. Écrire le code d‘un fichier CSS appliquant une couleur précise à un titre et à un
paragraphe.
2. Soit l’exercice 3 de l’activité d’intégration précédente :

3. Page 151, livre de 1ère, ENS.

©BAKONGA JB Page 9 sur 9