Faire ses premiers pas en CSS

Ce tutoriel n'est pas destiné à vous former au CSS mais plutôt à vous sensibiliser à ce langage.

En bon autodidacte que vous devez être, nous vous invitons à vous documenter et à utiliser des inspecteurs de codes pour bien comprendre comment effectuer très facilement des ajustements en CSS.

Voici quelques définitions et un exemple de modification en CSS.

Est-il nécessaire de maîtriser le CSS pour faire un site sur e-monsite ?

Non ! Sur e-monsite, pour gérer le design de votre site, vous n'avez ni besoin maîtriser le CSS, ni besoin de faire des modifications dans une feuille de style.

Pour gérer l'apparence de votre site très simplement, vous pouvez donc appliquer un thème et le personnaliser en modifiant des paramètres via des formulaires. Pour cela, rendez-vous dans votre manager dans Configuration > Apparence > Personnaliser.

En fonction du thème que vous appliquez, vous pouvez modifier un nombre variable de paramètres (plus de 230 paramètres modifiables pour le thème Unlimeted et le thème Responsive).

Il n'est donc pas possible de tout modifier avec les formulaires mais sachez que tout est faisable en CSS ! Si vous souhaitez modifier une partie de votre site qui n'apparaît pas dans les paramètres de personnalisation du design, vous pouvez le faire en CSS.

Il faut donc vous former à l'utilisation de ce langage. La meilleure façon d'apprendre, c'est de vous documenter puis de mettre en pratique (en utilisant des inspecteurs de code).

Définitions

Le CSS

C'est le langage qui est utilisé pour définir l'aspect de votre site et qui est appliqué au HTML (le langage qui définit le contenu de votre site).

Un inspecteur de code

C'est un outil gratuit qui est installé par défaut sur un navigateur (Internet explorer, Firefox, Chrome etc). Cet outil vous permet d'inspecter le code html et CSS d'une page et permet de voir en live les modifications effectuées (sans enregistrer dans votre feuille de style).

Une feuille de style (CSS)

Il s'agit d'un document dans lequel sont regroupées les caractéristiques de mises en forme de votre site.

Pour éviter de mélanger le contenu et le design, tout est regroupé dans un document qui est appelé au moment du chargement. La feuille de style générale est accessible dans votre manager sous forme de formulaires à personnaliser (dans Configuration > Apparence > Personnaliser).

Si vous souhaitez personnaliser le design de votre site uniquement en CSS, c'est possible en activant le mode "expert".

Enfin, sur e-monsite, vous pouvez aussi surcharger du CSS (modifier un style existant) et c'est là que les outils d'inspection de code peuvent s'avérer être très utiles. Vous pouvez facilement repérer les class et les ID existants ou en créer de nouveaux.

Les class et les ID

Ce sont des attributs (appelés sélecteurs) qui servent à appliquer des styles CSS à du contenu dans une page.

Si vous souhaitez en savoir plus sur les class et les ID, nous vous recommandons la lecture du tutoriel : affecter un style CSS à du contenu dans une page.

Utiliser un inspecteur de code

L'inspecteur de code est un outil gratuit qui va vous permettre d'analyser le contenu HTML et CSS d'une page. Que ce soit sur Chrome, sur Internet explorer, Safari ou sur Firefox, il y a un inspecteur de code installé par défaut. Pour l'utiliser:

Sur Internet Explorer : dans les options de votre navigateur, cliquez sur Outils > Outils de développement, ou appuyez directement sur la touche F12 de votre clavier
Sur Chrome (ou Safari) : faites un clic droit sur la page et cliquez sur Inspecter l'élément
Sur Firefox : faites un clic droit puis sélectionnez Examiner l'élément. Sous Firefox, nous vous recommandons l'utilisation de Firebug, un module complémentaire que vous pouvez ajouter gratuitement : ajouter Firebug

Que ce soit avec l'outil par défaut ou un module complémentaire, une barre horizontale apparaît sur le bas de votre navigateur. Et maintenant ? Comment faire ?

Un exemple concret : centrer un titre en CSS

L'inspecteur de code permet de voir quelles sont les différentes classes CSS appliquées sur chaque élément dans la page. Découvrons ensemble l'utilisation de cet outil à travers un exemple concret : centrer le titre des pages (la mise en pratique qui suit a été réalisé sous Firefox à l'aide de Firebug).

Examinez l'élément avec Firebug (1)
Survolez la zone dans laquelle se trouve l'élément que vous souhaitez personnaliser (en l'occurrence le titre de la page) (2)
Repérez le sélecteur. Dans notre exemple, il s'agit de .main_title { (3)

Faire les modifications en live dans l'inspecteur de code

Vous pouvez modifier le CSS existant ou ajouter une nouvelle propriété. Dans notre exemple, il s'agit de disposer le texte à un autre endroit (au centre). La propriété n'existant pas, il faut la créer :

Cliquez sur le sélecteur puis faites un clic droit et choisissez Nouvelle propriété.
Ecrivez text-align:center;
Le texte est maintenant centré sur votre navigateur (vous seul pouvez le voir, si vous actualisez la page, la feuille de style se recharge et la modification disparaît).

Conclusion

Personnaliser le design de votre site en CSS est réservé aux experts. Mais modifier quelques paramètres en surchargeant du CSS dans les zones spécifiques, c'est facile !

L'inspecteur de code est un outil complémentaire au navigateur très utile pour les autodidactes ! Il vous permet de comprendre comment cibler un élément en CSS et comment le modifier.

Cependant, le but n'est pas de vous inciter à tout personnaliser en CSS. Vous pouvez avoir besoin d'effectuer quelques ajustements mais faites confiance au créateur du thème. Le nombre de paramètres personnalisables est limité pour ne pas que le thème soit dénaturé. Gardez en tête que plus vous surchargerez du CSS, plus votre site sera long à charger.