Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Nous avons vu dans un article précédent que la structure et le contenu d’une page web (comme celles générées par WordPress) était écrits en HTML. Concernant la mise en forme (positionnement des éléments, couleurs, tailles et polices…), c’est le langage CSS (Cascading Style Sheet) qui va s’en occuper.

Présentation du langage CSS

De la même façon que le HTML5 est une recommandation du W3C, les CSS le sont aussi (avec un découpage par modules depuis la version 3 des CSS).  Une bonne pratique de développement consiste à débarrasser le code HTML5 de toute information de mise en forme et de laisser les feuilles de styles (CSS donc) se charger de ce travail. Ainsi, le fond est bien séparé de la forme, ce qui garantit les meilleurs possibilités d’évolution pour votre site Internet.

Pour reprendre l’exemple du site csszengarden, le code HTML5 de ces 2 pages est identique, et ce n’est que par le code CSS que l’affichage est géré :

csszen

Le responsive design grâce aux CSS

La force des CSS est de permettre de reconnaître le support d’affichage (écran large, tablette, smartphone…) grâce (entre autres) à ce que l’on nomme les media queries. Cela permet d’envisager des présentations réellement différentes en fonction de la place dont disposera une page web à l’affichage. C’est d’ailleurs ce que l’on appelle le responsive design. L’image ci dessous illustre ce concept : la disposition des élements (leur mise en page donc) est différente selon l’écran :

Responsive Webdesign Electronic Devices

Un tout petit peu de code et la notion de cascade

Voici un exemple de code CSS pour la balise p (paragraphe de contenu) :

p {
    font-size: 1em; /* taille de police */
    margin-bottom: 10px; /* marge en bas du paragraphe */
    text-align: justify; /* texte justifié */
}

Les CSS sont dîtes « en cascade » car plusieurs propriétés de mise en page peuvent s’appliquer à la même balise HTML. On les définit généralement de la plus générale (ex : tous les paragraphes sont justifiés comme ci dessus) à la plus spécifique (ex : le paragraphe de la page « à propos » sera lui centré et non justifié). Ainsi, en fonction de l’endroit d’affichage, on peut choisir (par ce que l’on nomme les sélecteurs) quelle règle va correspondre à la mise en forme par un mécanisme d’héritage des propriétés.

Imaginons que le paragraphe de la page « à propos » porte l’identifiant #apropos, voici le code CSS qui va compléter le précédent :

p#apropos {
    text-align: center; /* texte centré, juste pour ce paragraphe */
}

 

Et à quoi cela me sert si je créé mon site Internet ?

A priori, si votre thème graphique wordpress est bien choisi et que vous vous accommodez des mises en page qu’il propose ou que les fonctionnalités de personnalisation vous sont suffisantes, les CSS ne seront pas grand chose d’autre que de la culture pour vous.

Par contre, si vous avez envie de modifier l’apparence d’un titre, d’un paragraphe ou de tout autre élément de votre site et que le thème graphique ne l’a pas prévu, il vous faudra en passer par une maîtrise minimum des rudiments de ce langage ! Vous trouverez sur de nombreux sites spécialisés des tutoriels pour apprendre les CSS3. En ce qui me concerne, je vous conseillerai d’utiliser des thèmes graphiques wordrpess « haut de gamme » qui vous exonéreront de tout effort technique.