C'est quoi les CSS ?

Rappel du XHTML

Le xhtml est utilisé pour servir le contenu d'une page : c'est avec ce langage que l'on dit : ceci est un titre, ceci est un paragraphe, ceci est une image, etc...
Mais en aucun cas il ne doit être utilisé pour la mise en page. On ne doit pas dire que les titres sont en rouges souligné, ou que les paragraphes sont en blanc sur fond noir.
C'est le travail des CSS.

En xhtml, dans les balises, on voit parfois des attributs "style" :
<balise style="propriété:valeur;">

Le contenu de ces attributs "style" peut être remplacé par des CSS.

Les CSS, appelés Cascading Style Sheets, soit "Feuilles de style en cascades" en français, permettent de créer la mise en page d'un site. Avec les CSS, on peut faire toute la mise en page : Les couleurs de fond, de texte, les polices, la taille du texte, les bordures, les apparences des titres, les marges...

La Structure d'un fichier CSS

Voici comment est fait un fichier CSS :
élément
    {
        propriété:valeur;
        propriété:valeur;
        propriété:etc...;
    }

Donc, pour appliquer un style à un élément de la page, il faut :

• Indiquer l'élément sur lequel on travaille.
• Ouvrir des accolades "{"pour appliquer des propriétés de style à l'élément.
• Ne pas oublier de refermer les accolades "}" quand on a fini d'appliquer des propriétés à l'élément.
• mettre deux points devant chaque propriété pour dire : telle propriété prendra telle valeur,
• et mettre un point-virgule ";" devant chaque valeur pour dire : on a fini de travailler sur cette propriété.

Voici un exemple de ce que l'on peut "dire" avec les CSS :
paragraphes
       {
          couleur du texte:rouge;
            taille de police:1 ligne et demie;
        }

On peut également faire des commentaires, qui servent à comprendre plus facilement le code plus tard :
/*Ceci est un Commentaire*/

On peut donc écrire les commentaires sur une ou plusieurs lignes avec "/*" et "*/".

Créer un style avec les CSS

Pour dire sur quelle élément de la page on veut appliquer certains style, il y a plusieurs façons :

• Définir des styles en fonction des balises xhtml : par exemple, ce code CSS "p{color:blue}" colorera les paragraphes en bleu :
  Ce paragraphe est coloré en bleu.
• Définir des styles en fonction des classes. Par exemple, si l'on veut que certains paragraphes soient colorés en bleu, et d'autres en rouge, nous allons écrire :
  Le code xhtml :
  <!--Ce paragraphe sera bleu-->
<p class="bleu">
Texte de couleur bleue.
</p>

<!--Celui ci sera en rouge-->
<p class="rouge">
Texte de couleur rouge.
</p>
  Et le code CSS :
  p.rouge         /*ceci veut dire "Tous les paragraphes de classe "rouge"*/
{color:red;    /*seront colorés en rouge*/
}
p.bleu
{color:blue}  /*et tous les paragraphes de classe "bleu" seront en bleu*/ Ceci donnera :
  Ce paragraphe de classe "rouge" est coloré en rouge.
  Ce paragraphe de classe "bleu" est coloré en bleu.
• Définir un style en fonction des id :
  
  Un id est presque le même chose qu'une classe, à la différence près qu'il ne peut être utilisé qu'une seule fois dans une page.
  
  Par exemple, vous avez le droit de faire ce code :
  <p class="rouge"> Paragraphe rouge</p>
<p class="bleu"> Paragraphe bleu</p> <p class="rouge"> Un autre paragraphe rouge</p>
  
  Mais vous n'avez pas le droit de faire ceci, car un id avec la même valeur est utilisé deux fois :
  <p id="rouge"> Un paragraphe en rouge</p>
<p id="bleu" >Puis un en bleu</p>
<p id="bleu"> Et un autre en bleu. Mais ça ne va pas ! On a utilisé deux fois l'id "bleu" !!</p>

Exemple

Voyons maintenant comment créer un style particulier pour un bloc. Par exemple, nous voulons faire ressortir un extrait de texte, comme une citation.
Nous avons d'abord un paragraphe sans mise en forme :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla justo ut dui nonummy scelerisque. In dapibus diam non nisi. Cras et tellus vitae sapien tristique hendrerit. Aliquam quis eros. In faucibus felis vel turpis. Aenean semper, nisl quis eleifend tempus, urna leo fringilla ipsum, vitae laoreet ante massa ac erat. Aliquam nisi velit, faucibus vitae, iaculis sed, vehicula et, sem. Nulla facilisi. Donec placerat pulvinar felis. Sed ultricies leo ut elit. Integer vitae tortor et neque blandit rhoncus. Quisque facilisis enim luctus quam. Vivamus hendrerit congue lacus. Nulla id nunc non nibh egestas vehicula. Nullam varius. Morbi vitae ante in tortor condimentum gravida.

Et nous voulons avoir ceci :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla justo ut dui nonummy scelerisque. In dapibus diam non nisi. Cras et tellus vitae sapien tristique hendrerit. Aliquam quis eros. In faucibus felis vel turpis. Aenean semper, nisl quis eleifend tempus, urna leo fringilla ipsum, vitae laoreet ante massa ac erat. Aliquam nisi velit, faucibus vitae, iaculis sed, vehicula et, sem. Nulla facilisi. Donec placerat pulvinar felis. Sed ultricies leo ut elit. Integer vitae tortor et neque blandit rhoncus. Quisque facilisis enim luctus quam. Vivamus hendrerit congue lacus. Nulla id nunc non nibh egestas vehicula. Nullam varius. Morbi vitae ante in tortor condimentum gravida.

regardons ce qui à changé :

• Il y a une bordure bleue de quatre pixels autour du bloc, et de huit pixels a gauche.
• Le bloc est écrit en blanc sur fond noir.
• Il y a un espacement entre le texte et la bordure.
• Le bloc est décalé vers la droite.
• La première lettre du paragraphe est une lettrine.
• Elle est en rouge sur fond gris.
• Elle a une bordure verte de deux pixels.
• Il y a un espace entre la lettrine et sa bordure,
• et un espace entre la lettrine et le reste du texte.
• La lettrine est plus grande que le reste des lettres.
• La police est "Comic sans MS".

Maintenant, voyons comment nous allons faire ceci :
Admettons que le paragraphe soit de classe "citation" (on aurait aussi pu utiliser la balise blockquote). (<p class="citation"> Blabla...</p>)
Pour faire une bordure, nous devons mettre :
p.citation {     /*le ou les paragraphes de classe "citation"*/
        border-style: solid;    /* auront une bordure solide, c'est à dire un trait continu*/
        border-color: #6666cc;   /*la couleur de cette bordure sera bleue*/
        border-width: 4px 4px 4px 8px; /*la bordure sera de 4 pixels, sauf la bordure gauche qui sera de 8 pixels !!*/ }
"#6666cc" est une façon d'écrire plus précisément les couleurs. Les deux premiers chiffres après le dièse indiquent le taux de rouge, les 3° et 4° le taux de vert et les deux derniers le taux de bleu.
On indique les couleurs en hexadécimal, c'est a dire avec 16 caractères :0123456789abcdef, #000000 étant noir et #ffffff étant blanc.

Pour écrire le texte en blanc sur fond noir, il faut faire :
background-color: black; /*la couleur de fond sera noire*/
color:white;           /*la couleur du texte sera blanche*/

Pour décaler le bloc vers la droite, il faut utiliser la propriété margin, qui prend une valeur mesurable.
On rajoute "left" à la propriété car il doit y avoir une marge seulement à gauche :
margin-left:20%; /*il y aura une marge de 20% de la fenêtre à gauche*/

Voici ce que nous obtiendrons avec ces propriétés CSS :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla justo ut dui nonummy scelerisque. In dapibus diam non nisi. Cras et tellus vitae sapien tristique hendrerit. Aliquam quis eros. In faucibus felis vel turpis. Aenean semper, nisl quis eleifend tempus, urna leo fringilla ipsum, vitae laoreet ante massa ac erat. Aliquam nisi velit, faucibus vitae, iaculis sed, vehicula et, sem. Nulla facilisi. Donec placerat pulvinar felis. Sed ultricies leo ut elit. Integer vitae tortor et neque blandit rhoncus. Quisque facilisis enim luctus quam. Vivamus hendrerit congue lacus. Nulla id nunc non nibh egestas vehicula. Nullam varius. Morbi vitae ante in tortor condimentum gravida.

Il manque :

• L'espacement entre le texte et la bordure.
• Le style de la lettrine.

Pour l'espacement entre la bordure et le contenu, il suffit de faire :

padding: 10px; /*de cette façon il y aura un espacement de 10 pixels entre la bordure et le texte*/
Padding étant les marges intérieures (entre la bordure et le contenu), et margin les marges extérieures (entre la bordure et le reste de la page).

Pour la lettrine, c'est plus compliqué :
Il faut utiliser ce que l'on appelle une pseudo-classe, une classe qui s'applique sur un élément en particulier qui n'est pas délimité par des balises xhtml, ou à un certain moment (au passage de la souris sur un élément par exemple).
Ici, nous allons utiliser la pseudo-classe first-letter, qui désigne la première lettre d'une élément.
Donc pour que le style s'applique uniquement à la première lettre du paragraphe, nous allons utiliser ce code CSS :
p.citation:first-letter { /*seulement la première lettre des paragraphes de classe citation*/ }

Ensuite, on utilise des propriétés comme pour n'importe quel élément. Revoyons les styles qui sont appliqués à cette lettrine :

• Elle est en rouge sur fond gris.
• Elle a une bordure verte de deux pixels.
• Il y a un espace entre la lettrine et sa bordure,
• et un espace entre la lettrine et le reste du texte.
• La lettrine est plus grande que le reste des lettres.

Pour les couleurs, c'est très simple :

p.citation:first-letter{
color:red; /* la couleur de la lettre sera rouge*/
background-color:#808080; /*la couleur de fond sera grise*/ }

Ensuite, il faut faire la bordure :
border: 2px solid green; /*la bordure sera verte et de deux pixels d'épaisseur*/

Puis, les espacements :
padding: 10px;       /*Il y aura un espacement de 10 pixels entre la lettre et sa bordure*/
margin-right: 2px;   /*Un espacemement de 2 pixels entre la bordure droite et le texte*/

Les propriétés de police :
font-family: 'comic sans ms'; /*la police sera 'comic sans ms'*/
font-size: 2em; /* et la lettre fera deux lignes de haut (1em = une ligne) */

Et enfin, les propriétés du bloc :
height: 4em; /* le bloc fera 4 lignes de hauteur*/
float: left; /*et il flottera a gauche, sinon il dépasse du paragraphe*/

Les pseudo-classes

Certaines classes spéciales sont appelées "pseudo-classes". Ce sont par exemple :
Un style qui s'applique seulement...

• à la première ligne d'un élément : élément:first-line
• à la première lettre d'un élément : élément:first-letter
• Quand la souris survole l'élément : élément:hover
• Quand on clique sur un élément : élément:focus ou élément:active
• Aux liens qui sont dans l'historique du navigateur : a:visited

Plus d'informations sur les pseudo-classes : http://www.siteduzero.com/tuto-3-38-1.html

Conclusion

C'est de cette façon que l'on créée un style avec les CSS. Généralement, on fait un fichier CSS que l'on utilise pour toutes les pages. Comme ceci, il est très facile de changer tout le design d'un site en une seule fois. De plus, le chargement des pages est allégé : le navigateur enregistre une seule fois le fichier CSS, et le ré-utilise sans avoir à le charger dès qu'il y en a besoin. Le code html est aussi moins lourd, car on n'utilise plus de style="...." directement dans les balises.

Cependant, les navigateurs n'interprètent pas tous de la même façon certaines propriétés CSS compliquées. Par exemple, IE ne gère pas la pseudo-classe ":hover" autre part que sur un lien. En fait, il ne connait pas beaucoup de propriétés CSS 2, car il n'y a pas de nouvelle version depuis 1999. Il ne connait que la première version des CSS. La version 7 devrait peut-être (j'éspère) enfin supporter complètement les CSS 2, ce qui permettrait de faire des designs interessants compatibles avec la majorité des navigateurs.

Liens :
Le site du Zéro : Liste des propriétés CSS
Toute la "puissance" des CSS sur CSS Zen-garden
Comment Ca marche : Les CSS