Cours CSS

Les Standards du
Web
Nabil REJEB
• Introduction et
avantages
Chapitre 2 • Définition et
déclaration des styles
Le CSS : Feuilles de • Notion de classe et id
Style en Cascade • Les propriétés du CSS
Objectifs :
 S’initier avec les feuilles de style CSS.

 Réaliser une application Web avec le CSS
Éléments du contenu :
Introduction
Traduction Feuilles de style en cascade
 On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un
fichier à part (d’extension .css).
 C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la
couleur et la police du texte, la position des menus ou l'image de fond etc...
 permettent d'améliorer la présentation et l'esthétique des pages web.

Cependant, avec HTML, vous êtes concentré plutôt sur le contenu et la structure
logique de vos pages web.
3
Utilité et avantages de CSS
Séparer le contenu et la mise en forme.
Réduire le temps de chargement des pages.
Une CSS peut servir pour plusieurs pages Web et ainsi toutes les pages de
votre site auront la même présentation.
Modifier facilement l’aspect d’une page ou d’un site sans en modifier le

contenu.
Palier certaines insuffisances du langage HTML (contrôles des polices,

contrôle de la distance entre les lignes, contrôles des marges, etc) et ainsi
augmenter la créativité des développeurs web.
4
XHTML
Apparition de nouveau terminaux HTML a fini par montrer ces limites en

(PDA, téléphone, …) matière d’évolutivité.
Pour pallier cet écueil,
Besoin incessant de nouvelles
un nouveau langage, le XHTML
fonctionnalités
(Extensible HyperText Markup
Language) (a vu le jour en début 2000).
• C’est un mixe entre HTML et XML, c'est-à-dire que l’on retrouve toutes
les fonctionnalités disponible dans HTML 4.01 mais avec la syntaxe, la
rigueur et la souplesse d’évolution fournit par XML.
• Le XHTML est régie pas des normes délivrées par le World Wide Web
Consortium (W3C).
5
XHTML (2)
Structure d’une page XHTML:
6
XHTML (3)
 DOCTYPE : permet de dire au navigateur que la page est du XHTML et la

version utilisée.
xmlns : attribut obligatoire indiquant une adresse traitant du XHTML et

notament le W3C.
Charset : déclaration de l’encodage du document.
7
XHTML (4)
Exemple d’un document XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple d'utilisation de CSS externe</title>
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
<p> utilisation d’une feuille de style externe. </p>
</body>
</html>
8
XHTML (5)
Différences majeurs par rapport à HTML
 Insertion d’un DOCTYPE correct au début du fichier.
 La balise d'ouverture <html> est remplacé par <html

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 Toutes les balises doivent être fermées, par exemple ôter un </p> n’est pas valable.
 Minuscules pour toutes les balises: <P> devient <p> etc.
 Les éléments vides doivent avoir un "terminateur": <hr> devient <hr /> etc.
9
XHTML (6)
Différences majeurs par rapport à HTML
 Les valeurs d’attributs sont entourés de guillemets: <p align="right">.
 Chaque attribut doit avoir une valeur: <hr noshade="noshade">.
 Toujours utiliser & pour & dans des attributs, y compris les URL:
<a href="?a=1&b=2">
 La déclaration XML n’est pas nécessaire, mais fortement conseillée (surtout si on

utilise des jeux de caractères comme ISO-8859-1 (accents) <?xml version="1.0"
encoding="ISO-8859-1" ?>
10
Définition d’un style
Dans un CSS, on trouve 3 éléments différents :
Des noms des balises : On écrit les noms des balises dont on veut
modifier l'apparence.
Des propriétés CSS : Les "effets de style" de la page sont rangés dans des
propriétés. Par exemple la propriété color permet d'indiquer la couleur du
texte.
 Des valeurs : A chaque propriété CSS on doit indiquer une valeur. Par
exemple, pour la couleur, il faut indiquer le nom de la couleur.
11
Définition d’un style
balise1 { propriete: valeur;

propriete: valeur;
propriete: valeur;
}
balise2 { propriete: valeur;
propriete: valeur;
}
balise3 { propriete: valeur;}
Exemple :
h1 { /* Toutes les balises <h1> auront */

font-family : Arial; /* comme style Arial, */
font-size : 14px; /* avec une taille de police 14 */
color : green; /*et de couleur verte. */
}
12
Les différents types des styles
On peut écrire du code CSS dans 3 endroits différents :

a. CSS externe (Dans un fichier ".css")
13
Parmi les avantages de cette solution, il y a la possibilité de pouvoir proposer

facilement plusieurs designs différents aux différents visiteurs.
14
Il faudra ajouter une ligne dans le fichier .html entre les balises <head> et
</head>.
<html> <head>
<title>Exemple d'utilisation de CSS externe</title>
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body> <p> utilisation d’une feuille de style externe. </p>
</body></html>
La balise <LINK> avertit le navigateur qu'il faudra réaliser un lien.

L'attribut rel="stylesheet" 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 href=" ... " donne le chemin d'accès et le nom du fichier à lier.
15
b. CSS interne (Dans le header du fichier XHTML)
Il est aussi possible de mettre du CSS directement entre les balises

<head> et </head> en utilisant la balise <style> et </style> :
<html> <head> <title> Exemple de CSS dans le header </title>
<style type="text/css">
p { color : red ; font-weight : bold ; } /* code CSS */
</style>
</head>
<body>
<p>Cette page comporte du CSS directement dans le header.</p>
</body>
</html>
16
c . CSS local (ou en ligne)
Définit au sein de la balise HTML. Elle consiste à ajouter un attribut style

sur les balises pour leur appliquer un style particulier:
<P STYLE="color:red">
votre paragraphe ici
</P>
Comparaison
Maintenance : la première solution est bien plus pratique, car elle permettra
facilement de changer le design du site.
Temps de chargement : le fichier CSS ne sera téléchargé qu'une seule fois pour
toutes les pages du site, ce qui allègera la taille des fichiers .html et rendra donc le
site plus rapide.
Répétition : La dernière méthode a tous les défauts : le CSS sera peu lisible à
l'intérieur des balises, difficile à maintenir et modifier la mise en page, répétition des
styles dans les balises identiques, etc.
Remarque
•CSS en cascade : Si plusieurs styles concernent le même élément, alors seul le

dernier style sera conservé (ici style2.css sera appliqué si on met le même élément
dans style1.css et dans style2.css).
<link rel="stylesheet type"="text/css" href="style1.css">

<link rel="stylesheet type"="text/css" href="style2.css">
•Ordre de priorité : CSS local > CSS interne > CSS externe
Notion de classe
Les class permettent de définir un style personnalisé.
Utilité: Affecter plusieurs styles à une seule balise ou bien affecter un même
style à des balises différentes.
Appel à une classe
<balise class="nom_class"> …</balise>
Définition d’une classe liée à une seule balise :

balise.nom_de_classe{propriété de style: valeur; } (voir exemple1)
Exemple
<H1 class="rouge">…Blabla…</H1>
H1.rouge { color: red; font-size: 18px; }

20
Notion de classe
Définition d’une classe universelle qui s’applique à n’importe quelle balise :
.nom_de_classe{propriété de style: valeur; }
Exemple
<P class="essentiel">…Blabla…</H1>
<H1 class="essentiel">…titre1…</H1>
<TABLE><TR> <TD class="essentiel"> cellule </TD><TD>…
.essentiel
{ color: red;
font-size: 18px; }
Toutes les balises qui ont la class "essentiel" seront écrits en rouge/18pixels. Au
lieu de mettre le nom de la balise avant les accolades, on doit écrire un point
suivi du nom de la class. 21
Notion de sélecteur d’id
• L’attribut id fonctionne exactement de la même manière que class.

• Il ne peut être utilisé qu'une fois.
• En pratique, on met des "id" que sur des éléments qui sont uniques sur la page.
• Toutefois, on peut toujours utiliser des class.
#nom_id {} /* on met un dièse avant le nom de l’id */
22
Balises structurales span et div
Parfois, on a besoin d'appliquer class à certains mots qui ne sont pas entourés
par des balises. En effet, class est un attribut, on ne peut donc en mettre que sur
une balise. Par exemple, si on veut modifier uniquement "bleue" dans le
paragraphe suivant :
HTML <p>J’aime la couleur bleue avec ses dégradés </p>
<p> J’aime la couleur <span class= "couleur"> bleue </span> avec ses
HTML
dégradés.</p>
.couleur
CSS
{ color: blue; /*Code CSS*/ }
23
Balises structurales span et div
<span> </span> : C'est une balise qui se met à l'intérieur d'un paragraphe,
comme <b>, <i>...
<div> </div> : C'est une balise qui crée un nouveau "bloc" dans la page, et
provoque donc obligatoirement un retour à la ligne. Comme <p>, <h1> etc…
balise inline et balise bloc
Une balise de type "bloc" crée automatiquement un retour à la ligne

bloc
avant et après. Il est possible de mettre un bloc à l'intérieur d'un autre,
ce qui permet de créer le design du site.
Une balise de type "inline" se trouve obligatoirement à l'intérieur d'une

inline balise "bloc". Une balise "inline" ne crée pas de retour à la ligne, le
texte qui se trouve à l'intérieur s'écrit donc sur la même ligne.
24
Imbrications de balises
On a la possibilité d'indiquer l'ordre d'imbrication des balises dans le

CSS. Par exemple, si on souhaite définir un style uniquement pour les
balises <i> qui se trouvent à l'intérieur d'un titre <h3> :
h3 i { color: blue;}
CSS /* toutes les balises i situés à l'intérieur d'une balise h3 (l'ordre est très
important) */
<h3>bonjour à <i>tous</i>.</h3>
HTML
<p>bonne journée à <i>tous</i>.</p>
25
Imbrications de balises
On peut aussi mélanger des balises et des class :
p .important { } /* toutes les class "important" contenues dans

CSS
des balises <p>*/
CSS p strong, h1 .important { } /* La virgule signifie "ET"*/
h1{color: red;} h2{color: red;} h1, h2 { color: red;}

CSS
Si les styles de plusieurs balises doivent avoir la même présentation,
il suffit de séparer leurs noms par des virgules.
26
Notion d’héritage
Certains éléments de la page HTML héritent des propriétés des

styles définis.
HTML <h1> le principe de <span>l’héritage</span></h1>
CSS h1 {background-color : green; }
Ici, la balise italique héritera les propriétés du style H1, donc il y a

affichage également de la couleur de fond verte en plus de
l’italique au mot « l’héritage ».
27
Notion de pseudo-classes
Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de

balises en définissant une réaction à un événement ou bien à la position relative de la
balise au sein des autres balises.
Les pseudo-classes sont prédéfinies (on ne peut pas créer d’autres pseudo-classes).
Elles sont applicables concrètement à la balise A qui peut connaître plusieurs
contextes de formes selon que le lien est inactif, visité, en train d’être visité, etc.
Les liens
Pour modifier l'apparence des liens, Il suffit d'appliquer des styles à la balise <a>.
• A:link {font-family:Arial ; color:blue ; cursor:text ;}: lien normal, non visité.

• A:visited {font-family:Arial ; color:red ; cursor:text ;}: lien visité.
• A:active {color:pink ;} : lien sélectionné par clic.
• A:hover {color:green ; text-decoration:underlined ;} : état du lien lorsque le curseur
de l'internaute passe dessus.
On peut appliquer le pseudo-format ":hover" à n'importe quelle

balise.
p:hover /* Quand on pointe sur un paragraphe */

{ background-color: #CFE1EB; /* Le fond du paragraphe change de couleur
*/
text-indent: 20px;
}
29
Positionnement
A. Positionnement absolu [absolute]

 Permet de placer un bloc sur la page.
 Par rapport au coin supérieur gauche de la fenêtre du navigateur.
 Un bloc peut masquer un autre (on peut mettre le bloc où on veut sur la page).
Div { background-color: yellow;

border: 1px solid green;
position: absolute;
left: 35px; /*valeur en pixels ou en pourcentage*/
top: 50px;
}
Si on positionne un bloc à l'intérieur d’un autre bloc, il se positionne

par rapport à ce dernier. 30
Positionnement
A. Positionnement fixe [fixed]
Même fonctionnement que pour le positionnement absolu, sauf que le

bloc reste fixe, même si on descend plus bas dans la page.
"position : fixed" est utile pour faire un menu qui reste toujours
visible.
Div {
position: fixed;
}
31
Positionnement
A. Positionnement relatif [relative]

• Cette position se détermine par rapport à d’autres éléments de la page
(l’élément supérieur).
• L’origine se trouve en haut à gauche de la position actuelle de notre
élément.
• L’exemple suivant spécifie la position de l’élément 2 par rapport à

l’élément 1.
strong
{ background-color: red;
color: yellow;
position: relative;
left: 55px;
top: 10px;
} 32
PROPRIÉTÉS
33
A. Propriétés de la couleur et du fond
propriété rôle
color couleur du texte
background-color couleur de fond du document
background-image image de fond
background-repeat la façon de répéter l’image d’arrière plan

(repeat /no-repeat/ repeat-x /repeat-y)
Background-attachement spécifie si l’image d’arrière-plan reste fixe avec les

déplacements de l’écran (scroll ou fixed)
background-position position de l’image d’arrière plan par rapport au coin

supérieur gauche de la fenêtre
Background raccourci pour les différentes propriétés d’arrière-plan

34
A. Propriétés de la couleur et du fond
body { /* l'ensemble du document aura ces propriétés */

color: #434a6a;
background-image: url("../images/hello.gif");
background-repeat: no-repeat; /* Le fond ne se répète pas */
background-position: top right; /* Le fond est aligné en haut à droite */
background-attachment: fixed; /* Le fond est fixé */
}
• Si on utilise beaucoup de propriétés en rapport avec le background (comme c'est le

cas sur cet exemple), on peut utiliser une sorte de "méga-propriété" : background
• Elle peut prendre plusieurs valeurs combinées des propriétés.

• L'ordre des valeurs n'a pas d'importance.
• On n’est pas obligé de mettre toutes les valeurs.
body{ background: url("../images/hello.gif") no-repeat top right fixed;}

35
B. Propriétés associées aux polices et au texte
propriété rôle
font-family police de caractères
font-size taille de la police
font-style style de la police (normal, italic)
font-weight épaisseur de la police (normal, bold, bolder, lighter)
font-variant variante par rapport à la normale (normal , small-caps)
font raccourci pour les différentes propriétés de police (bold,
italic)
text-decoration soulignement du texte (none, underline, overline, line-

through )
text-align alignement du texte ( left, right, center ou justify)

letter-spacing distance entre les lettres : une distance en in ou cm ou px
word-spacing espace entre les mots: une distance en in ou cm ou px

36
h1 { font-family:Arial, Helvetica, sans-serif; /* changer la police de caractères */

font-size:14px; /* changer la taille de la police */
font-style:italic /* changer le style de la police */
}
On peut indiquer la taille du texte de différentes manières :

•En pixels : c'est une façon très précise pour indiquer la taille du texte.
•En donnant une valeur relative : [xx-small, x-small, small, medium, large,
x-large, xx-large].
•En em : indiquer de manière relative la taille du texte par rapport à la taille
normale de la police. [exemple : "1em" signifie taille normale,"1.3em"
signifie 1,3* taille normale…].
•En pourcentage : "100%" indique que le texte aura une taille "normale". Si
on met "130%", le texte aura une taille correspondant à 130% de la taille
normale.
37
propriété Rôle
text-indent définit un retrait dans la première ligne d'un bloc de texte
text-transform la casse du texte : uppercase (en majuscules), lowercase (en

minuscules), capitalize (première lettre du texte en majuscule)
color couleur du texte
line-height Interligne : valeur en in ou cm ou px
Width longueur d'un élément de texte ou d'une image; valeur en in ou

cm ou px
height hauteur d'un élément de texte ou d'une image; valeur en pt ou in

ou cm ou px
white-space espace ou blanc, valeur : normal ,pre ,nowrap

38
C. Propriétés associées aux marges et enrobage
• margin : indique la taille de la marge extérieure.

• padding : indique la taille de la marge intérieure.
39
C. Propriétés associées aux marges et enrobage
propriété rôle
margin-top marge supérieure en unité de longueur ou auto
margin-right marge droite en unité de longueur ou auto
margin-bottom valeur de la marge inférieure en unité de longueur ou auto
margin-left valeur de la marge gauche en unité de longueur ou auto
margin regroupe les différentes propriétés de la marge extérieure
propriété rôle
padding-top remplissage haut entre l'élément et le bord
padding-right remplissage droite entre l'élément et le bord
padding-bottom remplissage bas entre l'élément et le bord
padding-left remplissage gauche entre l'élément et le bord
padding regroupe les différentes propriétés de remplissage

40
D. Propriétés associées aux bords
La propriété border admet trois valeurs obligatoires à utiliser :
propriété rôle
border-width regroupe les différentes propriétés de border-width
border-color couleur de la bordure

border-style style du trait de la bordure (none ou solid ou dotted ou dashed
ou double ou groove ou ridge ou inset ou outset)
border-top-width épaisseur du bord supérieur: thin ou medium ou thick ou
spécifié par l'auteur
border-right-width épaisseur du bord droit
border-bottom-width épaisseur du bord inférieur

border-left-width épaisseur du bord gauche
border-collapse fusionner la bordure du tour du tableau et la bordure des cases

(collapse ou separate)
41
border regroupe toutes les propriétés des bords
E. Propriétés associées aux listes
propriété rôle
list-style-type permet de changer l'apparence de la puce
list-style-image image à utiliser comme puce
list-style-type
Listes non ordonnées (<ul>) : disc, circle, square, none.
Listes ordonnées (<ol>) :

decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...)
upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
lower-greek : numérotation grecque
42
E. Propriétés associées aux listes
list-style-image
43
C. Propriétés de positionnement
propriété rôle
position Mode de positionnement : absolute, relative, static
top Position à partir du haut
left Position à partir de la gauche
bottom Position à partir du bas
right Position à partir de la droite
width Largeur
min-width Largeur minimale
max-width Largeur maximale
height Hauteur
min-height Hauteur minimale
max-height Hauteur maximale
44
C. Propriétés de positionnement
propriété rôle
overflow Passage d'élément au contenu trop important
direction Direction
float Cours du texte
clear Suite pour le cours du texte
z-index Position de la couche en cas de superposition
display Mode d'affichage ou plutôt non affichage sans prendre de place
visibility Affichage ou non affichage avec réservation de place
clip Limiter le domaine d'affichage
45
L’ATTRIBUT Z-INDEX
Il définit la priorité (ordre) d’affichage entre éléments superposés.

Plus l’index est grand, plus l’élément est situé dessus.
Deux éléments de même index vont se superposer.
C’est très pratique pour afficher du texte sur une image, par exemple.
<html>
<head>
.image1{position: absolute; top: 100px; left: 10px; z-index:1;}
.image2{position: absolute; top: 100px; left: 25px; z-index:2;}
</style>
</head>
<body>
<div class=image1> <img src="write.gif"> </div>
<div class=image2> <img src="UNDERCON.gif"> </div>
</body>
</html> 46
L’ATTRIBUT CLIP
Il s’applique uniquement aux éléments de position absolue. Il permet de

définir une coupure dans une région d'un objet afin de spécifier la zone
de visibilité de l’élément à traiter.
Syntaxe : CLIP:RECT(haut,droite,bas,gauche)
Exemple :
On désire afficher dans une page web les 10 premiers éléments de cette
image.
<html><head>
.image{position:absolute; top:100px;left:25px; clip:rect(0,214,19,0) }
</style></head>
<body>
<div class=image> <img src="fleur.GIF“> </div>
</body></html>
47
La propriété overflow
p{ width: 250px; height: 100px;text-align: justify; }
•Le paragraphe ferait 100px de hauteur. Si le texte n'a pas assez de place, le bloc va
s'agrandir de manière à ce que tout soit visible.
• overflow permet de "couper" le paragraphe pour qu'il soit d'une dimension exacte
de 250x100.
Les valeurs que peut prendre overflow sont les suivantes :

•visible (par défaut) : si le texte dépasse les limites de taille, le bloc est agrandi
de manière à ce que tout soit visible.
•hidden : le texte sera coupé (on ne voit pas tout le texte).
•scroll : le texte sera coupé, le navigateur mettra des barres de défilement.
•auto : C’est le mode le plus utilisé en pratique, le navigateur mettra des barres
de défilement si c'est nécessaire.
.auto{ overflow: auto; }

48
La propriété float
• La propriété float permet d'entourer un élément par du texte : on applique un float à

une balise et on continue à écrire du texte à la suite. Elle peut prendre 2 valeurs : left
et right.
<p><img src="css.gif" class="imageflottante" alt="Image flottante" /></p>

HTML <p> signifie "Cascading Style Sheet" ce qui se traduit en français… <br />
</p>
CSS .imageflottante{ float: left;}
49
La propriété float
Stopper un flottant
La propriété clear permet de stopper un flottant et le texte continue en-dessous du
flottant. Elle admet trois valeurs :
• left : le texte se poursuit en-dessous après un float:left;

• right : le texte se poursuit en-dessous après un float:right;
• both : le texte se poursuit en-dessous, que ce soit après un float:left; ou après un
float:right;
.imageflottante{ float: left; }

CSS
.dessous{ clear: both; }
50
Première lettre et première ligne
p:first-letter /* La première lettre de chaque paragraphe */

{ font-weight: bold; /* En gras */
font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
color: blue; /* En bleu */
} /* utilizée sur d’autres balises comme les titres*/
p{ text-indent: 20px;}
p:first-line /* modifier la première ligne des paragraphes */
{ font-variant: small-caps;} /* En petites capitales */
51
Application : Créer une lettrine
p:first-letter /* première lettre des paragraphes */

{ float: left; /* Flotte à gauche */
font-size: 3em; /* hauteur de 3 lignes */
font-family: Arial, Georgia, "Times New Roman", Times, serif;
font-weight: bold;
margin-right: 5px; /* marge de 5px à droite avec le reste du texte */
}
52

Cours CSS

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

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

Les Standards du

Style en Cascade • Les propriétés du CSS

 S’initier avec les feuilles de style CSS.

Traduction Feuilles de style en cascade

 permettent d'améliorer la présentation et l'esthétique des pages web.

Séparer le contenu et la mise en forme.

Réduire le temps de chargement des pages.

Modifier facilement l’aspect d’une page ou d’un site sans en modifier le

Palier certaines insuffisances du langage HTML (contrôles des polices,

Apparition de nouveau terminaux HTML a fini par montrer ces limites en

Structure d’une page XHTML:

 DOCTYPE : permet de dire au navigateur que la page est du XHTML et la

xmlns : attribut obligatoire indiquant une adresse traitant du XHTML et

Charset : déclaration de l’encodage du document.

Exemple d’un document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

Différences majeurs par rapport à HTML

 Insertion d’un DOCTYPE correct au début du fichier.

 La balise d'ouverture <html> est remplacé par <html

 Minuscules pour toutes les balises: <P> devient <p> etc.

Différences majeurs par rapport à HTML

 Les valeurs d’attributs sont entourés de guillemets: <p align="right">.

 Chaque attribut doit avoir une valeur: <hr noshade="noshade">.

 La déclaration XML n’est pas nécessaire, mais fortement conseillée (surtout si on

Dans un CSS, on trouve 3 éléments différents :

balise1 { propriete: valeur;

h1 { /* Toutes les balises <h1> auront */

On peut écrire du code CSS dans 3 endroits différents :

Parmi les avantages de cette solution, il y a la possibilité de pouvoir proposer

La balise <LINK> avertit le navigateur qu'il faudra réaliser un lien.

b. CSS interne (Dans le header du fichier XHTML)

Il est aussi possible de mettre du CSS directement entre les balises

<html> <head> <title> Exemple de CSS dans le header </title>

c . CSS local (ou en ligne)

Définit au sein de la balise HTML. Elle consiste à ajouter un attribut style

•CSS en cascade : Si plusieurs styles concernent le même élément, alors seul le

<link rel="stylesheet type"="text/css" href="style1.css">

<balise class="nom_class"> …</balise>

Définition d’une classe liée à une seule balise :

H1.rouge { color: red; font-size: 18px; }

Définition d’une classe universelle qui s’applique à n’importe quelle balise :

.nom_de_classe{propriété de style: valeur; }

• L’attribut id fonctionne exactement de la même manière que class.

#nom_id {} /* on met un dièse avant le nom de l’id */

HTML <p>J’aime la couleur bleue avec ses dégradés </p>

balise inline et balise bloc

Une balise de type "bloc" crée automatiquement un retour à la ligne

Une balise de type "inline" se trouve obligatoirement à l'intérieur d'une

On a la possibilité d'indiquer l'ordre d'imbrication des balises dans le

On peut aussi mélanger des balises et des class :

p .important { } /* toutes les class "important" contenues dans

CSS p strong, h1 .important { } /* La virgule signifie "ET"*/

h1{color: red;} h2{color: red;} h1, h2 { color: red;}

Certains éléments de la page HTML héritent des propriétés des

HTML <h1> le principe de <span>l’héritage</span></h1>

CSS h1 {background-color : green; }

Ici, la balise italique héritera les propriétés du style H1, donc il y a

Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de

• A:link {font-family:Arial ; color:blue ; cursor:text ;}: lien normal, non visité.

On peut appliquer le pseudo-format ":hover" à n'importe quelle

p:hover /* Quand on pointe sur un paragraphe */

A. Positionnement absolu [absolute]