|
|
|||||||
|
|||||||
|
|
|||||||
| • | Astuces HTML | • | Insérer du CSS dans une page HTML | • |
Il existe plusieurs façons d'insérer du code CSS dans une page HTML : on peut écrire directement le code dans la page HTML dans une balise <style> ou dans l'attribut style de la balise, ou bien spécifier un lien vers un fichier CSS dans une balise <link>.
Insérer du CSS via la balise <style>
Le CSS peut être inséré dans le <head> d'une page HTML, entre deux balises <style> de type text/css.
<!DOCTYPE html>
<html>
<head>//Début de l'en-tête
<title>Le Titre de la Page</title> //Le Titre de la Page
<style type="text/css">
p {
font-style:italic;
}
div.red-box {
background-color:red;
}
</style>
</head>//Fin de l'en-tête
<body>//Début du corps
//Contenu
<p>Texte en italique...</p>
<div class="red-box">Carré rouge</div>
</body>//Fin du corps
</html>
Insérer du CSS via l'attribut style
Le code CSS peut également être inséré directement dans l'attribut style de la balise sur laquelle on veut l'appliquer.
<!DOCTYPE html>
<html>
<head>//Début de l'en-tête
<title>Le Titre de la Page</title> //Le Titre de la Page
</head>//Fin de l'en-tête
<body>//Début du corps
//Contenu
<p style="font-style:italic;">Texte en italique...</p>
<div class="red-box" style="background-color:red;">Carré rouge</div>
</body>//Fin du corps
</html>
 | Le style ne s'applique qu'à une seule balise. Il faudra répéter l'opération pour un même résultat sur une autre balise. |
Insérer du CSS via un lien (recommandé !)
Finalement, le CSS peut être inséré dans un fichier CSS, qui sera appelé dans le fichier HTML via une balise <link> à placer dans le <head> de la page, avec pour paramètres rel="stylesheet", type="text/css", et href="l'emplacement du css".
CSS : fichier "style.css" du répertoire "css"
p {
font-style:italic;
}
div.red-box {
background-color:red;
}
HTML
<!DOCTYPE html>
<html>
<head>//Début de l'en-tête
<title>Le Titre de la Page</title> //Le Titre de la Page
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>//Fin de l'en-tête
<body>//Début du corps
//Contenu
<p>Texte en italique...</p>
<div class="red-box">Carré rouge</div>
</body>//Fin du corps
</html>