Easy-Micro


LANGAGE Langage CSS
CSS et HTML

Incorporer du CSS dans du HTML

Il existe trois techniques pour incorporer les feuilles de style au document HTML :

CSS 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>

CSS 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>

CSS 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'extention 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" />

Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Vendredi 18 janvier 2019 - Semaine 03 - Sainte Prisca (Demain: Saint Marius)
Aujourd'hui, c'est l'anniversaire de Philippe Starck (1949-70 ans), créateur et décorateur d'intérieur français. Autre 18 janvier: 2016 - Décès de Glenn Frey le chanteur fondateur du groupe californien Eagles.
Haut de page Easy-Micro