skip to Main Content

7 astuces pour apprendre le CSS

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Apprendre le CSS peut être pénible, surtout quand vous ne savez pas par où commencer.

Le CSS est un langage de style et non un langage de programmation comme Javascript ou PHP, il est en fait assez simple à apprendre, surtout si vous avez une certaine connaissance de HTML.

Aujourd’hui, je vais vous proposer quelques conseils qui pourront vous aider à apprendre CSS.

1. Construction Basique

Ce que vous devez savoir en premier : Pour apprendre à écrire votre propre CSS, vous devez savoir comment le formater correctement. Il y a en fait deux manières correctes pour y arriver, mais l’une d’elles vous permet de rester organisé.

Comme il est commun pour le HTML d’être la première langue que les gens apprennent quand ils veulent travailler avec des sites WordPress, ça aide d’apprendre la syntaxe de CSS en l’écrivant d’abord d’une manière similaire à HTML.

Voici la structure de base du CSS:

.class sélecteur {propriété: valeur;}
#id sélecteur {propriété: valeur;}

Il est assez simple lorsqu’il n’y a pas beaucoup de styles que vous souhaitez mettre en œuvre pour un élément sur votre site, mais quand vous commencez à vous familiariser avec le CSS, vous allez avoir besoin de beaucoup plus d’un style pour un élément, ce qui rendra une telle structure inappropriée.

Voilà pourquoi il y a une façon plus efficace et organisée pour écrire votre CSS :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

.class sélecteur {
  propriété: valeur;
  Propriété 2: valeur 2;
  Propriété 3: valeur 3;
}

#id sélecteur {
  propriété: valeur;
  Propriété 2: valeur 2;
  Propriété 3: valeur 3;
}

Maintenant, vous pouvez commencer à examiner les termes qui sont utilisés dans cet exemple. Chacun de ces termes sont les blocs de construction de la base du CSS : classe, ID, sélecteur, la propriété et la valeur. Les propriétés et les valeurs sont également appelés une déclaration.

Ceci est un excellent point de départ pour apprendre à écrire votre propre CSS et une fois que vous commencez, vous pouvez vous demander où vous devriez écrire tout cela à la fin de vos fichiers WordPress.

Dans votre installation de WordPress, tout fichier avec une extension .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 qui porte le nom « style.css« . C’est dans ce fichier que vous retrouverez généralement tout le style du thème.

2. Pratique avec des sélecteurs simples

Ensuite, vous devez apprendre les sélecteurs et les propriétés de base, mais surtout savoir comment ils fonctionnent dans un thème. Les sélecteurs tels que h1, h2 et h3 pour les en-têtes et p pour le texte de paragraphe par exemple, ainsi que des propriétés telles que font-family et « background-color » pour la couleur d’arrière-plan.

Il y a un moyen facile de pratiquer ces nouvelles compétences et de voir réellement les changements que vous faites, sans avoir à démarrer votre propre blog WordPress. W3Schools a une tonne d’informations sur CSS ainsi que des exemples où vous pouvez modifier leur code pour rapidement pratiquer. Vous pouvez aussi lire ce cours de Mathier Nebra sur OpenClassrooms.

3. Mémorisez le modèle Box

Vous pouvez facilement rechercher des sélecteurs et propriétés que vous ne connaissez pas en un rien de temps. Tout ce qu’il vous faut faire c’est une simple recherche sur Google ou Bing 

box-model

Cela peut être le cas avec de nombreuse (ou la plupart) choses dans la vie, mais le modèle de la boîte doit y faire exception.

Essentiellement, ce sont les éléments de base de la mise en page en CSS que vous avez besoin de maîtriser afin de donner du sens à un grand nombre de propriétés. La mise en page de la boîte comprend aussi de nombreux éléments que vous pouvez personnaliser.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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 avec. En substance, le modèle de la boite comprend une zone du contenu, les marges internes ou padding, les bordures ou border et la marge externe ou margin.

4. Apprendre par la pratique

Une fois que vous commencez à vous familiariser avec le CSS, c’est une excellente idée de pratiquer en choisissant un thème qui a une conception entièrement base, sur lequel vous apporterez vos modifications.

Il est important de comprendre comment de simples changements peuvent affecter un thème radicalement parfois et d’autres fois pas tellement. En fin de compte, la pratique autant que vous le pourrez, devrait vous aider à voir visuellement les modifications que vous apportez.

Dans le projet des choses, une fois que vous êtes en mesure de relier les points, vous pouvez non seulement écrire le CSS rapidement, mais vous devez également être en mesure de résoudre les problèmes à l’avenir, ce qui devient une tâche essentielle pour la conception web et le développement.

5. Disposer contenu en fonction de la largeur et la hauteur

Une fois que vous avez installé un thème simple sur lequel vous pouvez travailler, vous pourrez aussitôt commencer à changer la mise en page en spécifiant différentes longueurs et largeurs pour les zones du contenu.

Ceci vous permettra de vous familiariser avec les mises en pages des thèmes WordPress

6. flotteurs et positionnement

C’est ici que le CSS tend à devenir un peu délicat, car vous pouvez créer une mise en page uniquement avec CSS et en particulier avec les flotteurs et de positionnement. Le problème est que ces propriétés ne sont pas conçu pour créer des présentations entières.

Pour l’instant, c’est de cette façon que de nombreuses personnes affiche une disposition totalement à droite. explorer le code du thème que vous aurez choisi pour travailler dessus.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

7. Le CSS avancé

À ce stade, vous commencer à tenir le coup avec le CSS, mais il y a beaucoup plus à découvrir:

  • Pseudo classes  – Utilisé pour définir un état ​​spécifique d’un élément tel que le vol stationnaire de la souris et le positionnement des images.
  • Sélecteurs complexes  – vous pouvez affiner votre style avec sélecteurs plus avancés.
  • Animations CSS3  – Création d’une animation fondu, ou d’autres transitions.
  • Responsive avec les médias queries CSS3  – vous permettra de créer des thèmes responsive en un rien de temps.
  • Transforme  – Contrôlez la taille et la forme de zones de contenu sélectionnés.
  • At-rules  – utilisé pour l’importation des choses comme les polices et les 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 à apprendre pour donner plus de style à votre thème.

C’est tout ce qu’il y avait à savoir dans l’apprentissage du CSS pour votre blog WordPress. N’hésitez pas à partager ce tutoriel avec vos amis sur vos réseaux sociaux préférés.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
12 Partages
Partagez12
Tweetez
Enregistrer