10 conseils simples pour apprendre le CSS pour WordPress

Apprendre CSS peut être écrasant, surtout lorsque vous ne savez pas par où commencer et quels termes rechercher lorsque vous êtes bloqué.

Étant donné que CSS est un langage de style et non un langage de programmation complet comme Javascript ou PHP, il est en fait assez simple à apprendre, surtout si vous avez des connaissances en HTML à votre actif (ce que je suppose que vous avez pour les besoins de cet article).

Dans notre sondage sur les blogs, un nombre écrasant d'entre vous ont mentionné que vous vouliez améliorer votre jeu et vous familiariser avec CSS et c'est pourquoi nous avons récemment publié une liste de plus de 150 ressources pour apprendre CSS, ce qui devrait vous aider à démarrer, en particulier en tandem avec ce post.

Aujourd'hui, je vais vous montrer le flux de travail et les astuces qui m'ont aidé à apprendre le CSS lorsque j'ai commencé il y a de nombreuses années. Commencez par le premier conseil et progressez dans la liste jusqu'à la maîtrise du CSS.

Continuez à lire ou avancez en utilisant ces liens :

• Construction de base
• Entraînez-vous avec des sélecteurs et des propriétés simples
• Mémorisez le modèle de boîte
• Apprendre en faisant
• Organiser le contenu par largeur et hauteur
• Flotteurs et positionnement
• CSS avancé
• Répliquer un site avec CSS
• Préprocesseurs
• Cadres

1. Construction de base

Tout d'abord, pour apprendre à écrire votre propre CSS, vous devez savoir comment le formater correctement. Il existe en fait deux façons correctes de le faire, mais l'une d'entre elles vous aide à rester mieux organisé.

Puisqu'il est courant que HTML soit le premier langage que les gens apprennent lorsqu'ils veulent travailler avec des sites WordPress, il est utile d'apprendre la syntaxe CSS en l'écrivant d'abord de la même manière que HTML.

Voici la structure de base prise par CSS :

C'est assez simple lorsqu'il n'y a pas beaucoup de styles que vous souhaitez implémenter pour un élément sur votre site, mais lorsque vous commencez à vous familiariser avec CSS, vous aurez besoin de beaucoup plus d'un style pour un élément et c'est là qu'un une structure comme celle-ci peut devenir désordonnée, rapidement.

C'est pourquoi il existe un moyen plus efficace et organisé d'écrire votre CSS :

Vous pouvez maintenant commencer à approfondir les termes utilisés dans cet exemple. Chacun de ces termes sont les blocs de construction de base de CSS : classe, ID, sélecteur, propriété et valeur. Les propriétés et les valeurs constituent également ce qu'on appelle une déclaration.

C'est un excellent point de départ pour apprendre à écrire votre propre CSS et une fois que vous avez commencé, vous vous demandez peut-être où vous devriez écrire tout cela dans vos fichiers WordPress.

Dans votre installation WordPress, tout fichier que vous voyez et qui se termine par .css est un fichier CSS, comme vous l'avez probablement déjà deviné. Le fichier principal que vous devez rechercher est votre feuille de style et il est étiqueté comme style.css . C'est là que la plupart ou la totalité de la conception de votre thème est conservée en termes de couleurs, de polices, d'images de base et éventuellement d'une partie de la mise en page de votre thème.

Vous pouvez également remarquer un fichier dans un thème prédéfini appelé custom.css et c'est généralement là qu'ils aimeraient que vous apportiez des modifications au thème. Lorsque vous apportez des modifications à ce fichier, il doit remplacer les styles existants dans la feuille de style du thème.

Si vous ajoutez des plugins à votre thème, ils peuvent également être accompagnés de fichiers CSS dans leur dossier et ils sont utilisés pour styliser l'apparence du plugin.

2. Entraînez-vous avec des sélecteurs et des propriétés simples

La prochaine étape consiste à découvrir les sélecteurs et les propriétés de base et leur fonctionnement dans un thème. Des sélecteurs tels que h1 , h2 et h3 pour les en-têtes et p pour le texte du paragraphe, par exemple, ainsi que des propriétés telles que font-family et background-color .

Il existe un moyen simple de pratiquer ces nouvelles compétences et de voir réellement les changements que vous apportez, sans avoir à créer votre propre blog WordPress. W3Schools a une tonne d'informations sur CSS ainsi que des exemples en direct où vous pouvez modifier leur code et en appuyant sur un bouton, vous pouvez voir instantanément les modifications que vous avez apportées.

Lorsque vous voyez un exemple, cliquez simplement sur le bouton Essayez-le vous-même et une fenêtre s'ouvre dans laquelle vous pouvez tester quelques CSS de base.

3. Mémorisez le modèle de boîte

Je suis partisan de faire référence aux informations les plus courantes plutôt que de tout mémoriser. C'est peut-être parce que je trouve que ma mémoire fait défaut la plupart du temps, mais je dirais plutôt que c'est parce qu'il y a tellement de merveilleuses références en ligne.

Vous pouvez facilement rechercher des sélecteurs et des propriétés que vous ne connaissez pas en un clin d'œil. Il suffit d'une simple demande à votre moteur de recherche préféré tel que Google ou Bing et toutes les informations dont vous avez besoin sont à portée de clic.

Heureusement, ce n'est pas difficile à apprendre et en toute honnêteté, si je peux le mémoriser, vous ne devriez pas avoir de problème non plus. Essentiellement, il comprend une zone de contenu, un remplissage, une bordure et une marge.

4. Apprendre en faisant

Une fois que vous commencez à vous familiariser avec CSS, c'est une bonne idée de le mettre en pratique en choisissant un thème qui a une conception entièrement basique et en changeant son style en éditant sa feuille de style.

Il est important de comprendre comment de simples changements peuvent affecter un thème de manière drastique parfois et parfois moins. En fin de compte, pratiquer autant que vous le pouvez vous aide à voir visuellement les changements que vous apportez et à connecter vos actions d'écriture de code au résultat final.

Dans un schéma plus large, une fois que vous êtes en mesure de relier les points, vous pouvez non seulement écrire du CSS rapidement, mais vous devriez également être en mesure de résoudre les problèmes à l'avenir, ce qui devient une tâche critique pour la conception et le développement Web.

Voici quelques excellents thèmes sur lesquels vous entraîner que vous pouvez installer gratuitement sur votre site WordPress. Tous ne sont pas des représentations parfaites de l'apparence et du fonctionnement d'un thème, mais ce sont tous d'excellents points de départ pour apprendre comment modifier un thème avec un simple CSS.

Spektrum blanc

Le thème White Spektrum est un thème simple avec une mise en page commune qui comprend la zone de contenu principale, la barre latérale, l'en-tête et le pied de page.

Autre qu'une touche de couleur en ce qui concerne les polices et les liens, c'est un thème clair et simple avec lequel travailler.

Fondateur

Une fois que vous commencez à vraiment comprendre CSS, le thème Founder est idéal pour jeter un coup d'œil sous le capot et jeter un œil à sa feuille de style car il est un peu plus complexe que les autres thèmes répertoriés jusqu'à présent. Il est réactif, accessible et prêt à être traduit, comprend un icône hamburger pour les écrans mobiles ainsi que de nombreux autres détails de conception CSS qui sont parfaits pour étudier.

Même avec ces thèmes minimalistes ci-dessus, vous pouvez toujours vous sentir un peu dépassé par le nombre de choses que vous ne reconnaissez pas encore et ce n'est pas grave. Au fur et à mesure que vous cochez chaque section de cet article, tout devrait commencer à se rassembler un peu plus.

5. Organiser le contenu par largeur et hauteur

Une fois que vous avez installé l'un de ces thèmes, vous pouvez également commencer à modifier la mise en page en entrant différentes longueurs et largeurs de zones de contenu et de sélecteurs.

C'est un précurseur de l'étape suivante et vous permet de vous familiariser avec les différentes zones de mise en page d'un thème WordPress.

6. Flotteurs et positionnement

C'est là que CSS a tendance à devenir un peu délicat puisque vous pouvez créer une mise en page uniquement avec CSS et en particulier, les flotteurs et le positionnement. Le problème est que ces propriétés ne sont pas conçues pour créer des mises en page entières et qu'il existe un brouillon pour mettre à jour les mises en page CSS.

Pour l'instant, c'est une façon courante pour de nombreuses personnes d'obtenir leur mise en page parfaite . C'est une excellente idée d'observer les thèmes qui existent déjà, y compris la liste ci-dessus, et de voir en quoi ils diffèrent par leur utilisation des flotteurs et des positions.

7. CSS avancé

À ce stade, vous commencez vraiment à maîtriser CSS, mais il reste encore beaucoup à découvrir :

• Pseudo classes - Utilisées pour définir un état spécifique d'un élément, tel que le survol de la souris et le positionnement d'images à un endroit spécifique pertinent pour d'autres éléments.
• Sélecteurs complexes – Vous pouvez obtenir un style encore plus précis en utilisant des sélecteurs plus avancés.
• Animations CSS3 - Création d'un fondu, d'un pop ou d'autres transitions lorsque vous passez la souris sur des images et des boutons.
• Réactivité avec les requêtes multimédias CSS3 - L'un des moyens les plus simples de créer un thème réactif consiste à utiliser des requêtes multimédias.
• Transformations – Contrôle la taille et la forme des zones de contenu sélectionnées.
• Règles at - Utilisées pour importer des éléments tels que des polices et des feuilles de style dans votre thème.
• Dégradés – Ajout d'un dégradé à votre thème sans avoir besoin d'utiliser une image.

Ce sont de nombreux éléments où vous pouvez vraiment commencer à voir la conception de votre thème prendre forme. C'est le moment idéal pour commencer à tester vos compétences.

8. Répliquer un site avec CSS

Avec toutes ces connaissances à votre portée, vous aurez peut-être besoin d'une ceinture plus solide, mais plus important encore, vous pouvez vraiment mettre vos compétences en pratique en utilisant une coque de base d'un thème et en ajoutant vos propres styles CSS à partir de zéro.

L'une des choses les plus utiles que vous puissiez faire pour faire progresser votre apprentissage est de mettre en pratique vos connaissances dans des applications du monde réel. Je recommande d'essayer de trouver un site que vous aimez puis de le reproduire du mieux que vous pouvez uniquement avec CSS sur un thème WordPress vierge.

Bien sûr, vous ne pourrez probablement pas tout obtenir parfaitement et il y a probablement beaucoup d'éléments que vous ne pourrez pas reproduire uniquement avec CSS, mais c'est un excellent moyen de vous familiariser avec CSS.

Voici quelques thèmes de démarrage géniaux et gratuits que vous pouvez utiliser :

• Ardoise vierge

  

  C'est aussi simple que possible. Il n'y a que HTML5 dans ce thème, vous êtes donc libre d'ajouter votre CSS sans vous soucier des conflits de styles. Cependant, il contient tout ce dont vous avez besoin pour commencer à styliser votre thème.

• HTML5 vierge

  

  HTML5 Blank est un thème WordPress passe-partout qui inclut un peu de style, mais pas beaucoup. C'est un bon début si vous n'êtes pas trop désireux de démarrer votre CSS à partir de zéro.

• Soulignements

  

  Si vous êtes un peu aventureux et que vous souhaitez essayer un thème de démarrage plus avancé, Underscores est une excellente option, cependant, pas pour les âmes sensibles car il est livré avec deux styles d'échantillons de thème préchargés. Il comprend également des techniques avancées et un codage qui en font un excellent outil d'apprentissage.

Il existe également le thème WordPress de réinitialisation HTML5 sur GitHub. Il comprend des fonctionnalités un peu plus avancées, mais c'est finalement ce qui en fait un thème de démarrage précieux.

9. Préprocesseurs

Une fois que vous connaissez les tenants et les aboutissants de CSS, c'est une bonne idée d'en apprendre davantage sur les préprocesseurs, et en particulier, SASS et LESS. Ces deux éléments aident à organiser votre CSS afin qu'il soit beaucoup plus facile à écrire et plus accessible pour les modifications futures.

Les préprocesseurs rendent votre CSS propre et facile à suivre et il est rapidement devenu une compétence essentielle parmi les développeurs Web. Bien qu'il y ait un débat en cours sur lequel est le meilleur, SASS a tendance à être le préprocesseur le plus utilisé à ce jour.

Si vous souhaitez vous essayer à SASS dans le contexte de WordPress, consultez le thème Bones. Il est composé principalement de HTML5, vous pouvez donc essayer le style avec le peu de SASS intégré qui est déjà inclus.

10. Cadres

Dans le développement Web, les frameworks sont une structure permettant de créer des sites Web dynamiques. En fin de compte, l'objectif d'un framework est de rendre les sites plus rapides sans perdre en fonctionnalités.

Une fois que vous maîtrisez le CSS, vous pouvez accélérer le développement de votre thème en utilisant un framework.

L'un des frameworks les plus populaires est Twitter Bootstrap. Il est créé pour être réactif dès la sortie de la boîte et utilise à la fois SASS et LESS ainsi que de nombreux composants CSS personnalisés.

Emballer

Armé d'un programme d'apprentissage et de conseils pour vous aider tout au long du processus, CSS ne devrait pas être trop écrasant pour que vous puissiez le maîtriser. De plus, vous devriez être prêt maintenant à vous essayer au style de votre propre thème WordPress.

Pour plus de ressources sur l'apprentissage du CSS et de WordPress, consultez certains de nos autres articles : Un méga guide d'apprentissage et de référencement du CSS pour WordPress : plus de 150 ressources et De débutant à professionnel de WordPress : plus de 200 ressources stimulant la carrière.

• CSS