CSS est difficile!

Cela ressemble à quelque chose que vous pourriez dire? Vous ne seriez pas seul. CSS (ou Feuille de style en cascade) est un langage de codage qui peut être un petit bébé difficile à maîtriser.

Cependant, dire que CSS est difficile est un peu dur. Comme tout langage, CSS peut être un peu difficile à comprendre au début, mais une fois que vous comprenez les bases, les choses commencent à se mettre en place.

La meilleure façon d'apprendre le CSS est de comprendre ce que c'est et comment il fonctionne. Ensuite, vous pouvez apprendre quelques extraits de code de base pour vous aider à saisir un peu plus cette compréhension initiale et vous serez prêt à concevoir en un rien de temps !

Notre poste va faire exactement cela.

Qu'est-ce que CSS ?

Bien sûr, CSS signifie feuille de style en cascade, mais tout le monde vous le dira. Cependant, cela n'aide pas vraiment, n'est-ce pas?

Il n'y a aucun moyen plus simple de comprendre ce que c'est.

Considérez HTML comme le cadre d'une maison et CSS comme le travail de peinture à l'extérieur. Lorsque vous peignez les boiseries de la maison ou que vous teignez la terrasse avant, cela change-t-il le cadre de la maison elle-même ?

Non, ce n'est pas le cas. Au lieu de cela, cela change simplement l'apparence des choses. La fondation et la charpente de la maison restent les mêmes.

C'est ce qu'est le CSS.

Il modifie la apparence de votre site, mais cela n'en perturbe pas la fondation ou le noyau.

Chaque maison a de la peinture dessus. Chaque thème WordPress utilise CSS.

Ils travaillent ensemble pour créer un site Web et vous pouvez utiliser des extraits de code CSS assez simples pour modifier cette soi-disant «peinture» de votre thème.

En fait, vous pourriez être surpris de voir à quel point c'est facile.

Simple CSS Edit One : Modification du type de police et une leçon rapide sur l'écriture de code

Lorsque vous utilisez un thème comme Genesis Framework, changer quelque chose d'aussi simple que la police utilisée sur votre site nécessite du CSS. Mais ne vous inquiétez pas. Ce n'est vraiment pas si difficile à faire.

Pour apporter des modifications CSS à votre thème, vous aurez d'abord besoin d'une zone CSS personnalisée pour effectuer ces ajustements. Ne modifiez pas la feuille de style intégrée à votre thème.

Au lieu de cela, utilisez un plugin comme l'option CSS personnalisée qui est chargée dans Jetpack. Toutes les modifications CSS que vous y apporterez remplaceront le CSS prédéterminé de votre thème.

Avant de pouvoir modifier la police, vous devez déterminer la zone que vous souhaitez modifier.

Il existe 7 zones principales dans lesquelles vous pouvez modifier votre police :

  • Tous les 6 types de polices d'en-tête
  • La police du corps

Le balisage des balises pour ceux-ci est simple. Par exemple, si vous souhaitez modifier le Rubrique 1 police qui apparaît sur votre site, vous utiliseriez la balise, h1. Si vous vouliez changer le Police du titre 2la balise serait, h2 etc.

Voici un exemple de la façon d'écrire du code CSS pour changer votre police Heading 1 :

 h1 { font-family: 'Georgia'; } 

Maintenant, c'est vrai, vous pouvez essayer de copier et coller cela, mais je veux que vous compreniez mieux comment cela fonctionne vraiment.

La première partie écrite (h1) est le matière vous souhaitez changer. Ce symbole ({ ) s'ouvre ta ligne de code et celle-ci ( } ) se ferme ce.

OK OK.

Cela semble probablement encore déroutant, mais lorsque j'apprenais le CSS, je me suis appris une astuce pratique pour me rappeler comment écrire correctement le CSS. Comme ça:

h1 { ouvre la porte de son placard

A la recherche de quelque chose pour se transformer : « Il trouve ce qu'il veut » ;

Et puis il ferme la porte}

Retour sur le sujet ; voici un autre exemple de la façon dont vous pouvez apporter des modifications à votre police.

 body {
  font-family: 'Arial';
  } 

En changeant l'élément de h1 à body, j'ai maintenant dit à la feuille de style que je veux changer la police du corps qui apparaît dans les publications et les pages en police Arial.

C'est assez simple non ?

Si votre thème est compatible avec Google Font, vous pouvez même utiliser les polices à partir de là sur votre site.

Simple CSS Edit Two: Modifier la couleur de la police

Cette petite astuce CSS est un bon moyen de changer la couleur de la police de votre menu ou la couleur de la police du corps. Comme les extraits de code écrits ci-dessus, il suffit de quelques lignes de code courtes pour vraiment changer les choses.

Dire que je veux changer la couleur de mon Rubrique 2 police à quelque chose de différent. Je peux le faire en suivant un plan similaire à celui que nous avons fait auparavant (rappelez-vous l'histoire ?) mais avec les principales lignes de code légèrement modifiées. Comme ça:

 h2 { color: #4f4f4f; } 

Notez que le sujet est défini comme h2 et nous avons toujours les balises d'ouverture et de fermeture ({}), cependant, la façon dont le code est écrit est un peu différente de celle ci-dessus lorsque nous avons écrit le code pour un changement de police.

Contrairement à la police qui devait être fermée par des parenthèses, (‘ ‘) l'élément de couleur hexadécimal n'en a pas besoin.

Maintenant, vous n'avez plus besoin d'écrire du code pour le même sujet encore et encore pour en changer certains aspects. Vous pouvez combiner le code pour ce même sujet pour faciliter la recherche et la modification des éléments à l'avenir. Par exemple, vous pouvez combiner Police et Couleur de police dans la même ligne de code.

 body { font-family: 'Roboto'; color: #4f4f4f; } 

Tu vois comment j'ai fait ça ?

J'ai deux lignes de code à l'intérieur de cette ligne d'objet. Lorsque vous devez apporter plusieurs modifications à un seul sujet, écrivez le code comme ceci vous fera gagner du temps. Assurez-vous simplement de fermer ces lignes de code individuelles avec un point-virgule (;) avant de passer à la ligne suivante.

Remarque : pour vous aider à vous en souvenir, considérez le point-virgule comme un point à la fin de votre phrase. Vous ne finissez jamais une phrase sans point. Ne terminez jamais une ligne de code en CSS sans point-virgule.

Simple CSS Edit Three: couleur d'arrière-plan et un outil de navigateur que vous ne connaissiez même pas

Modifier la couleur de certaines choses sur votre site est une autre astuce CSS super simple. Tout ce que vous devez savoir est élément ou matière que vous aimeriez changer.

Un outil pratique que de nombreux concepteurs utilisent – moi y compris – est l'outil Inspect Element de notre navigateur Google. C'est aussi génial pour essayer de trouver le bon sujet à changer et à définir.

Pour le trouver, double-cliquez simplement sur votre souris pour afficher les options comme vous pouvez le voir ci-dessous. Sélectionnez Inspecter l'élément, et vous pouvez maintenant rechercher les éléments modifiables de vos sites Web.

Utilisation de l'outil Inspect Element dans Google Chrome pour modifier le CSS

Voir cette image ici?

Modification de la couleur avec CSS

J'ai un élément de menu mis en surbrillance dans une couleur différente du reste de mon menu. Pour ce faire, j'ai utilisé mon outil d'inspection d'élément pour déterminer le nom correct à modifier.

Modification de la couleur du menu avec CSS

Maintenant que je fais défiler les éléments du menu, le nom de code réel qui lui est donné apparaîtra dans mes points forts. Celui que je change avait pour nom : #élément-de-menu-473 (Vous pouvez voir que c'est le nom de celui-ci dans la case jaune. Son nom est surligné en bleu.)

C'est le nom du matière que je voulais changer. Pour changer la couleur d'arrière-plan de cet élément de menu, je commence la ligne par son nom et déclare que je veux changer l'arrière-plan, comme ceci :

 #menu-item-473 { background-color: #D65050; } 

Encore une fois, je commence par indiquer à la feuille de style le sujet que je veux changer (#élément-de-menu-473) et puis je lui dis ce qu'il faut changer (Couleur de l'arrière plan) et en quoi le changer (#D65050).

Tout ce que vous décidez de changer l'arrière-plan aura un nom différent de celui-ci, mais heureusement, l'option Inspecter l'élément de votre navigateur vous permettra de le trouver beaucoup plus facilement.

Une autre chose géniale à propos de Google Inspect Element Tool est que vous pouvez modifier des éléments en temps réel pour obtenir des résultats parfaits, puis vous pouvez copier et coller tout votre travail d'édition à partir de là, dans votre feuille de style personnalisée CSS. Parlez de gain de temps!

CSS simple Edit Four: Float

Parfois, il est agréable de pouvoir faire quelque chose d'un peu différent avec votre menu principal ou des widgets prédéfinis sur votre site. Peut-être aimeriez-vous prendre un élément de menu et le placer plus à droite que sur les autres éléments, un peu comme je l'ai fait avec le menu illustré ci-dessus. (Également illustré ci-dessous en pleine largeur.)

Comment flotter à droite dans CSS

Pour ce faire, vous pouvez utiliser l'extrait de code Float pour le faire. Comme les étapes ci-dessus, vous devez utiliser l'outil Inspecter l'élément pour trouver le nom du sujet que vous souhaitez modifier. Celui illustré ici est le même que celui mentionné ci-dessus. (#élément-de-menu-473)

Afin que cet élément se déplace, mais qu'il soit toujours beau sur un écran mobile, voici le code que j'ai écrit :

#menu-item-473 { background-color: #D65050;  float: right; }

C'était vraiment aussi simple que ça. Maintenant, j'ai un élément de menu qui se démarque, ce dont j'avais besoin. Vous pouvez également l'appliquer à des choses autres que vos éléments de menu.

Par exemple, si vous avez un widget que vous souhaitez repositionner, vous pouvez utiliser le Flotter à droite; ou flotteur : gauche ; extrait de code pour modifier l'emplacement d'affichage de votre widget.

Cela prend du temps et des ajustements, mais CSS devient plus facile à utiliser plus vous vous amusez avec.

CSS simple modifier cinq : aligner le texte

Aligner votre texte est quelque chose que vous pouvez faire dans un message, bien sûr. Mais qu'en est-il des titres de vos widgets, ou quelque chose du genre ?

Vous pouvez utiliser ce code CSS pour aligner facilement le titre du texte de votre widget.

J'utilise le framework Genesis pour mes sites Web, et voici le code qu'il a fallu pour aligner les titres de mes widgets :

.footer-widgets .widget-title { text-align: center; } 

Le nom de l'élément ou du sujet dans votre thème peut différer légèrement de celui-ci, mais vous voyez l'idée.

Ce petit code gardera mon texte dans mes titres de widget de pied de page centrés, et puisque je proclame le .footer-widgets avec la .Titre du Widgetseuls les titres de pied de page centrés.

Donc c'est tout! 5 façons super simples de modifier votre thème en utilisant CSS ! CSS est comme n'importe quel autre langage. C'est difficile au début, mais une fois que vous avez surmonté cette difficulté initiale de compréhension, c'est un jeu d'enfant.

Laisser un commentaire