Avec CSS, il est facile de définir la couleur du texte dans un document. Si vous souhaitez que les paragraphes de votre page soient restitués dans une certaine couleur, il vous suffit de le spécifier dans votre feuille de style externe et le navigateur affichera votre texte dans la couleur choisie. Que se passe-t-il ensuite lorsque vous souhaitez changer la couleur d'un seul mot (ou peut-être de quelques mots) dans un paragraphe de texte? Pour cela, vous devrez utiliser un élément en ligne comme la balise.
En fin de compte, il est facile de changer la couleur d'un mot ou d'un petit groupe de mots dans une phrase à l'aide de CSS, et les balises sont du code HTML valide. Ne vous inquiétez donc pas du fait que ce soit une sorte de piratage. Avec cette approche, vous évitez également d'utiliser des balises et des attributs obsolètes tels que "font", qui est un produit d'une époque HTML révolue.
Cet article est destiné aux développeurs Web débutants qui découvrent probablement HTML et CSS. Cela vous aidera à apprendre à utiliser les balises HTML et CSS pour changer la couleur d'un texte spécifique sur vos pages. Cela étant dit, cette méthode présente des inconvénients que nous traiterons à la fin de cet article. Pour l'instant, lisez la suite pour apprendre les étapes pour changer cette couleur de texte. C'est très facile et devrait prendre environ deux minutes.
Instruction pas à pas
- Ouvrez la page Web que vous souhaitez mettre à jour dans votre éditeur HTML de texte favori. Cela peut être un programme comme Adobe Dreamweaver ou un éditeur de texte simple comme Notepad, Notepad ++, TextEdit, etc.
- Dans le document, localisez les mots que vous souhaitez afficher dans une couleur différente sur la page. Pour les besoins de ce didacticiel, utilisons des mots contenus dans un paragraphe de texte plus grand. Ce texte sera contenu dans la paire de balises. Recherchez l'un des deux mots dont vous souhaitez modifier la couleur.
- Placez votre curseur avant la première lettre du mot ou du groupe de mots que vous souhaitez changer de couleur. N'oubliez pas que si vous utilisez un éditeur WYSIWYG tel que Dreamweaver, vous travaillez actuellement en "affichage de code".
- Laissez le texte dont nous voulons changer la couleur avec une balise, y compris un attribut de classe. Le paragraphe entier peut ressembler à ceci:
C'est un texte qui se concentre sur une phrase.
- Nous venons d'utiliser un élément en ligne, le, pour donner à ce texte spécifique un "crochet" utilisable en CSS. Notre prochaine étape consiste à accéder à notre fichier CSS externe pour ajouter une nouvelle règle.
- Dans notre fichier CSS, ajoutons:
-
.focus-text {
-
couleur: # F00;
-
}
- Cette règle définirait cet élément en ligne, le, à afficher dans la couleur rouge. Si nous avions un style précédent qui définissait le texte de notre document en noir, ce style en ligne aurait pour effet de centrer le texte sur l'étendue et de le faire ressortir avec la couleur différente. Nous pourrions également ajouter d'autres styles à cette règle, en rendant le texte en italique ou en gras pour le souligner davantage.
- Enregistrez votre page.
- Testez la page dans votre navigateur Web préféré pour voir les changements en vigueur.
- Notez qu'en plus des, certains professionnels du Web choisissent d'utiliser d'autres éléments tels que les paires ou les paires de balises. Auparavant, ces balises étaient spécifiquement destinées aux caractères gras et italiques, mais elles étaient déconseillées et remplacées par et. Les balises fonctionnent toujours dans les navigateurs modernes, cependant, de nombreux développeurs Web les utilisent comme crochets de style en ligne. Ce n’est pas la pire des solutions, mais si vous souhaitez éviter les éléments obsolètes, nous vous suggérons de vous en tenir à la balise pour ces types de besoins en matière de style.
Trucs et astuces à surveiller
Bien que cette approche fonctionne bien pour les besoins de mise en forme de petite taille, par exemple si vous devez modifier un seul petit texte dans un document, elle peut rapidement devenir incontrôlable. Si vous trouvez que votre page est encombrée d'éléments inline, qui ont tous des classes uniques que vous utilisez dans votre fichier CSS, vous risquez de ne pas le faire correctement. N'oubliez pas que plus il y a de balises dans votre page, plus il est difficile. est susceptible d'être de maintenir cette page à l'avenir. En outre, une bonne typographie Web comporte rarement autant de variantes de couleur, etc., sur la page.
