Le CSS3 permet de modifier complètement le style de vos textes.
Apprenez comment effectuer une mise en forme précise de votre texte avec les propriétés CSS3.
Regardez le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment personnaliser votre texte avec CSS3 partie 1
Bonjour à tous et bienvenu sur Développement Facile.
Encore un nouveau cours consacré à CSS 3 pour que vous puissiez à votre tour, à la fois utiliser HTML 5, et CSS 3 directement dans vos sites Internet. Donc ce cours est consacré à l’utilisation, la personnalisation des textes grâce aux balises CSS 3.
La couleur d’un texte
Pour modifier la couleur de texte il suffit d’utiliser la balise color, et dièse votre couleur soit en hexadécimal, soit RGB, soit avec un mot clé, blue, red, black, white, etc. Vous avez comme je vous l’ai dit, plusieurs notations possibles. Voici un exemple de code source avec font-family Arial et si vous rajoutez, donc dans le code source, color : #fcc00, ça va changer le titre de l’article, à vous d’essayer, tous les textes qui seront écrits dans la balise h1, ils seront en Arial, et si vous voulez modifier la couleur, vous rajoutez la balise color.
Donc comme je vous l’ai dit, il y a plusieurs notations possibles, color : red, color : #cc0000 donc un code hexadécimale, color #c00 code hexadécimale abrégé, en valeur RGB sous forme de pourcentage donc, rouge, green, blue, rouge, vert, bleu, ou en valeurs décimales, donc un nombre compris entre 0 et 255.
Voici justement un exemple de code source, avec là, h1 color : #cc000000, titre de l’article 1 sera affiché avec cette couleur, prédéfinie tout simplement.
Vous pouvez modifier l’affichage du texte, par exemple, définir un style avec underline, text- decoration, c’est une propriété qui va vous permettre de choisir le style affichage de votre texte, underline ça va souligner le texte, c’est très utilisé pour les liens,
overline ça va surligner le texte,
line-trought ça va carrément barrer le texte,
none ça enlève toutes apparences prédéfinies, c’est comme ça que vous pourrez créer des liens qui sont pas soulignés dans une page Internet grâce à texte décoration.
Voici un exemple de code source avec trois classes CSS différentes, donc texte 1, texte 2, texte 3, texte 4, text-decoration overline donc la barre au-dessus, underline la barre soulignée, vous pouvez cumuler les deux donc overline barre au-dessus, underline barre soulignée, et line-trought texte barré, et sous l’affichage avec, dans la balise p pour paragraphe, la classe CSS texte surligné, texte souligné, texte souligné et surligné, texte barré, c’est un exemple de code source très basique comme ça vous comprenez directement à la fois comment utiliser les classes CSS, et text-decoration, si vous souhaitez enlever le lien, la barre qu’il y a sous les liens, donc les liens soulignés, vous pouvez le faire très facilement avec text-decoration : none.
Les transformations du texte
Vous pouvez effectuer des transformations sur le texte aussi, en utilisant la balise text-transform, et vous avez plusieurs valeurs, capitalize ça met la première lettre de chaque mot en majuscules,
Uppercase ça met toutes les lettres majuscules,
lowercase ça et toutes les lettres en minuscules,
none il n’y a aucune modification des lettres.
Vous pouvez utiliser cette propriété CSS text-transform, surtout capitalize c’est très pratique pour vos titres, vos phrases d’accroche, votre slogan, sur votre site Internet, comme ça, la première lettre de chaque mot sera automatiquement en majuscule.
Je vous ai mis un exemple de code source, avec toujours trois classes CSS, texte 1, texte 2, texte 3, et trois transformations différentes, donc avec la première lettre de chaque mot en majuscules, avec un texte en minuscule, et avec un texte en majuscule directement, et la transformation a été effectuée par CSS, c’est génial vous n’avez plus besoin d’utiliser du JavaScript, ou du PHP pour faire votre transformation d’affichage, faites les directement avec CSS, c’est plus rapide.
Indentation du texte
Vous pouvez également indenter le texte, faire un décalage du texte grâce à la balise text-indent et une valeur en pixel, donc souvent sur la première ligne de texte d’un paragraphe, on le décale, on fait une indentation de quelques pixels, vous savez le faire maintenant.
Je vous ai mis un exemple de code source, donc avec une indentation sur la classe txt1 à 32 pixels, et un autre paragraphe sans indentation, comme ça vous verrez bien la différence quand vous allez reprendre le code source dans votre page HTML, vous verrez le Lorem Ipsum simplement du faux texte, tout collé, alors que le deuxième texte, classe 1 et txt 1, le Lorem Ipsum il y aura une indentation de 32 pixels et la deuxième ligne viendra là alors que la première partie du texte sera décalée de 32 pixels.
Définir l’espace entre les lettres
Vous pouvez également définir l’espace entre les lettres, avec la propriété letter-spacing, donc letter-spacing : 18px ça va définir des grands espaces de 18 pixels entre chaque lettres, et si vous mettez une valeur négative ça va rapprocher les lettres entre elles, collées à -2 pixels.
Je vous ai également mis un exemple de code source, le Lorem Ipsum avec deux fois le même texte mais avec un espacement différent, donc un espacement de 18 pixels pour la classe txt 1, et un espacement de -3 pixels pour la classe txt 2, dans un cas les lettres sont très écartées, dans un autre cas, les lettres sont très rapprochées dans le deuxième paragraphe.
Vous pouvez aussi définir l’espace entre les mots d’un texte avec word-spacing, donc c’est exactement le même principe de fonctionnement que letter-spacing donc je vais aller vite, vous définissez votre valeur en pixel, le même exemple mais cette fois au lieu que ce soit les lettres espacées, donc excusez-moi, sur le code source c’est word-spacing pour les mots, j’ai fait un copié collé malheureux, je m’en excuse, au lieu de mettre letter-spacing, vous mettrez word-spacing come c’est expliqué ici, donc vous mettez word-spacing 18 pixels, word-spacing -3 pixels pour la classe txt 2 et vous verrez l’affichage différent entre les deux paragraphes, donc les mots seront plus ou moins éloignés ou collés, suivant que vous utilisiez la classe CSS txt 2 ou la classe CSS txt 1.
Votre plan d’actions !
Maintenant vous pouvez vraiment commencez à vous amuser à personnaliser vos textes, vos titres, retrouvez un exemple de code source directement en téléchargement sous ce cours vidéo si vous avez des questions, posez-les également sous la vidéo, je dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source CSS3
Voici un exemple de code CSS3 pour définir la mise en forme de votre texte.
Téléchargement du code source Exemple de mise en forme de texte avec CSS3
