: css

Insérer du css dans une page HTML

Le css peut être inséré à 3 niveaux:

Directement dans la balise concernée via l'attribut "style"

Ex:

<p style="text-align:center;">texte centré</p>

Dans le head à l'aide de l'élément style

Ex:

<head>
        <meta charset='utf-8'>
        <title>Insertion de style css dans le head</title>

        <style>
          p {text-align:center;}
        </style>
</head>

Remarque: en HTML5, l'attribut type n'est plus requis dans la balise style.

Exemple, pour mémoire, en XHTML1:

<head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>Insertion de style css dans le head</title>

        <style type="text/css">
                p {text-align:center;}
        </style>
</head>

Dans un fichier séparé qu'on appelle depuis le head

A l'aide de la balise link

Ex:

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

A l'aide de la règle css @import

<style>
        @import "style.css";
</style>

Utiliser le @import est particulièrement intéressant lorsqu'on veut éviter que les anciens navigateurs n'interprètent le css ce qui risquerait de rendre le site inconsultable. Suivant la syntaxe utilisée on peut exclure certains navigateurs comme montré sur le lien ci-dessous:

Certaines études démontrent cependant que le @import serait moins efficace en terme de rapidité de chargement du css et donc d'affichage de la page.

Editer