WordPress sous le capot : Guide CSS pour débutants

WordPress sous le capot : Guide CSS pour débutants
Guide CSS WordPress

Pourquoi devrais-je apprendre le CSS quand je peux utiliser Gutenberg ou un constructeur de pages ?

Comprendre un peu le CSS vous aidera à repérer le CSS en ligne dans votre éditeur de code lors de la rédaction d’un article ou d’une page.

Le jour viendra où vous rechercherez probablement encore plus de contrôle sur l’apparence de votre site Web.

Il existe 3 types de styles CSS :

  • En ligne
  • Embarqué
  • Feuilles de style externes

CSS en ligne

Vous ajoutez du CSS en ligne à votre publication lorsque vous ajoutez une « couleur » à un élément dans votre éditeur visuel.

Comment reconnaître le CSS en ligne. Un exemple :

<h2 style= »color:red; »> Exemple d’en-tête </h2>

Astuce : Recherchez l’élément « style= » qui montre que vous regardez bien du CSS en ligne.

N’oubliez pas que le CSS en ligne est appliqué localement à un élément. Le style présenté ci-dessus n’est appliqué qu’à un élément h2 et le rend « rouge ». Il est préférable de l’utiliser pour un article / une page spécifique sur lequel vous travaillez.

du code css

Feuilles de style externes

Remarque : Chaque site Web WordPress comprend au moins un thème. Chaque thème comprend au moins une feuille de style externe.

La principale feuille de style externe de votre thème WordPress s’appelle probablement style.css.

Avant de pouvoir apporter des modifications, vous devez d’abord être capable de lire une feuille de style et de comprendre la syntaxe. Une fois que vous avez trouvé la feuille de style principale de votre thème et que vous pouvez lui donner un sens, vous pouvez ajouter vos propres styles, mais il y a un hic cependant. Au lieu d’apporter des modifications à cette feuille de style spécifique, vous feriez mieux de créer un thème enfant avec sa propre feuille de style principale. Vous l’appellerez style.css . (même nom que la feuille de style du thème principal (parent) que vous éditez.

Vous y ajouterez ensuite un CSS personnalisé, qui remplacera les styles de votre thème parent. Vous n’aurez pas seulement besoin de comprendre un peu de CSS, vous devrez également connaître les bases de la structure des fichiers et comment trouver, reconnaître et créer des fichiers CSS.

Pour l’instant nous allons commencer avec les base au niveau CSS, afin que nous puissions le reconnaître quand nous le voyons.

C’est la première étape. Il faut par la suite être capable de le lire puis d’écrire votre propre CSS.

architecture du code css

Qu'est-ce que le code CSS ?

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour définir l’apparence visuelle des documents HTML. Il dicte l’apparence de votre site Web et permet de la personnaliser.

  • Le CSS est simple à utiliser et facile à apprendre.
  • Les éléments HTML peuvent être stylisés directement avec du CSS.
  • La taille de la police, la couleur de la police, le type de police, la mise en page, etc. sont déterminés par le CSS.

Pour en savoir plus sur les différences entre les feuilles de style en ligne, intégrées et externes, lisez : 3 types de styles CSS : feuilles de style en ligne, intégrées et externes.

Reconnaître le CSS (syntaxe) dans une feuille de style externe

Exemple : h1 {couleur : blanc ; text-align: center;}

(Ce titre sera blanc et aligné au centre.)

L’exemple ci-dessus est appelé un ensemble de règles CSS. Il commence par un sélecteur (h1) suivi d’un bloc de déclaration.

Des « accolades » entourent les blocs de déclaration. Elles sont importantes !

ASTUCE : Recherchez les accolades comme un signe que vous regardez du CSS dans une feuille de style.

Un regard plus attentif sur les thèmes enfants

Les thèmes enfants (Child Themes) héritent des styles CSS du thème d’origine (thème parent). Vous pouvez ajouter vos propres styles. Heureusement, si vous faites une erreur dans votre thème enfant, vous pouvez le désactiver et revenir à votre thème parent pendant que vous corrigez votre erreur. Vous pourrez alors réactiver votre thème enfant. Il s’agit avant tout d’un joli filet de sécurité !

N’oubliez pas : ne modifiez pas la feuille de style dans un thème (parent). Vous n’aurez aucun filet de sécurité. De plus, s’il est mis à jour, vos modifications seront perdues.

En apprenant à écrire du CSS, vous pouvez aller au-delà de la personnalisation des publications et des pages de votre site Web pour modifier le thème WordPress que vous avez choisi. Votre site Web deviendra plus unique et cela vous donnera peut-être assez de confiance pour aller plus loin et explorer le code PHP et JavaScript par la suite.

Guides WordPress
Sommaire
opportunites-digitales.com
Logo
Compare items
  • VPN (0)
Compare