Langage CSSCSS et HTML
Incorporer du CSS dans du HTML
Il existe trois techniques pour incorporer les feuilles de style au document HTML
Méthode intraligne
- Au niveau de l'élément auquel s'applique le style
(ici le marqueur P) :
<html>
<head>
</head>
<body>
<p style="font-family:verdana;font-size:8pt;color:#ff0000">
Easy-Micro vous dit tout... ou presque!</p>
</body>
</html>
Méthode imbriquée
- Au niveau de la page HTML (utilisable par tous les éléments de la page) :
<html>
<head>
<style type="text/css">
p { font-family:verdana;font-size:8pt;color:#ff0000 }
</style>
</head>
<body>
<p>Easy-Micro vous dit tout sur le langage CSS...</p>
<p>...ou presque :-)</p>
</body>
</html>
Méthode liée (ou importée)
- Au niveau externe (avec appel d'un fichier css qui contient le style montexte) :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mon_style.css" media="screen">
</head>
<body>
<p class="montexte">Easy-Micro vous dit tout sur le CSS... ou presque!</p>
</body>
</html>
Cette dernière méthode est de loin la plus efficace car ce document CSS est utilisable par toutes les pages du site qui possèdent un lien vers cette feuille de styles. Ainsi, un seul document mémorise toute la mise en forme de votre site. Il n'est donc plus nécessaire de répéter la mise en forme dans chaque paragraphe du site.
Exemple de fichier CSS
Exemple de feuille de style CSS à coller dans le bloc-notes et à enregistrer sous l'extension css, soit "monstyle.css" :
/* Style globale */
body {
margin-top:10px;
color:#000000;
background-color:#ffffee;
background-image:url(images/mon_fond.gif);
}
/* Style local */
.montexte {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
}
Et voici comment appeler ce fichier à partir de chaque page (à coller dans le head) :
<link rel="stylesheet" type="text/css" href="monstyle.css" media="screen">
