Category Archives: CSS 3

Code <>, CSS 3

CSS 3 – Les classes et les identifiants

Leave a comment

Pour styliser une page web, on a le CSS, ça on l’a vu. On a vu dans l’introduction qu’on pouvait styliser les balises HTML. Ce qu’on va voir aujourd’hui c’est l’utilisation des classes CSS, et des identifiants HTML.

Les classes

Une classe CSS commence toujours par un « . ». Elle peut être attachée à une balise précise, ou être complètement détachée des balises pour être un peu plus généraliste.

Nous allons reprendre l’exemple HTML suivant (fichier « index.html »):

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

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

Dans notre feuille de styles « index.css » on pourrait mettre des classes. Pour quoi faire ? Simplement pour séparer deux types de contenus distincts, mais utilisant la même balise HTML. Dans le code HTML que je viens de vous fournir, on a deux fois la balise <span>. Si on utilise la feuille de styles de l’introduction, on aurait alors les deux mots « exemple » et « classes » en italique. Je souhaiterais que le premier reste en italique, mais que le second soit en caractères gras.

Nous allons le faire, avec des classes. Comme je l’ai dit précédemment, une classe CSS se définit toujours en commençant par un « . ». Nommons une classe « Italique », et une autre classe « Gras ».

Contenu du fichier « index.css » :

.Italique { font-style: italic; }
.Gras { font-weight: bold; }

Voila mes deux classes de définies. Utilisons-les maintenant dans l’exemple ci-dessus grâce à l’attribut HTML « class ». Puisque nous avons une classe générique, nous pouvons nous en resservir pour un autre élément HTML. Ajoutons donc un paragraphe italique.

Contenu du fichier « index.html » :

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

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span class="Italique">exemple</span> avec des <span class="Gras">classes</span>.</p>
    <p class="Italique">Copyrights Zebra's</p>
  </body>
</html>
Les identifiants

Dans les attributs HTML existe l’identifiant définit par « id ». Celui-ci est censé être unique dans le document. Il est toutefois régulièrement utilisé en JavaScript pour identifier facilement un élément HTML précis. Sachez qu’on peut se servir des identifiants HTML au sein d’une feuille de styles.

Page « index.html », modifié avec des identifiants :

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

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span id="Italique">exemple</span> avec des <span id="Gras">classes</span>.</p>
    <p id="Copyrights">Copyrights Zebra's</p>
  </body>
</html>

En CSS, pour utiliser un identifiant HTML, il faut précéder son nom par un « # ».

Fichier « index.css », modifié avec les identifiants :

#Italique { font-style: italic; }
#Gras { font-weight: bold; }

#Copyrights { font-style: italic; }

Voila, ouvrez la page HTML avec votre navigateur, nous avons le même résultat que précédemment.

Simplifications

Notre dernier exemple peut être simplifié. Lorsqu’on utilise le même style sur plusieurs éléments HTML, on peut séparer nos identifiants et classes par des « , ».

Fichier « index.css » simplifié (identifiants) :

#Italique, #Copyrights { font-style: italic; }
#Gras { font-weight: bold; }

Les identifiants « Italique » et « Copyrights » auront désormais le même style appliqué, sans réécrire sans cesse la même chose. Plutôt pratique, n’est-ce pas ?

Attribuer une classe à un élément HTML précis

Autre chose que nous pouvons faire, c’est attribuer des classes à des éléments HTML spécifiques. La syntaxe est « élément.class { attributs; }« .

Exemple :
span.Italique, p.Copyrights { font-style: italic; }
span.Gras { font-weight: bold; }

Si on prend ce code CSS et qu’on le met dans notre premier fichier d’exemple, on aura une fois de plus le même résultat, mais écrit différemment.

La magie des CSS

On peut appliquer plusieurs styles différents en fonction de l’élément, de la classe, de son identifiant. On peut très bien utiliser plusieurs classes pour un même élément HTML, en les séparant par des  » « . Mettons tout cela en pratique et faisons quelque chose d’un peu plus poussé.

Fichier « index.html » :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma seconde feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span class="Italique Gras">exemple</span> avec des <span class="Gras">classes</span>.</p>
    <p class="Italique">Copyrights Zebra's</p>
  </body>
</html>
Fichier « index.css » :
.Italique { font-style: italic; }
.Gras { font-weight: bold; }

Cette fois, le résultat est qu’on a le mot « exemple » en gras et italique, le <span> ayant hérité des deux classes CSS, en prenant bien soin de séparer le nom des classes par un espace. On appelle cela la cascade.

Les priorités

Que se passerait il si on utilisait à la fois l’identifiant HTML, la classe CSS, l’attribut HTML « style », du code dans les balises <style>, et tant qu’à faire, qu’on utilise deux classes en même temps ?

Tout est question de priorités. En premier style défini, on a celui du navigateur lui-même. Celui-ci présente déjà des styles prédéfinis par défaut, et ce n’est pas forcément le même d’un navigateur à l’autre. D’où l’importance cruciale de faire un nettoyage en début de feuilles de styles. En second, qui vient écraser les paramètres du navigateur, on a le fichier CSS que l’on a lié au document HTML via la balise <link>. Ensuite viennent les styles définis dans l’entête du document HTML. En dernier lieu, celui qui vient écraser tous les autres et aura sa plus forte priorité est celui de l’attribut « style ». Je n’ai pas parlé des identifiants contre les classes, c’est le dernier lu qui l’emporte.

Pour résumer  : <style> <– <link> <– CSS <– Navigateur.

Conclusion

Pour éviter toute confusion dans les styles, souvenez-vous bien des priorités, commencez par écrire les règles générales, puis les règles plus précises. Evitez de dédoubler les règles, évitez d’utiliser les identifiants le plus possible (réservez-les pour le JavaScript), pensez ) nettoyer les règles des navigateurs en début de feuille de styles, utilisez au plus possible les feuilles de styles externalisées que possible, définissez bien vos éléments, et ensuite vos classes.

Code <>, CSS 3

CSS 3 – Introduction

Leave a comment

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 :

  1. Utiliser l’attribut « style » des balises HTML
  2. Programmer la feuille de style au sein du document HTML
  3. 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.