Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou XML. Cet article d'initiation est conçu pour aider les marchands PrestaShop à comprendre les bases du CSS, notamment l'utilisation des sélecteurs, l'identification de ces sélecteurs sur leur site via l'inspecteur d'éléments, et les propriétés CSS fondamentales.

 

Étape 1 : Comprendre les sélecteurs CSS

Les sélecteurs CSS sont des motifs qui identifient les éléments sur lesquels les styles seront appliqués. Voici les types de sélecteurs les plus courants :

• Sélecteurs de type : ciblent des éléments par leur nom de balise, comme p pour les paragraphes.
• Sélecteurs de classe : ciblent des éléments avec un attribut de classe spécifique, préfixé par un point. Par exemple, .menu ciblera tous les éléments ayant class="menu".
• Sélecteurs d'ID : ciblent des éléments avec un attribut ID spécifique, préfixé par un dièse. Par exemple, #header ciblera l'élément avec id="header".
• Sélecteurs attribut : ciblent des éléments basés sur la présence d'un attribut ou la valeur d'un attribut. Par exemple, [type="text"] sélectionnera tous les éléments avec un attribut type ayant la valeur "text".
• Sélecteurs pseudo-classes : ciblent des éléments dans des états spécifiques. Par exemple, :hover applique un style lorsque l'utilisateur survole un élément avec le curseur.

 

Etape 2 : Comprendre la spécificité des sélecteurs CSS

La spécificité des sélecteurs CSS est un système de points utilisé par les navigateurs pour déterminer quelles règles CSS s'appliquent en cas de conflit entre plusieurs règles ciblant le même élément. Voici comment la spécificité fonctionne :

• Sélecteurs d'ID : Un ID (#id) possède la spécificité la plus élevée. Il obtient 100 points.
• Sélecteurs de classes, pseudo-classes et attributs : Ces sélecteurs (.classe, :hover, [type="text"]) ont une spécificité moyenne. Chaque sélecteur obtient 10 points.
• Sélecteurs de type : Les sélecteurs qui ciblent les éléments par leur nom de balise (h1, div) ont la spécificité la plus basse. Chaque sélecteur obtient 1 point.
• Le sélecteur universel (``), les combinateurs (+, >, , ~) et la négation pseudo-classe (:not()) n'affectent pas la spécificité (0 point).
• Styles en ligne (non recommandé) : Placer des styles directement dans un attribut style d'un élément HTML (par exemple, <div style="color: red;">) a une spécificité plus élevée que tout sélecteur, recevant 1000 points.

La règle avec la spécificité totale la plus élevée sera appliquée. En cas d'égalité, la dernière règle définie dans le CSS prendra le dessus. Pour forcer un style malgré la spécificité, vous pouvez utiliser !important, bien que son usage soit généralement déconseillé car il peut rendre le débogage du code CSS plus complexe.

 

Étape 3 : Identifier les sélecteurs sur votre site avec l'inspecteur d'éléments

Pour modifier efficacement les styles de votre boutique PrestaShop, vous devez savoir identifier les sélecteurs en utilisant l'inspecteur d'éléments du navigateur :

• Faites un clic droit sur l'élément que vous souhaitez styliser et sélectionnez "Inspecter".

  

• L'inspecteur d'éléments ouvrira une fenêtre où le code HTML de l'élément sera mis en évidence.

  

• Sur le panneau Styles à côté, vous pouvez voir les CSS appliqués à cet élément. Vous pouvez également modifier ces styles temporairement ici pour voir comment les changements affectent votre page (les modifications apportées ici ne seront que temporaires, et seront perdues au premier rechargement de la page, elles servent essentiellement à tester vos modifications CSS avant de les envoyer sur le serveur)

Exemple : ici le background-color de l’élément est modifié

 

Étape 4 : Propriétés et valeurs de base en CSS

Pour appliquer des styles, vous utilisez des propriétés CSS assignées à des valeurs spécifiques. Voici quelques propriétés de base :

• color : définit la couleur du texte.
• background-color : définit la couleur d'arrière-plan d'un élément.
• font-size : définit la taille de la police.
• margin et padding : contrôlent l'espace autour et à l'intérieur des éléments, respectivement.
• border : définit la bordure autour des éléments.

Exemple de syntaxe CSS :

selector {
  property: value;
}

Pour pratiquer, essayez de changer la couleur de fond et la taille de la police d'un élément sur votre site.

 

Questions fréquentes

Comment puis-je annuler une règle CSS appliquée par erreur ?

Vous pouvez soit supprimer ou commenter la règle CSS dans votre fichier, soit la surcharger en ajoutant une nouvelle règle plus spécifique ou en utilisant !important après la valeur de propriété.

Est-ce que les changements CSS sont immédiatement visibles ?

Pour voir les changements, vous devez rafraîchir la page, vider le cache de votre boutique depuis Paramètres avancés / Performances et parfois vider le cache de votre navigateur pour que les nouvelles règles CSS prennent effet.

 

Ce guide vous offre un aperçu de la manière de débuter avec CSS pour personnaliser votre boutique en ligne PrestaShop. Avec ces bases, vous pouvez commencer à explorer les possibilités de personnalisation. Pour aller plus loin, voir l’article dédié.