Il est préférable de mettre votre CSS à un seul et même endroit.
Ainsi, la mise en page s’appliquera, non pas comme l’exemple ci-dessus à un endroit précis pour un élément précis de votre page, mais à l’ensemble des balises de votre page. Et si vous voulez faire évoluer la présentation, tout est à un seul endroit sur votre page.
Pour cela, vous mettez votre code CSS dans l’en-tête de votre page HTML, à l’intérieur d’une balise style.
Exemple :
<html lang="fr">
<head>
<title>HTML5</title>
<meta charset="UTF-8">
<style type="text/css">
h1 { color: #336699; }
#txtCenter { text-align: center; }
#txtSouligne { text-decoration: underline; }
span { font-weight: bold; }
.txtItalic { font-style : italic; }
#title { font-size: 32px; }
</style>
</head>
<body>...</body>
</html>Il est donc possible d’écrire du code CSS dans l’entête d’un document HTML, dans la balise <head>. Comme on vient de voir, il suffit pour cela de l’encadrer par une balise <style> ayant pour attribut type="text/css".
Cette méthode permet de retirer la mise en forme du corps du document, mais elle ne s’appliquera qu’a la page concernée et non à l’ensemble du site.
Voici comment on peut obtenir exactement le même résultat avec un seul fichier.htmlqui contient le code CSS (lignes 5 à 10) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: green;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>La méthode idéale en ce sens consiste à utiliser des feuilles de
style dans des fichiers externes et de les appliquer au document grâce à
des éléments <link>.
Si plusieurs éléments <style> et <link>
sont appliqués au document, ils seront appliqués dans l’ordre dans
lequel ils sont inclus dans le document. Aussi, vérifiez l’ordre afin
d’éviter tout problème de cascade.
À l’instar des éléments <link>, les éléments <style> peuvent inclure des attributs media qui décrivent des requêtes média
qui permettent d’appliquer des feuilles de styles selon certains
critères provenant du média utilisé (la largeur de l’écran par exemple).
0 responses on "CSS dans la page HTML 5"