• Votre panier est vide.

CSS dans la page HTML 5

(Dernière mise à jour: 14 février 2020)

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.

Style CSS 3
L’élément HTML « style » contient des informations de mise en forme pour un document ou une partie d’un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en CSS.

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"

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

© Develop4fun. Tous les droits réservés.
%d blogueurs aiment cette page :