Utiliser l'option CSS pour créer des pages web

Créer des pages web plus complexes, plus faciles à modifier et plus dynamiques, c'est possible avec l'outil de création de page web.

Vous pouvez aller encore plus loin en appliquant des class et ID pour affecter un style uniquement au contenu d'une ligne donnée, sans changer les styles des autres lignes de la page.

Ce tutoriel nécessite d'avoir des notions en CSS mais notez qu'il est possible d'ajouter plus simplement des styles dans des pages ou sur des images.

Définitions

Le CSS : c'est le langage qui est utilisé pour définir l'aspect de votre site.

Pour personnaliser le design de votre site, vous pouvez utiliser des formulaires dans Configuration > Apparence > Personnaliser. Vous pouvez aussi surcharger du CSS dans des zones supplémentaires ou encore personnaliser le design de votre site entièrement en CSS en activant le mode expert. Pour plus d'informations à ce sujet, nous vous recommandons la lecture du tutoriel: choisir un thème et personnaliser le design.

Une class et un ID. Ce sont des attributs qui servent à appliquer des styles CSS à du contenu dans une page. Il n'y a pas beaucoup de différence entre ces deux attributs. Notez cependant qu'un ID ne peut être utilisé qu'une seule fois dans une page. Vous pourrez utiliser les ID comme des ancres (c'est à dire pour créer un lien vers un endroit précis dans une page).

Les ID sont déclarés dans la feuille de style avec le signe dièse (#nom-de-l-id). Les class sont définies avec un point (.nom-de-la-class).

Exemple de réalisation : modifier les styles d'un texte avec un ID

Il est possible de mettre en forme du texte avec la barre d'outils de l'éditeur visuel (comme mettre en gras, en italique, changer la taille ou le type de police). Cependant, il est préférable de le faire en CSS si vous savez que ces styles devront être utilisés plusieurs fois sur différentes pages de votre site. C'est le cas dans notre exemple ci dessous.

Afin de conserver une cohérence graphique entre toutes nos pages, nous décidons d'appliquer le même style pour chaque texte d'introduction de chaque page du site (c'est aussi le cas pour les tutoriels d'e-monsite par exemple). Pour obtenir (comme sur la capture de droite ci dessous) un texte plus aéré, plus gros, avec unebordure et une marge en dessous, nous allons créer un ID.

Affectation de l'ID à la ligne

L'ID est créé dans Configuration > Apparence > Personnaliser.
Sachez que vous pouvez aussi le créer dans Configuration > Réglages > Zones éditables, dans la partie Zones CSS supplémentaires.
Pour affecter l'ID à la ligne, modifiez votre page, cliquez sur le bouton Apparence (qui se trouve en bas et à gauche de chaque ligne), sélectionnez le style Avancé (class/ID) puis indiquez le nom de l'ID que vous avez créé.

Utiliser l'option CSS pour créer des pages web

Définitions

Exemple de réalisation : modifier les styles d'un texte avec un ID

Création de l'ID dans une zone CSS

Affectation de l'ID à la ligne

Les experts en webdesign