• CSS

    CSS

  • Nous avons appris les base du HTML, maintenant nous allons passer au CSS !

    Pour bien que vous comprenez, voici un exemple de site sans CSS et avec CSS:

    Introduction

     

    Comme vous pouvez le voir, le CSS change grandement le visuel du site web !

    Bon passons au travaille maintenant !

     

    I- Où écrire le CSS

     

    Ben oui, parce que, le HTML s'écrit dans un fichier .html, mais le CSS, ou s'écrit-il ?

    Il existe 3 endroits où l'on peut placer le CSS.

     

    1- Directement dans les balises:

    Le CSS peut en effet être placer directement dans une balise, il appliquera alors son code seulement à la balise consernée !

    Pour  cela, il faut utiliser l'attribut "style", qui prendra comme paramètres du code CSS. Pour l'instant contenté vous de copier ce code, je vous l'expliquez aprés:

    <p style="color: red;">Ce texte utilise du CSS !</p> 

    Si nous testons, nous voyons que le texte est écrit en rouge !

    L'attribut style peut être utilisé dans n'importe quelle balise.

    Attention, je ne vous recommande pas du tout cette méthode ! Elle rend le code moins lisible et fait prendre de mauvaise habitude ! Utilisez donc plutôt une des deux autres méthodes que je vais vous montrez !

     

    2- Ecrire le CSS dans le fichier .html

    On peut en effet écrire directement dans le fichier .html, mais sans écrire dans les balises.

    Pour cela, il faut utilisé la balise double <style> </style> qui se place en dessous de la balise <title></title>.

    Cela donnera ça :

    <!DOCTYPE html>

    <html>

      <head>

         <!--balise meta et title...-->

       <style>

         p

         {

            color: red;

          }

      </style>

      <body> 

        <p>Voici un texte qui utilise du CSS !</p>

      </body>

    </html>

     

    Vous pouvez voir que j'ai utilisé une notion que nous avons pas encore vu... Il s'agit des commentaires ! En effet, la ligne <!--balise meta et title...--> est un commentaire, cela signifie que le navigateur ne lira pas cette ligne, elle ne sert qu'à nous repérer dans le code. Un commentaire commence par <!-- et fini par -->

    Vous voyez ici que cela a marché aussi, mais que le code a été modifié . Je ne rentre pas dans les détails tous de suite, car nous apprendrons à coder dans le chapitre suivant, mais comme le code n'est pas directement dans une balise, il faut lui dire sur quel balise doit s'appliquer ce code, donc on marque "p" qui correspond à la balise paragraphe.

    Cette méthode est pratique, mais je vous conseil grandement la troisième qui rend votre code plus propre est moins lourd !

     

    3- Dans un autre fichier:

    Il est en effet possible et préférable d'écrire le code CSS dans un autre fichier qui aura pour extension .css .

    Pour cela il vous suffit de créer un fichier avec votre éditeur de texte et de l'appeler "style.css". Pour l'instant ajouter ce code dedans:

    p

    {

    color: red;

    }

    Maintenant, pour indiquer au fichier HTML qu'il faut utiliser le fichier .css, il faut rajouter une balise simple appeler link, qui prend deux paramètre:

    <link rel="stylesheet" href="style.css" />

    L'attribut rel sert à indiquer que l'on parle d'un fichier CSS, et href, vous devez normalement le reconnaitre, sert à indiquer le chemin vers le fichier style.css.

    Moi je l'ai mis dans le même dossier que mon fichier HTML, donc, il me suffit juste d'indiquer son nom.

    Et là aussi, si vous réactualisez la page, le texte apparaitra en rouge

    Dans le chapitre suivant, nous apprendrons cette fois-ci vraiment du CSS !


    votre commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique