Comment utiliser CSS - Trucs et astuces de conception Web pour les débutants

Même vous pouvez apprendre à utiliser CSS pour styliser vos pages Web avec ces conseils CSS pour les débutants.

Vous n'avez pas besoin de connaître quoi que ce soit sur le code informatique. Tout ce que vous devez savoir, c'est comment copier et coller.

Mais d'abord, qu'est-ce que le CSS ?

Les feuilles de style en cascade (CSS) sont un code de langage de feuille de style que les développeurs de thèmes utilisent pour décrire et modifier la présentation ou l'apparence d'un document HTML.

Que fait le CSS ?

En termes simples, le fichier CSS donne une belle apparence aux pages HTML.

Quelle que soit la plateforme de blogging que vous utilisez, vous pouvez modifier vos propriétés CSS pour rendre votre blog encore plus beau.

Peu importe la plateforme de blogs que vous utilisez.

Vous aurez une option dans les paramètres de votre thème pour CSS personnalisé ou CSS supplémentaire .

Vous n'avez peut-être jamais regardé cette option.

Ou, si c'est le cas, vous pourriez penser qu'il est trop difficile d'apprendre à coder.

Mais c'est hyper facile.

Je ne connais rien au développement Web ou à la syntaxe CSS, mais je peux modifier un attribut de style en quelques secondes.

Tout ce que vous avez à faire est d'utiliser les outils de développement de votre navigateur Web Chrome ou Firefox et d'apprendre quelques astuces et conseils CSS simples.

Voyons à quel point c'est facile.

Pourquoi voudriez-vous apprendre à modifier le CSS de votre blog ?

Vous avez probablement beaucoup de paramètres dans le thème de votre blog.

Mais il y a beaucoup d'éléments plus petits qui pourraient manquer.

Même dans les thèmes premium pour WordPress, certaines options ne sont pas disponibles dans les options standards.

C'est pourquoi vous pouvez aider votre CSS à mieux fonctionner en apportant vos propres modifications et modifications.

En modifiant une feuille de style externe, elle peut référencer toutes vos pages HTML.

Si vous modifiez vos en-têtes HTML sur une page, cela modifiera la balise HTML sur toutes vos pages.

La référence est appelée un pseudo-élément.

Cela signifie que si vous modifiez l'apparence de votre en-tête H2, tous les en-têtes H2 de votre site seront modifiés.

Mais vous n'avez pas besoin de tout savoir sur ces complications.

Tout ce que vous devez savoir, c'est que cela fonctionne et que vous pouvez styliser votre blog exactement comme vous le souhaitez sans rien savoir du codage.

Commençons par quelques conseils CSS simples pour les débutants.

Comment changer facilement votre CSS en ligne

La première étape consiste à ouvrir votre blog dans Firefox, Chrome ou Microsoft Edge.

Dans les exemples ci-dessous, j'ai utilisé Firefox. Je le trouve un peu plus convivial à utiliser que Chrome.

Mais les deux fonctionnent de la même manière.

Ouvrez votre blog dans un nouvel onglet ou une nouvelle fenêtre. Vous pouvez accéder à la page que vous souhaitez modifier.

Ouvrez maintenant Developer Tools, Inspector, depuis le menu Tools de Firefox ou le menu View de Chrome.

Cliquez sur Inspecteur pour ouvrir le volet des outils.

Vous pouvez sélectionner n'importe quel élément de style en ligne sur votre page en utilisant la flèche de sélection en haut à gauche du volet d'outils.

Déplacez votre curseur sur votre page pour sélectionner un élément. Ou vous pouvez cliquer sur des éléments individuels dans la liste.

Vous verrez chaque élément sélectionné surligné en bleu dans la vue de votre navigateur de votre page Web.

Vous êtes maintenant prêt à modifier l'apparence de votre page.

Utilisation du sélecteur CSS

Dans mon exemple, je vais changer l'apparence de l'élément de titre H2.

Vous pouvez choisir de modifier l'élément H1, le corps du texte ou une légende d'image.

Je veux commencer par changer la taille de la police. Tout ce que vous avez à faire est de cliquer sur la balise de style font-size et de modifier le nombre.

J'ai changé la taille de 33px à 56px. Vous pouvez voir que la taille de l'en-tête est maintenant plus grande.

Ne vous inquiétez pas. Vous n'avez pas modifié la page de votre blog en direct. Ce que vous voyez dans le volet de votre navigateur n'est qu'un aperçu de vos modifications.

Vous pouvez jouer autant que vous le souhaitez avec n'importe quel élément HTML.

Tout ce que vous voyez dans le volet du navigateur n'est qu'un aperçu de ce à quoi ressembleront vos modifications d'une règle CSS.

Maintenant, je veux changer la couleur du texte.

Si vous cliquez sur le point de couleur entre l' étiquette de couleur et le numéro, vous ouvrez le sélecteur de couleur.

Maintenant, choisissez simplement la couleur que vous souhaitez utiliser.

Il est simple de changer la couleur de votre attribut HTML. Ici, je suis passé du noir au bleu.

Ça a l'air bien, mais la hauteur de la ligne pourrait être meilleure. Je vais le changer.

Le réglage actuel est 1.2, ce qui est trop d'espace entre les lignes. Je veux que les lignes se rapprochent.

Donc, je vais le changer en 1.0.

Ça a l'air beaucoup mieux.

J'ai apporté trois modifications à l'apparence de mon titre H2 en mode aperçu. J'ai changé la taille de la police, la couleur et l'espacement des lignes.

Il est maintenant temps d'ajouter ces modifications à mon site en ligne.

Comment obtenir le code de votre site

Vous devez copier les lignes de code que vous avez modifiées.

Sélectionnez et copiez tout le code. Assurez-vous de copier toutes les lignes, y compris la dernière parenthèse.

Collez-le maintenant dans un éditeur de texte. Vous pouvez utiliser le Bloc-notes sur un PC ou l'éditeur de texte sur un Mac.

L'autre changement que nous avons apporté concerne la couleur. Nous devons également copier cette ligne.

Il vous suffit de copier la ligne pour la couleur.

Vous pouvez voir que l'élément H2 est en gras dans l'image ci-dessus. Cela signifie qu'il s'agit du même pseudo-élément que notre premier code. Vous pouvez donc les utiliser ensemble.

Copiez la ligne.

Ajoutez maintenant la ligne à votre éditeur de texte.

Vous devrez peut-être ajouter ou supprimer quelques espaces pour que votre ligne de couleur soit en retrait de la même manière.

Vous êtes maintenant prêt à ajouter ces trois modifications à votre site en ligne.

Ajoutez le code à votre site

Accédez à vos options de thème et sélectionnez vos options CSS.

Dans les thèmes WordPress, il se trouve dans le Theme Customizer et s'appelle CSS supplémentaire ou CSS personnalisé.

Il s'appellera quelque chose de similaire sur d'autres plateformes de blogs.

Copiez maintenant tout le code de votre éditeur de texte et collez-le dans votre onglet Customizer.

Dès que vous collez le code, votre aperçu vous montrera les modifications que vous avez apportées.

Cliquez sur publier, et vous l'avez fait.

Voici une comparaison entre avant et après mes modifications.

Vous pouvez faire beaucoup plus

Mes conseils CSS pour les débutants L'introduction étape par étape à l'édition de votre style HTML CSS n'est que le début.

Vous pouvez faire tellement plus si vous voulez expérimenter et essayer de changer d'autres éléments.

Il est facile d'ajouter des bordures ou des ombres aux images, de déplacer le texte vers la gauche ou la droite ou de redimensionner la largeur de votre corps de texte.

Vous pouvez déplacer les marges ou réduire ou augmenter le remplissage et modifier l'alignement.

Il existe des centaines d'options que vous pouvez choisir de modifier.

N'oubliez pas que lorsque vous travaillez dans les outils de développement, vous n'allez pas affecter votre site.

Toutes les modifications que vous apportez sont un aperçu et uniquement visuelles dans cette fenêtre de navigateur.

Peu importe ce que vous essayez, ou si cela fonctionne ou non.

Considérez-le comme un terrain de jeu pour apprendre ce que vous pouvez faire de plus pour styliser votre site Web ou votre blog.

Soyez curieux et vous vous amuserez à apprendre cette nouvelle compétence avec ces conseils sur CSS pour les débutants.

Un gros bonus avec les outils de développement

Maintenant que votre cadre Outils de développement est ouvert, il y a une chose très intéressante que vous pouvez faire.

Vous pouvez tester la vitesse de votre site.

Tout ce que vous avez à faire est de cliquer sur l'onglet Réseau.

Cliquez ensuite sur CTRL + R.

Vous verrez le temps de vitesse de votre page entièrement chargée en rouge sur la ligne en bas marquée d'une flèche.