3.3.
2 Entête :
La deuxième méthode pour utiliser du CSS dans ses fichiers HTML consiste à
insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head> .
Il s’agit d’une déclaration des styles en interne, dans l'en-tête de la page: à ne faire
qu'avec des styles particuliers à une page.
Les styles déclarés au niveau de l’entête auront plus de priorité que ceux de la feuille
de style externe et donc l'emporteront en cas de conflits ;
Voici un exemple comment on peut obtenir exactement le même résultat précédent
avec un seul fichier .html qui contient le code CSS :
<!DOCTYPE html>
<html>
<head>
<title>Utilisation CSS</title>
<style>
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Le CSS</h1>
<p>CSS fonctionne en associant des règles à des éléments HTML. Ces
règles régissent la manière dont le contenu des éléments spécifiés doit
être affiché. Une règle CSS contient deux parties: un sélecteur
(selector en anglais) et une déclaration.
</p>
</body>
</html>
3.3.3 Attributs HTML :
La troisième méthode consiste à insérer les styles niveau des attributs HTML, ce choix est
utilisé pour des mises en forme ponctuelles.
Le même résultat est ainsi reproduit avec la troisième méthode comme suit:
LANGAGE HTML 22
<!DOCTYPE html>
<html>
<head>
<title>Utilisation CSS</title>
</head>
<body style= "font-family: arial " "background-
color:rgb(185,179,175);>
<h1 style ="color: rgb(255,255,255);">Le CSS</h1>
<p>CSS fonctionne en associant des règles à des éléments
HTML. Ces règles régissent la manière dont le contenu des éléments
spécifiés doit être affiché. Une règle CSS contient deux parties: un
sélecteur (selector en anglais) et une déclaration.
</p>
</body>
</html>
Quelle méthode choisir? si on place le code CSS directement dans le HTML, il faut
copier ce code dans tous les fichiers HTML constituant le site ! Et si on veux changer une
mise en forme, par exemple les polices d’entête en bleu et non en vert, il faut modifier
chaque fichier HTML constituant le site.
3.4. Propriétés du texte
A. Taille :
On peut indiquer la taille de deux manières: absolue et relative.
1. Taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très
précise, mais déconseillé sauf si c'est absolument nécessaire (on risque de spécifier une
taille inadéquate pour certains navigateurs).
Exemple :
p{
font-size: 16px;}
h1 {
font-size: 60px;}
Dans cet exemple, la taille du paragraphe est de 16 pixels et celle du titre niveau 1 est de
60, ce qui donne le résultat suivant:
LANGAGE HTML 23
2. Taille relative : cette technique est souple car elle permet de spécifier la taille par
rapport àsoit en donnant un nom précisant sa valeur sur une échelle de septs valeurs,
soit en précisant sa taille en pourcentage par rapport au texte normal de la page.
Avec la première méthode, on peut choisir une taille parmi les sept possibilités offertes:
1. xx-small : très très petit ou minuscule ;
2. x-small : très petit ;
3. small : petit ;
4. medium : moyen ;
5. large : grand ;
6. x-large : très grand ;
7. xx-large : très très grand (gigantesque).
Avec la deuxième méthode, on peut indiquer la taille en « em ». Si la taille est égale à 1em
le texte a une taille normale. Si on veut agrandir le texte, on choisit une valeur supérieure
à 1, comme 1.4em. Si on veut réduire le texte, on sélectionne une valeur inférieure à 1em,
comme 0.6em.
B. Police
Pour indiquer la police, on utilise la propriété CSS font-family. Si le nom de la police
est:police, alors, on écrit:
balise
{
font-family: police;
}
Si le navigateur ne possèdes cette police ou que cette police ne fonctionnera pas sur ce
navigateur, il la remplacera par une police par défaut. Pour éviter ce remplacement
automatique, on peut préciser plusieurs noms de police, séparés par des virgules :
balise
{
LANGAGE HTML 24
font-family: police1, police2, police3, police4;
}
Le navigateur essaiera d'abord police1 . S'il ne l'a pas, il essaiera police2 . S'il ne l'a pas, il
passera à la police3 , et ainsi de suite.
Les polices les plus utilisées sont:
• Arial Black;
• Comic Sans MS ;
• Courier New ;
• Georgia ;
• Impact ;
• Times New Roman ;
• Trebuchet MS ;
• Verdana.
Pour la casse, les valeurs possibles sont:
• Capitalize: Première lettre du texte en majuscule,
• uppercase: TEXTE EN MAJUSCULE
• lowercase: texte en minuscule,
• none: texte normal.
• inherit: hérite de son parent
exemple:
C. Les propriétés des couleurs
La propriété qui permet de modifier la couleur du texte est color .Il existe plusieurs
méthodes pour indiquer la couleur: par son nom, par son code hexadécimal ou son code
RGB.
1. Méthode 1: Nom de la couleur : cette méthode consiste à taper son nom en anglais. Il
existe seize couleurs standard:
pour écrire le titre en marron:
h1
{
color: maroon;
}
Méthode 2: couleurs en hexadécimal : Un nom de couleur en hexadécimal, comme :
#FE5A30. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent
une couleur. On doit toujours commencer par écrire un dièse (#), suivi de six lettres ou
chiffres allant de 0 à 9 et de A à F.
LANGAGE HTML 25
Exemple:
p
{
color: #F0F6EE;
}
3. La méthode 3: RGB
RGB signifie Rouge-Vert-Bleu ( de l’anglais Red-Green-Blue. Pour choisir une couleur en
RGB, on doit définir une quantité de rouge, de vert et de bleu.
LANGAGE HTML 26