Initiation CSS

in

Définition

Les CSS contiennent de simples déclarations appelées règles. Une règle nous permet de répondre au besoin suivant par exemple : Les paragraphes de ma page doivent avoir le texte en rouge et le fond bleu.

Pour définir une règle, on commence donc par sélectionner l'élément auquel on veut l'appliquer, dans notre exemple il s'agit de l'élément p qui désigne les paragraphe de notre page, en CSS ça donne :

p {
    }

On complète ensuite la règle en indiquant les propriétés à styler, dans notre exemple on veut que le texte soit rouge et que le fond soit bleu, les noms de ses propriétés en CSS sont respectivement background-color pour la première et color pour la seconde, ce qui donne :

p  {
        background-color : blue;
        color : red;  
    }

Chaque style est composé de la propriété, du caractère deux-points, de la valeur qu'on veut, et du caractère point-virgule pour finir. Arrivé ici vous avez définit votre première règle CSS. Bravo ! Une règle CSS est ce qu'on veut en faire : on peut ajouter autant de propriétés qu'on souhaite. Au final, elle exprime notre besoin, par exemple on peut souhaiter qu'en plus nos paragraphes soient encadrer, ce qui donne en CSS :

p  {
        background-color : blue;
        color : red;  
        border : 1px solid gray;
    }

Inclusion des CSS dans votre page

Maintenant que vous savez ce que c'est une règle CSS. Vous allez apprendre comment l'inclure dans votre page :

Solution N°1 :

Utiliser l'élément html <style>

...

 <head>
  <title>Ma page</title>
  <style type="text/css">
    p  {
        background-color : blue;
        color : red;  
        border : 1px solid gray;
    }      
  </style>
 </head>
 ...

Solution N°2 :

Bien evidément lorsque vous travaillez sur un site avec plusieurs pages à styler, il devient nécessaire de pouvoir externaliser ses travaux dans des fichiers à part. Vous pouvez ainsi regrouper vos régles CSS dans un fichier nommé  'messtyles.css' et l'inclure avec la balise HTML Link de la façon suivante dans votre page :

...
<head>
  <title>Une de mes pages</title>
  <link rel="stylesheet" type="text/css" href="messtyles.css"/>
</head>
...

Dans l'exemple ci-dessus, votre page HTML et votre fichier se trouvent dans le même répertoire.

Comment fonctionnent les selecteurs

à suivre ...