Cour CSS3 Eleves

3ième S.
I Sciences et Technologies de l’Informatique
LES FEUILLES DE STYLE

CSS3
I. 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 » :

1
<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.
Mme Faten Andolsi

3ième S.I Sciences et Technologies de l’Informatique
 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
{
}
2 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 */
}
Mme Faten Andolsi

II. 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. :
3 .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 :
………………………………………………
{ text-align: right; }
 Code HTML :
<p ……………………………………………………………… >
<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 (#) :
Mme Faten Andolsi

Exp. :
#introduct
ion
{ 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).
III. 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 :
Mme Faten Andolsi

 Page.html :
…
<h1>Un titre de niveau 1</h1>
…………….
<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>
…………….
<p>Un troisième paragraphe</p>
…………….
<p>Un dernier paragraphe</p>
…………….
…
 Style.css :
body { background-color: lightBlue ; }
……………. { color: white ;

background-color: purple ;
width : 80% ; /*Définit la largeur des div à 80% de leur parent (body ici)*/
5 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.
Mme Faten Andolsi

IV. 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.
…….… {
………………………………………..……………………… ;
…………………………………………………..…………… ; }
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
6 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 :
…………..….. {
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.
Mme Faten Andolsi

3. 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 :
……………….… {
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 :
7 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="#" ……………………………………………….. >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 :
……………………………………………………
…
{ ……………………………………..……….. }
L’écriture suivante :
Balise [Attribut]
{
}
Permet de cibler des balises précises ayant un attribut précis.
Mme Faten Andolsi

Cour CSS3 Eleves

Transféré par

Informations du document

Titre original

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

Cour CSS3 Eleves

Transféré par

Droits d'auteur :

Formats disponibles

3ième S.

I Sciences et Technologies de l’Informatique

LES FEUILLES DE STYLE

I. Où écrire le code CSS ?

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

 Reprenons l’exemple précédent :

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

Mme Faten Andolsi

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

Mme Faten Andolsi

II. Sélecteurs : class et id

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

Mme Faten Andolsi

III. Les Balises Universelles div et span :

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

Mme Faten Andolsi

……………. { color: white ;

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

Mme Faten Andolsi

IV. Les sélecteurs avancés :

2. Une balise contenue dans une autre :

Mme Faten Andolsi

3. Une balise qui en suit une autre :

4. Une balise qui possède un attribut :

Mme Faten Andolsi

Vous aimerez peut-être aussi