Vous êtes sur la page 1sur 17

Développement des Applications Web Chapitre 02 : CSS

Chapitre 02
Le Langage CSS (Cascading Style Sheets)

1. Définition
CSS est un langage de style qui définit la présentation des fichiers HTML. Par exemple, CSS
couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images
d'arrière-plan, les positionnements évolués et bien d'autres choses.
CSS offre aux concepteurs Web des possibilités de présentations sophistiquées, gérées par
tous les navigateurs. En même temps, séparer le style de présentation des documents de
leur contenu rend leur entretien beaucoup plus facile.
Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le
langage HTML. Le HTML est né en 1991 et CSS en 1996.

2. La syntaxe CSS de base


Nous avons vue dans le chapitre 1 comment rendre - avec HTML - le fond d’une page Web
rouge :
<BODY Bgcolor="#FF0000">
Avec CSS, on peut obtenir le même résultat comme suit :
BODY {Background-Color: #FF0000}
La structure fondamentale d’une commande CSS :
SELECTEUR
{
Propriété : Valeur;
}
SELECTEUR : à quelle balise HTML la propriété s’applique.
Propriété : les « effets de style » de la page sont rangés dans des propriétés ou l’attribut.
Valeur : la valeur de la propriété.

3. Ecrire le code CSS


On peut écrire du code en langage CSS à trois endroits différents :
- Directement dans les balises
Vous pouvez ajouter un attribut style à n'importe quelle balise, et vous insérerez votre code
CSS directement dans cet attribut.
Exemple 1 :
<HTML>
<HEAD>

1 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

<TITLE>Exemple 1</TITLE>
</HEAD>
<BODY>
<H2>Mon premier site avec CSS</H2>
<P Style = "Color: Blue; Text-align: center">Bienvenue sur mon site !</P>
</BODY>
</HTML>

- Dans l'en-tête <HEAD> du fichier HTML :


Il existe une autre méthode pour utiliser le CSS, cela consiste à insérer le code CSS dans une
balise <STYLE> à l'intérieur de l'en-tête <HEAD>.
Exemple 2 :
<HTML>
<HEAD>
<TITLE>Exemple 2</TITLE>
<STYLE>
P
{
Color: Blue;
Text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<H2>Mon premier site avec CSS</H2>
<P>Bienvenue sur mon site !</P>
</BODY>
</HTML>

- Dans un fichier de style .css :


On écrit le code CSS dans un fichier spécial ayant l'extension .css. Cela nous évite de tout
mélanger dans un même fichier.

2 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

Exemple 3 :
Créer un fichier HTML avec le code suivant :
<HTML>
<HEAD>
<TITLE>Exemple 1</TITLE>
<LINK Href="Style.css" Rel="Stylesheet">
</HEAD>
<BODY>
<H2>Mon premier site avec CSS</H2>
<P>Bonjour et bienvenue sur mon site !</P>
</BODY>
</HTML>
La balise <LINK Href="Style.css" Rel="Stylesheet"> indique que ce fichier HTML est associé à
un fichier appelé Style.css et chargé de la mise en forme.
Créer maintenant un nouveau fichier - ayant l'extension .css - avec le code CSS suivant :
P
{
Color: Blue;
Text-align: center;
}
Enregistrez le fichier en lui donnant le nom Style.css
Ouvrir maintenant votre fichier page.html dans votre navigateur pour le tester, remarqué
que les paragraphes sont écrits en bleu :

4. Styles pour plusieurs balises


Pour appliquer un ou plusieurs styles sur plusieurs balises HTML il suffit de combiner la
déclaration en séparant les noms des balises par une virgule.
Exemple 4 :
<HTML>
<HEAD>
<TITLE>Exemple 4</TITLE>
<STYLE>
H2, P
{
Color: Blue;
}
</STYLE>
3 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

</HEAD>
<BODY>
<H2>Mon premier site avec CSS</H2>
<P>Bienvenue sur mon site !</P>
</BODY>
</HTML>

5. Les attributs CLASS et ID


Pour appliquer un style sur quelques parties d’une page Web (Pour que certains paragraphes
seulement soient écrits d'une manière différente par exemple), on peut placer le code CSS
dans un attribut STYLE sur les balises que l'on vise, Mais l’opération n'est pas pratique si le
nombre de balise est grand. Pour résoudre le problème, on peut utiliser les attributs
spéciaux CLASS et ID qui fonctionnent sur toutes les balises.
En fait, il faut donner à l’attribut CLASS (ou ID) une valeur ou un nom qui sert à identifier les
balises sur lesquelles on applique le style et pour faire cela en CSS, indiquez le nom de votre
classe en commençant par un point.
Exemple 5 :
On veut par exemple que seules les balises qui ont comme nom 'Exp' soient affichées en
bleu :
<HTML>
<HEAD>
<TITLE>Exemple 5</TITLE>
<STYLE>
.Exp1
{
Color: Blue;
}
#Exp2
{
Color: red;
}
</STYLE>
</HEAD>
<BODY>
<H2>Titre 1</H2>
<P Class="Exp1">Paragraphe 1</P>

4 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

<P>Paragraphe 2</P>
<H2 Class="Exp1">Titre 2</H2>
<P>Paragraphe 3</P>
<H2>Titre 3</H2>
<P Class="Exp1">Paragraphe 4</P>
<H2>Titre 4</H2>
<P Id="Exp2">Paragraphe 5</P>
</BODY>
</HTML>

L’attribut ID fonctionne exactement de la même manière que CLASS, à un détail près : il ne


peut être utilisé qu'une fois dans le code. D'ailleurs, nous avons déjà vu l'attribut ID dans le
chapitre 1 dans le point des liens de type ancre.

6. Sélecteurs avancés
- Sélecteur universel (*)
*
{
}
Sélectionne toutes les balises sans exception.
- Balise contenue dans une autre
H3 EM
{

5 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

}
Sélectionner toutes les balises <EM> situées à l'intérieur d'une balise <H3>.
- Balise qui en suit une autre
H3 + P
{
}
Sélectionner la première balise <P> située après un titre <H3>.
- Balise qui possède un attribut
A[Title]
{
}
Sélectionner tous les liens <A> qui possèdent un attribut Title.
A[Title = "Cliquez ici"]
{
}
L’attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
A[Title*= "ici"]
{
}
L'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
- Première lettre
P:First-letter
{
}
Sélectionner la première lettre d’un paragraphe.
- Première ligne
P:First-line
{
}
Sélectionner la première ligne d’un paragraphe.
Exemple 6 :
<HTML>
<HEAD>
<TITLE>Exemple 6</TITLE>
<STYLE>
*
{
Color: Blue;
}
P EM
{
Color: Red;

6 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

}
H2 + P
{
Color: Green;
}
P[Align]
{
Color: Black;
}
P[Align= Left]
{
Color: Brown;
}
P:First-letter
{
Color: Yallaw;
}
</STYLE>
</HEAD>
<BODY>
<H2>Titre 1</H2>
<P>Paragraphe Numéro 1</P>
<P>Paragraphe <EM>Numéro 2</EM></P>
<H2>Titre 2</H2>
<P Align=Center>Paragraphe Numéro 3</P>
<P>Paragraphe Numéro 4</P>
<H2>Titre 3</H2>
<P>Paragraphe Numéro 5</P>
<P Align=Left>Paragraphe Numéro 6</P>
</BODY>
</HTML>

7 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

7. Formatage du texte
- La police
La propriété CSS qui permet d'indiquer la police à utiliser est : Font-family : Police1, Police2,
- La taille
Pour indiquer une taille absolue, on utilise le em ou px : Font-size: 16px;
Comme on peut utiliser une taille relative : Font-size: Small;
- Italique, gras, souligné
Pour mettre en italique, on utilise Font-style qui peut prendre trois valeurs :
Italic : le texte sera mis en italique.
Oblique : le texte sera passé en oblique.
Normal : le texte sera normal. Cela vous permet d'annuler une mise en italique.
La propriété CSS pour mettre en gras est Font-weight et prend les valeurs suivantes :
Bold : le texte sera en gras ;
Normal : le texte sera écrit normalement (par défaut).
La propriété Text-decoration permet, entre autres, de souligner le texte, mais pas
seulement. Voici les différentes valeurs qu'elle peut prendre :
Underline : souligné.
Line-through : barré.
Overline : ligne au-dessus.
Blink : clignotant (Ne fonctionne pas sur tous les navigateurs).
None : normal (par défaut).

8 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

- L'alignement
On utilise la propriété Text-align et on indique l'alignement désiré :
Left : le texte sera aligné à gauche (c'est le réglage par défaut).
Center : le texte sera centré.
Right : le texte sera aligné à droite.
Justify : le texte sera justifié.
- Les flottants
Le CSS nous permet de faire flotter un élément autour du texte avec la propriété Float qui
peut prendre deux valeurs :
Left : l'élément flotté à gauche.
Right : l'élément flotté à droite.
Il est courant de faire flotter une image pour qu'elle soit habillée par du texte.
Il existe en fait une propriété CSS qui permet de stopper un flottant. C'est la propriété Clear,
qui peut prendre la valeur :
Both : le texte se poursuit en-dessous, que ce soit après un Float: left; ou après un Float:
right;
Exemple 7 :
<HTML>
<HEAD>
<TITLE>Exemple 7</TITLE>
<STYLE>
H2
{
Font-family: Arial, Impact, Verdana, sans-serif;
Font-size: x-Large;
Font-weight: Bold;
Text-align: Center;
}
H3
{
Font-family: Impact, Arial, Verdana, sans-serif
Font-size: Large;
Font-style: Italic;
Text-decoration: Underline;
}
P
{
Font-family: Verdana, Impact, Arial, sans-serif;
Font-size: 1 em;
Text-align: Justify;
}

9 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

.flottante
{
Float: Left;
}
.dessous
{
Clear: Both;
}
</STYLE>
</HEAD>
<BODY>
<H2>Titre 1</H2>
<H3>Titre 1.1</H3>
<P>Paragraphe Numéro 1</P>
<P>Paragraphe Numéro 2</P>
<H3>Titre 1.2</H3>
<P>Paragraphe Numéro 3</P>
<P>Paragraphe Numéro 4</P>
<H2>Titre 2</H2>
<P><IMG Src="UFAS1.jpg" Class="flottante"/></p>
<P>Ce texte est écrit à côté de l’image flottante</P>
<P Class="dessous">Ce texte est écrit sous l’image flottante</P>
</BODY>
</HTML>

10 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

8. Couleur et fond
- Couleur
La propriété qui permet de modifier la couleur du texte c’est bien Color.
Pour choisir une couleur la méthode la plus simple consiste à taper son nom, mais il n'existe
que seize couleurs standards. On peut donc utiliser la notation hexadécimale.
Un nom de couleur en hexadécimal ressemble à : #FF5A28, c'est une combinaison de lettres
et de chiffres commencer par un dièse (#), qui indiquent une couleur.
Il y a une autre méthode plus pratique qui consiste à définir manuellement la quantité de
rouge, de vert et de bleu avec la méthode rgb :
Color: rgb(Quantité de rouge, Quantité de vert, Quantité de bleu);
Pour trouver les quantités de la couleur que nous désirons on peut utiliser un logiciel de
dessin tout simple comme Paint ou La boîte à couleurs.

- Couleur de fond
Pour indiquer une couleur de fond, on utilise la propriété CSS Background-color appliqué sur
la balise <BODY>. Elle s'utilise de la même manière que la propriété Color.

11 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

Si on applique par exemple une couleur de fond noire et une couleur de texte blanche à la
balise <BODY>, alors tous les titres et paragraphes auront eux aussi un arrière-plan de
couleur noire et un texte de couleur blanche, c'est ce phénomène qu'on appelle l'héritage :
on dit que les balises qui se trouvent à l'intérieur d'une autre balise « héritent » de ses
propriétés.
Exemple 8 :
<HTML>
<HEAD>
<TITLE>Exemple 8</TITLE>
<STYLE>
BODY
{
Background-color: black;
Color: white;
}
P
{
Background-color: #FFFFFF;
Color: #000000;
}
MARK
{
Background-color: rgb(255,0,0);
Color: rgb(0,130,65);
}
</STYLE>
</HEAD>
<BODY>
<H2>Titre 1</H2>
<P>Paragraphe Numéro 1</P>
<P>Paragraphe Numéro 2</P>
<H2>Titre 2</H2>
<P>Paragraphe Numéro 3</P>
<P>Paragraphe <MARK>Numéro 4<MARK></P>
</BODY>
</HTML>

12 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

- Image de fond
La propriété permettant d'indiquer une image de fond est Background-image. Comme
valeur, on doit renseigner l’url de l’image :
Background-image : url ("Adresse de l'image")
Si on utilise l’instruction dans un fichier .css, l'adresse de l'image doit être indiquée par
rapport au fichier .css et non pas par rapport au fichier .html.
On peut compléter la propriété Background-image par plusieurs autres propriétés :
La propriété CSS Background-attachment permet de fixer l’image du fond. Deux valeurs
disponibles :
Fixed : l'image de fond reste fixe.
Scroll : l'image de fond défile avec le texte (par défaut).
La propriété CSS Background-repeat permet de définir la manière de répétition de l’image
du fond. Quatre valeurs disponibles :
No-repeat : le fond ne sera pas répété.
Repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
Repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
Repeat : le fond sera répété en mosaïque (par défaut).
La propriété CSS Background-position permet d’indiquer où doit se trouver l'image de fond.
Il faut donner deux valeurs en pixels ou relatives pour indiquer la position du fond par
rapport au coin supérieur gauche de la page.
Exemple 9 :
<HTML>
<HEAD>
<TITLE>Exemple 9</TITLE>
<STYLE>
13 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

BODY
{
Background-image: Url("UFAS1.jpg");
Background-attachment: Fixed;
Background-repeat: No-repeat;
Background-position: Top right;
}
</STYLE>
</HEAD>
<BODY>
<H2>Titre 1</H2>
<P>Paragraphe Numéro 1</P>
<P>Paragraphe Numéro 2</P>
<H2>Titre 2</H2>
<P>Paragraphe Numéro 3</P>
<P>Paragraphe Numéro 4</P>
</BODY>
</HTML>

On peut utiliser une super-propriété appelée background dont la valeur peut combiner
plusieurs propriétés :
BODY
{
Background: Url("UFAS1.jpg") fixed no-repeat top right;
}
Il est possible de donner plusieurs images de fond. Pour cela, il suffit de séparer les
déclarations par une virgule :
Exemple 10 :
<HTML>
<HEAD>
<TITLE>Exemple 10</TITLE>
<STYLE>
BODY
{
Background: Url("UFAS1.jpg") fixed no-repeat top right, Url("APlan.ipg") Fixed;
}
</STYLE>
</HEAD>
<BODY>

14 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

<H2>Titre 1</H2>
<P>Paragraphe Numéro 1</P>
<P>Paragraphe Numéro 2</P>
<H2>Titre 2</H2>
<P>Paragraphe Numéro 3</P>
<P>Paragraphe Numéro 4</P>
</BODY>
</HTML>

L'ordre de déclaration des images a son importance, la première image de la liste sera placée
par-dessus les autres.

9. Apparences dynamiques
CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique en
utilisant des fonctionnalités puissante du CSS : les pseudo-formats.
Les pseudo-formats, c'est une information que l'on rajoute après le nom de la balise (ou de
la classe) dans le CSS.

- Au survol
A: Hover
{
Background-color: Black;
}
: Hover, signifie survoler ou quand on pointe dessus.

- Au clic
Le pseudo-format : Active permet d'appliquer un style particulier au moment du clic. En
pratique, il n'est utilisé que sur les liens.
A: Active
{
Background-color: #FFCC66;
}

- Après visite
Il est possible d'appliquer un style à un lien vers une page qui a déjà été vue. Par défaut, le
navigateur colore le lien en un violet. On peut changer cette apparence avec : Visited. En

15 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

pratique, sur les liens consultés, on ne peut pas changer beaucoup de choses à part la
couleur.
A: Visited
{
Color: #AAAAAA;
}
Exemple 11 :
<HTML>
<HEAD>
<TITLE>Exemple 11</TITLE>
<STYLE>
H2: Hover
{
Background-color: Red;
}
H3: Active
{
Background-color: Maroon;
}
A: Visited
{
Color: Green;
}
</STYLE>
</HEAD>
<BODY>
<H2>Titre 1</H2>
<P>Paragraphe Numéro 1</P>
<A Href="Exemple 9.html">Cliquer pour voir l’exemple 9</A>
<H3>Titre 2</H3>
<P>Paragraphe Numéro 2</P>
<A Href="Exemple 10.html">Cliquer pour voir l’exemple 10</A>
</BODY>
</HTML>

16 H. Mansouri
Développement des Applications Web Chapitre 02 : CSS

17 H. Mansouri