Il y a une semaine, je vous ai promis un petit article d’introduction au CSS. Eh bien, le voilà ! Après l’article d’initiation au HTML par Mathieu, voici cet article, ayant l’objectif de vous familiariser avec les sélecteurs CSS : qui sont à la base de ce langage.

Un article censé introduire le sujet et ouvrir la porte à d’autres articles CSS plus complexes … Pour ce premier article, vu que je suis comme vous, novice dans le domaine, j’ai demandé à Mathieu de faire une relecture et d’apporter quelques modifications… Alors, merci à Mathieu pour son coup de pouce 🙂 et bonne lecture à toutes et tous !

Qu’est-ce que c’est le CSS ?

Le CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML, d’après WIKIPEDIA.

Le CSS sert donc à mettre en forme les pages HTML (polices et tailles de caractères, couleurs ou encore alignement du texte). Le CSS vous offre une grande liberté pour styliser vos contenus, il serait dommage de s’en priver.

Ps: cette photo je l’ai prise pendant un voyage à l’Ile Maurice, je la trouve très belle cette cascade, pas vous? :).

Les sélecteurs

Avant de créer à proprement parler une feuille de style pour une page web, nous devons comprendre une notion propre au langage CSS : les sélecteurs.

Les sélecteurs permettent de « sélectionner » la partie du contenu qui va être mise en forme. Avant de styliser une section de contenu dans une page, il faut savoir identifier ce contenu.

Notez qu’il y a principalement 3 type de sélecteurs : des sélecteurs de balises (ou « tag » an anglais), des sélecteurs de « class » et d’autres pour les « id ». Il existe des différences entre ces trois notions sur lesquelles je vais revenir.

Rapidement, voici à quoi cela ressemble :

• nom-balise pour styliser un bloc existant en HTML (conçu avec une balise classique).
  • ex : je veux donner un style à tous les liens (<a> en HTML), j’écris simplement a en CSS.
• .nom-de-la-classe pour styliser un bloc HTML qui porte l’attribut class=”nom-de-la-classe”. Une classe (ou « class ») correspond à un élément répété plusieurs fois dans une même page web.
  • ex : j’ai une liste de questions sous le forme <p>…</p> en HTML et je veux lui donner un style spécifique, j’écris .question en CSS pour viser précisément les balises qui contiennent cette classe.
• #id-du-bloc correspond à une balise dont l’attribut est id=”id-du-bloc”. Contrairement aux classes, l’id est un identifiant unique, il n’a pas le droit d’être répété plusieurs fois dans une page.
  • ex : j’ai une seule entête par page web de la forme <div id=”entete”>…</div> en HTML, j’écris #entete en CSS pour lui donner un style particulier.

Le nom que vous attribuez aux ID et CLASS est entièrement libre mais ne doit pas contenir d’accents, de caractères spéciaux ni d’espaces.

Sélecteurs de balise

Toute balise HTML peut être un sélecteur. Les balises les plus couramment utilisées pour définir une section à styliser sont les balises <div> et <span>, mais d’autres peuvent également être utilisées, telles que <form>, <p>, <hn>, <li>…

Un exemple concret de syntaxe avec une balise <div> :

<div id=”haut”>Chaussures à talon haut<div>

Si nous voulions utiliser le CSS pour mettre en forme le bloc « Chaussures à talon hauts », voici à quoi doit ressembler votre style CSS :

#haut { text-align:left; color:pink; font-style :italic}
Ici, #haut est un exemple de sélecteur CSS.

Sachez également qu’il aurait été possible d’écrire div#haut dans notre cas, cela signifierait en langage CSS « l’id haut intégré dans un <div> », cela serait donc juste également, donc ne soyez pas perdu si vous voyez des écritures différentes, elles ont parfois le même impact.

Sélecteurs de classe

Les sélecteurs de classe peuvent être utilisés dans tout contexte HTML et permettent d’appuyer sur des éléments répétés dans une même page web, comme je l’ai déjà évoqué. Ajouter une classe est très simple, il suffit d’intégrer la syntaxe dans les balises HTML pour qu’une nouvelle classe de style soit créée. Ensuite, vous devez la récupérer dans les feuilles de style CSS avec la syntaxe .nom-de-la-classe pour indiquer la mise en forme.

Voici un exemple plus concret. Admettons que nous ayons un site avec des titres (<h2> en HTML par exemple) rouge et d’autres bleu. Si nous utilisons les sélecteurs de balises, nous précisons que les H2 auront une couleur spécifique, mais malheureusement, elle sera appliquée à l’ensemble des H2 de la page. Dans notre cas, il va falloir distinguer les divers H2 en bleu et ceux en rouge. L’idéal est de créer des classes différentes pour les deux :

<div class=”bleu”>
<h2>Chaussures à talon haut</h2>
<div>

<div class=”rouge”>
<h2>Chaussures sans talon</h2>
</div>

En CSS, on peut donc distinguer les H2 en bleu et ceux en rouge grâce aux classes spécifiques.

.bleu { color:blue; }
.rouge { color:red; }

C’est aussi simple que ça. Sachez toutefois qu’il est possible d’ajouter plusieurs classes dans un même attribut « class » en HTML en les séparant par des espaces. Par exemple, écrire permet d’utiliser trois classes différentes qui se cumulent, c’est parfois pratique…

Sélecteurs ID

L’ID fonctionne globalement comme les classes, si ce n’est que l’attribut HTML s’appelle « id » et que ce dernier n’a le droit d’être utilisé qu’une fois dans la page.

Pour reprendre l’exemple précédent, on a utilisé des classes « bleu » et « rouge » parce que nous risquons d’avoir plusieurs titres colorés par page. En revanche, si nous n’avions qu’un titre en bleu et un seul titre en rouge, nous aurions pu remplacer nos classes par des ID, cela aurait fonctionné aussi bien. Voici ce que ça aurait donné en HTML :

<div id=”bleu”>
<h2>Chaussures à talon haut</h2>
<div>

<div id=”rouge”>
<h2>Chaussures sans talon</h2>
</div>

Et en CSS :

#bleu { color:blue; }
#rouge { color:red; }

En général, les ID sont utilisés pour des éléments vraiment uniques comme l’entête, le pied de page, la colonne latérale (…) et moins pour des points de détails, la classe présentant moins de risques d’erreurs. C’est pour cette raison que nous ne trouvons quasiment que des classes dans les principaux CMS du marché, les ID ne sont utilisés que pour des cas précis.

Contrairement aux classes, il n’est pas possible de mettre plusieurs ID séparés par des espaces dans un attribut « id » en HTML, tout simplement car cela lui enlèverait son caractère unique, cela n’aurait donc plus aucun sens…

Sélecteurs de lien (ou pseudo-classes CSS)

Les liens possèdent trois états basiques : non visités, visités et actifs (en train d’être cliqués). Un état additionnel (survol) survient lorsque la souris est placée sur le lien, mais sans avoir cliqué.

Nous pouvons appliquer des styles aux liens en fonction de leur état :

a:link { color: blue; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: orange; }

Dans cet exemple, nous avons coloré les liens non visités en bleu (équivalent de « a » tout seul), les liens visités en gris, les liens survolés en orange et les liens actifs en rouge (pendant que nous cliquons sur le lien).

Il existe d’autres types de sélecteurs que ceux pour les liens !

Propriétés & valeurs

Les propriétés sont les caractéristiques réelles stylisées dans vos pages web.

La propriété « color » (pour la couleur du texte) est probablement la propriété la plus utilisée en CSS avec « background » (pour les fonds d’écran ou couleur de fond), suivi de la famille de police « font-family » et de la taille de police « font-size ».

Exemple pour le CSS du titre H1 :

h1 { color:pink; font-family:verdana; font-size:24px ; }

Comme vous le constatez, la syntaxe de base est:

sélecteur { propriété : valeur; }

Lorsque des combinaisons de multiples propriétés et valeurs sont utilisées, des points-virgules les séparent. C’est toujours le cas en développement web (enfin, en général), les points-virgules marquent les fins d’instructions, on retrouve donc cette logique en CSS.

Il existe des centaines de propriétés !

Pour aller plus loin :

• http://www.siteduzero.com/informatique/css/tutoriels
• http://css.mammouthland.net/premiers-pas-en-css.php

Vérifiez vos feuilles de style CSS et vos documents HTML stylés avec CSS

• http://jigsaw.w3.org/css-validator/