Les Bases du CSS

1. Qu'est ce que le CSS (Cascading Style Sheets) ?
   Je ne vais pas vous ressortir la définition qui viens de Wikipédia, ni vous coller ce qui est dit sur n'importe quel autre site qui traitera de ce sujet.
   
   Le CSS, aussi appelé "feuille de style", est l'élément qui permet de donner un style aux éléments d'une page web. Concrètement, il s'agit d'un langage de programmation très simple qui vous permettra la mise en forme des pages de vos sites web.
   
   
2. Exemple de feuille de style.
   En général, les exemples valent mieux que de beau textes théorique, je vous montre donc une partie de la feuille de style de ce forum :
   
   

   Code:

   
   
   [...]
   
   a {text-decoration: none;}
   a:link {text-decoration: none;}
   a:hover {text-decoration: none!important;}
   a.forumlink {text-decoration: none;}
   a.forumlink:hover {text-decoration: none!important;}
   a.topiclink {text-decoration: none; }
   a.topiclink:hover {text-decoration: none!important; }
   
   body{margin-top: 0px;}
   
   [...]
   
   .lastpost1 {
   font-align: middle;
   font-size: 8px;
   margin-left: 0px;
   padding-top:0px;
   padding-bottom:0px;
   -moz-border-radius-topright: 15px;
   -moz-border-radius-bottomright:15px;
   -moz-border-radius-bottomleft: 15px;
   -moz-border-radius-topleft: 15px;
   -webkit-border-top-right-radius: 0px;
   -webkit-border-bottom-right-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;
   -webkit-border-top-left-radius:0px;
   border-left: 3px #131313 solid;
   border-bottom: 1px #131313 solid;
   border-top: 1px #131313 solid;
   border-right: 3px #131313 solid;
   background: #060606 url('http://www.casimages.com/img.php?i=100519104750687732.png');
   }
   

   
   
3. Explications.
   Comme vous avez pu le constater plus haut, le codage CSS est très simple, bien plus simple que n'importe quel autre codage.
   Si vous faites du flash, du javascript ou même du HTML, vous comprendrez et utiliserez le CSS en maximum 3 jours.
   
   Pour expliquer plus en détails, le CSS est exclusivement réservé au domaine du Web, il est donc impossible de l'utiliser en C, C++, Java ou même avec Flash (dans la partie codage en tout cas). Plus haut, vous avez vu un extrait de fichier CSS "externe". Externe pour la simple et bonne raison que le CSS n'est pas partie intégrante de la page Web, il s'agit d'un fichier à part, que l'on appel sur un site web grâce à ce code :
   
   

   Code:

   <link href="[lien vers votre feuille de style.css]" rel="stylesheet" type="text/css" media="screen"/>

   
   Cette méthode, utilisé de façon courante de nos jours, permet d'utiliser un seul fichier CSS pour toutes les pages d'un site. Auparavant et comme toujours (sur quelque site ou dans certaines situations), le CSS est écrit sur le fichier HTML, c'est à dire directement sur le fichier qui contient le site, entre les balises "< head >" du site, sous cette forme :
   
   

   Code:

   <style type="text/css">
   Vos lignes de code CSS
   </style>

   
   De même, une méthode consiste à implanter le CSS directement dans les balises d'un site, ce qui est très souvent mal apprécié de nos jours, un exemple avec un paragraphe :
   
   

   Code:

   <p style="text-align:center; font-size:12px; line-height:18px;"><Voici donc un paragraphe dont le style à été appliqué directement sur la balise "p".</p>

   
   
4. Premiers pas.
   En CSS, il y a deux ou trois règles importantes pour que tout fonctionne correctement :
   
   
   • Il y a trois manière de styliser une balise :
     Elle est nommé par un identifiant que seul cet balise peut avoir, tel que la balise contient l'attribut "id" :
     

     Code:

     <p id="paragraphe">Voici un paragraphe avec l'id UNIQUE "paragraphe"</p>

     
     Elle est nommé par un nom commun à plusieurs balises, tel que la balise contient l'attribut "class" :
     

     Code:

     <p class="paragraphe">Voici un paragraphe avec la class "paragraphe"</p>
     <p class="paragraphe">En voici un autre</p>
     

     
     Elle est nommé par sa balise, de tel manière que toutes les balises qui sont identiques adopterons le style défini :
     

     Code:

     
     <style type="text/css">
     p{ font-size:12px; font-family:verdana, 'Myriad pro', sans-sherif; line-height:18px;}
     </style>
     
     <p>Ce paragraphe est quelconque et n'est pas spécifique, mais il adoptera le style défini plus haut.</p>
     <p>Ce paragraphe, comme celui du dessus, n'est pas spécifique est adoptera tout de même le style défini ci-dessus.</p>
     

     
     
   • le style est défini entre accolade :
     

     Code:

     <style type="text/css">
     p{ font-size:12px; font-family:verdana, 'Myriad pro', sans-sherif; line-height:18px;}
     </style>

     
     
   • Chaque attribut se termine par un "point virgule"
     

     Code:

     font-size:12px;
     font-family:verdana, 'Myriad pro', sans-sherif;
     line-height:18px;