2 Cours Css3

3ième S.I.
Sciences et Technologies de l’Informatique
LES FEUILLES DE STYLE
INTRO :
Le langage CSS (Cascading Style Sheets : Feuilles de Style en Cascade) a été développé par
le W3C (World Wide Web Consortium) à partir de 1996.
Il a pour but de séparer totalement la présentation d'une page Web de son contenu (c'est à dire
du langage HTML), et de faciliter ainsi la maintenance et l'accessibilité d'un site.
I. PRINCIPE :
Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de
feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une pour modifier une
police de caractère ou une couleur de fond... Avec les "Cascading Style Sheets" (CSS), ce lourd
handicap est résolu.
C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme des pages :
le positionnement des éléments, l'image de fond, les polices de caractère, les couleurs, etc.
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.
Avantages :
 Obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à
une même définition de style
 Simplifie le code.
 Une maintenance de site beaucoup plus facile.
 Meilleure accessibilité : permet de produire des pages web respectueuses des normes du
W3C, les pages seront donc accessibles pour la majorité des navigateurs (ordinateurs,
tablettes, smartphones, smart TV, …).
TAHRI Tawfik 1 GHADHIOUI Monji

3ième S.I. Sciences et Technologies de l’Informatique
II. Où écrire le code CSS ?

On peut écrire du code en langage CSS à trois endroits différents :
- dans un fichier .css ;
- dans l'en-tête <head> du fichier HTML ;
- directement dans les balises du fichier HTML, à travers un attribut style.
 Nous allons utiliser la première méthode, elle est la plus recommandée. Le code de la feuille de
style se fera dans un fichier à part d’extension « .css ». Le lien entre la feuille de style et le fichier
html se fera dans l’en-tête <head> de la page web en utilisant la balise « link » de la manière
suivante :
<link rel="stylesheet" href="nom_fichier.css">
Exp. :
- Soit le code suivant contenu dans le fichier « style.css » :
p{
color : blue ;
}
- Et la balise suivante dans le fichier « page1.html » :

<head>
<link rel="stylesheet" href="style.css">
</head>
 Résultat : A chaque utilisation de la balise <p> dans la page web page1.html, le contenu de
chaque paragraphe aura le même style : couleur en bleu. Il en sera de même pour toutes les
autres pages utilisant la même feuille de style.

 Reprenons l’exemple précédent :

p{
color : blue ;
}
Dans un code CSS comme celui-ci, on trouve trois éléments différents :

 des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par
exemple, si je veux modifier l'apparence de tous les paragraphes <p>, je dois écrire p.
 des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a
par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui
permet d'indiquer la taille du texte, etc. Il y en a beaucoup d’autres.
 les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la
propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle
taille on veut, etc.
Schématiquement, une feuille de style CSS ressemble donc à cela :
balise1
{
propriété1 : valeur1 ;
propriéte3 : valeur3 ;
}
balise2
{
propriéte2 : valeur2 ;
}
balise3
{
}

Rques :
 Lorsqu’on a, par exemple, le cas suivant :
h1 {
color : blue;
}
em (<em> = mise en emphase, pour insister)
{
color : blue;
}
 On peut l’écrire de cette manière :
h1 , em {
color : blue;
}
 Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront
pas affichés, ils servent simplement à indiquer des informations : /* Votre commentaire */
Exp :
p{
color : blue ; /* les paragraphes de couleur bleu */
}
III. Sélecteurs : class et id

Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises.
Pour cela les spécifications CSS ont introduit le concept de classe. Pour que certains paragraphes
seulement soient écrits d'une manière différente on utilise des attributs spéciaux qui fonctionnent
sur toutes les balises :
- L'attribut class.
- L’attribut id.
1. L'attribut class :
La définition des classes est aussi simple que celles des styles. Elle consiste
à écrire un point (.) et le nom que l'on souhaite donner à la classe.
Rque : Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de
tirets.
.Nom-de-la-classe {
propriété-de-style: Valeur;
propriété-de-style: Valeur;
...; }
Où « Nom-de-la-classe » représente le nom donné à la classe.

Exp. :
.Rouge {font-family: Verdana ; color: red; }
 Pour appeler ce style dans la page HTML, on indique simplement class="Rouge" à l'intérieur de

la balise voulue :
<b class="Rouge"> Texte à mettre en rouge et en gras </b>
Activité 1 :
Les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et
celles-ci sont souvent placées à droite de la page. Il va donc falloir déclarer un style à cette mise en
forme.
 Code CSS :
.haut
{ text-align: right; }
 Code HTML :
<p class="haut">
<a href="#signet_haut">Haut de page</a>
</p>
2. L'attribut id :
L’attribut id fonctionne exactement de la même manière que class mais il ne peut être utilisé
qu'une fois dans le code. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en
forme de caractères.
Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :
Exp. :
#introduction
{ color: blue; }
 Pour appeler ce style dans la page HTML, on indiquera id="introduction" à l'intérieur de la
balise voulue :
<div id="introduction > Ce bloc de texte sera de couleur bleu. </div>

Activité 2 :
Construisons une section de page à deux
colonnes. L'une des deux colonnes servira pour un
menu de 110 pixels de large flottant à gauche,
l'autre pour un contenu placé à 120 pixels du bord
gauche (pour ne pas empiéter sur le menu bien
sûr).
 Code CSS :
#menu {
background-color: silver;
width: 110px;
float: left; }
#contenu {
margin-left: 120px; }
 Code HTML :
…
<div id="menu">
<ul>
<li>élément 1</li>
</ul>
</div>
<div id="contenu">
<p> bla bla bla bla bla bla bla </p>
</div>
…
IV. Les Balises Universelles div et span :

Les éléments HTML div et span ont été créés principalement pour simplifier la mise en page des
pages HTML en CSS c’est-à-dire pour simplifier l’application de certains styles CSS.
1. La balise <div> </div> :

C'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la
même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » ou «
section » dans la page et provoquent donc obligatoirement un retour à la ligne.

Activité 3 :
En saisissant le code suivant, on constatera la différence entre la présence d’un paragraphe dans
un bloc généré avec <div> et l’existence d’un paragraphe en dehors d’un bloc :
 Page.html :
…
<h1>Un titre de niveau 1</h1>
<div>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe</p>
<ul>
<li>Un élément de liste</li>
<li>Un autre élément de liste</li>
</ul>
</div>
<p>Un troisième paragraphe</p>
<div>
<p>Un dernier paragraphe</p>
</div>
…
 Style.css :
body { background-color: LightBlue ; }
div { color: white ;

background-color: purple ;
width : 80% ; /*Définit la largeur des div à 80% de leur parent (body ici)*/
margin : 0 auto ; /*Permet de centrer les div dans leur élément parent (body ici)*/ }
2. La balise <span> </span> :

C'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de
texte, pour sélectionner certains mots uniquement. Les balises <strong> (rendre du texte
important) et <em> (insister sur du texte) sont de la même famille.
Ainsi, on va pouvoir placer une certaine partie du texte d’un titre ou d’un paragraphe dans un
élément span pour ensuite pouvoir lui appliquer un style CSS particulier, chose qu’il nous était
impossible de faire jusqu’à présent.
Activité 4 :
En modifiant le code des fichiers de l’activité précédente, mettre le texte « autre élément » et
« troisième » en gras, le fond jaune et couleur de police noir.

V. Les sélecteurs avancés :

1. Le sélecteur universel * :
Pour sélectionner les éléments de la page à modifier, on utilise ce qu'on appelle des
sélecteurs.
Activité 5 :
En modifiant le code de l’activité précédente, définir une style de police par défaut à
l’ensemble de la page : couleur Blanc et police Calibri.
*{
font-family : calibri;
color : white; }
Le sélecteur étoile * permet de sélectionner tous les éléments HTML d’une page d’un
coup, c’est pourquoi il est également appelé sélecteur CSS universel.
2. Une balise contenue dans une autre :

Activité 6 :
Saisir le code suivant dans un fichier page1.html :
…
<h1>Un titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe avec un <a href="#">lien</a></p>
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
<li>Elément de liste 2</li>
</ul>
…
Rque :
Utiliser href="#" permet de créer un lien HTML valide mais qui ne mène nulle part, qui est "vide".
Dans un fichier style.css, saisir le code suivant :
pa{
background-color: yellow;
}
Constatation : seule la balise <a> contenue dans une balise <p> a été modifiée.
 L’écriture suivante :
XY
{ (X et Y sont deux balises quelconques.)
}
Permet de sélectionner toutes les balises <Y> situées à l'intérieur d'une balise <X>. Notez qu'il n'y
a pas de virgule entre les deux noms de balises.
3. A + B : une balise qui en suit une autre

Activité 7 :
Dans le code du fichier page1.html de l’activité précédente, déplacer la balise <a> en dehors de
la balise <p> pour obtenir le code suivant :
…
<p>Un autre paragraphe avec un </p>
<a href="#">lien</a>
…
Dans le fichier style.css, saisir le code suivant :
p+a{
background-color: yellow;
}
Constatation : seule la balise <a> située après une balise <p> a été modifiée.
 L’écriture suivante :
X+Y
{
}
Permet de sélectionner la première balise <Y> située après une balise <X> grâce au caractère +.
4. Une balise qui possède un attribut :

Activité 8 :
Dans le code du fichier page1.html de l’activité précédente, ajouter à la balise <a> un attribut
title ayant pour valeur "Infobulle" pour obtenir le code suivant :
…
<p>Un autre paragraphe avec un </p>
<a href="#" title="Infobulle">lien</a>
…
En utilisant le fichier style.css, on veut cibler les balises <a> ayant un attribut title pour donner
une taille de police au lien de 50 px :
a[title]
{ font-size: 50px; }
L’écriture suivante :
Balise [Attribut]
{
}
Permet de cibler des balises précises ayant un attribut précis.

2 Cours Css3

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2 Cours Css3

Transféré par

Droits d'auteur :

Formats disponibles

3ième S.I.

Sciences et Technologies de l’Informatique

LES FEUILLES DE STYLE

TAHRI Tawfik 1 GHADHIOUI Monji

II. Où écrire le code CSS ?

- Et la balise suivante dans le fichier « page1.html » :

TAHRI Tawfik 2 GHADHIOUI Monji

 Reprenons l’exemple précédent :

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

Schématiquement, une feuille de style CSS ressemble donc à cela :

TAHRI Tawfik 3 GHADHIOUI Monji

III. Sélecteurs : class et id

Où « Nom-de-la-classe » représente le nom donné à la classe.

TAHRI Tawfik 4 GHADHIOUI Monji

 Pour appeler ce style dans la page HTML, on indique simplement class="Rouge" à l'intérieur de

<b class="Rouge"> Texte à mettre en rouge et en gras </b>

<div id="introduction > Ce bloc de texte sera de couleur bleu. </div>

TAHRI Tawfik 5 GHADHIOUI Monji

IV. Les Balises Universelles div et span :

1. La balise <div> </div> :

TAHRI Tawfik 6 GHADHIOUI Monji

div { color: white ;

2. La balise <span> </span> :

TAHRI Tawfik 7 GHADHIOUI Monji

V. Les sélecteurs avancés :

2. Une balise contenue dans une autre :

3. A + B : une balise qui en suit une autre

4. Une balise qui possède un attribut :

TAHRI Tawfik 9 GHADHIOUI Monji

Vous aimerez peut-être aussi