CSS 3 – Introduction

Vous souhaitez mettre en couleurs une page web (et pas que) ? Vous êtes alors au bon endroit.

Qu’est ce que CSS ?

CSS signifie « Cascading Style Sheet », soit « Feuille de style en cascade » en français. Avec la magie des feuilles de styles, on peut mettre en forme un document HTML sans soucis.

Si vous ne savez pas comment faire une page web, direction l’introduction HTML dans la partie Code <>.

Mise en place de l’arsenal

Tout bon travailleur possède de bons outils. Il va nous falloir un bon éditeur de code CSS, qui nous mette le code en couleurs. Il en existe plein, cherchez avec un moteur de recherche aux mots clés « IDE CSS », vous en trouverez pléthore. Personnellement j’utiliserais PSPad disponible sur http://www.pspad.com.

Comment ça marche ?

Nous allons prendre l’exemple HTML 5 suivant pour notre première feuille de styles :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>
  </head>
  <body>
    <h3>Ma première feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span></p>
  </body>
</html>

Nous avons 3 méthodes pour styliser la page :

Utiliser l’attribut « style » des balises HTML
Programmer la feuille de style au sein du document HTML
Lier une feuille de style au document HTML

Nous allons changer la couleur de fond de la page, la couleur des textes, et mettre le mot « exemple » en italique. Je vous montrerais les 3 méthodes utilisable pour styliser notre page.

Méthode #1 : L’attribut « style »

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>
  </head>
  <body style="background-color: #dddddd; color: #550000;">
    <h3>Ma première feuille de styles</h3>
    <p style="color: #00aa00;">Petit paragraphe d'<span style="font-style: italic;">exemple</span></p>
  </body>
</html>

Allez-y, copiez ce code HTML dans un fichier (avec l’extension « html » bien sûr), et ouvrez-le. Le fond est devenu grisâtre, le titre dans un bordeaux plutôt foncé, le paragraphe est quant à lui devenu vert, et le mot « exemple » est vert + italique.

C’est une méthode plutôt lourde quand on développe un site web. Il faut tenir compte du poids du fichier que l’on envoie à nos visiteurs, et ce n’est guère pratique.

Notez qu’il y a « héritage » du vert du paragraphe <p> envers son enfant <span>. On parle ici d’héritage des attributs, d’un parent envers un enfant (« parent » et « child » en anglais).

Méthode #2: L’intégration au sein de la page web

Pour ce faire, on va utiliser la balise HTML <style> :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>
    
    <style type="text/css">
      body
      {
        background-color: #dddddd;
        color: #550000; 
      }
      
      p { color: #00aa00; }
      span { font-style: italic; }
    </style>
  </head>
  <body>
    <h3>Ma première feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span></p>
  </body>
</html>

Voila, c’est exactement la même chose que précédemment, mais j’ai deux petits trucs à dire là-dessus : la première, c’est que c’est plus lisible – on a séparé le style de la mise en forme, la seconde, c’est qu’on a stylisé ici toutes les balises de la même façon. C’est-à-dire que dans notre première méthode, il nous fallait définir l’attribut « style » à chaque paragraphe que l’on écrivait, à chaque <span>, … Désormais, à chaque fois qu’on utilisera le tag <p>, son texte se verra colorisé en vert, chaque <span> sera en italique … Autre petite chose, la balise HTML <style> se met dans l’entête du document, et pas ailleurs.

Vous noterez que dans mes deux exemples il y a un « ; » après chaque attribut. C’est normal. Lorsqu’on a qu’un attribut CSS dans l’attribut HTML « style », on peut se permettre de l’omettre, cependant, je vous conseille de prendre la bonne habitude de le rajouter à chaque fois, ce qui permettra de rajouter un attribut sans perdre de temps lorsque vous utiliserez cette méthode.

Méthode #3: La feuille de style

Avec PSPad, créez un fichier CSS (menu « Fichier », « Nouveau fichier », « CSS », « OK »). Enregistrez-le à côté de votre document html. Chez moi, le document HTML se nomme « index.html », j’ai donc nommé ma feuille de styles « index.css ».

Contenu du fichier « index.css » :

body
{
  background-color: #dddddd;
  color: #550000; 
}

p { color: #00aa00; }
span { font-style: italic; }

Contenu du fichier « index.html » :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">    
  </head>
  <body>
    <h3>Ma première feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span></p>
  </body>
</html>

Enregistrez le tout, et chargez votre document HTML dans votre navigateur favori. On a exactement le même résultat. C’est déjà plus élégant non ? On a complètement séparé le contenu de l’apparence graphique. Ca nous permet d’une, de mettre en cache la feuille de style par le navigateur internet du visiteur de la page, de deux de séparer les parties métiers. C’est-à-dire que pour un même contenu, on pourrait imaginer plusieurs designs différent, sans retoucher au contenu. C’est la méthode la plus pratique et la plus couramment utilisée sur le web.

Conclusions

Si vous voulez développer un site web, il vous faudra bien connaître d’une part le langage HTML, et d’autre part les feuilles de styles en cascade. Dans un prochain article, je développerais les possibilité des CSS, je n’ai fait qu’effleurer le sujet pour le moment.

Zebra's