Changer la couleur du mot avec la balise SPAN dans CSS

click fraud protection

Vous pouvez spécifier des couleurs de police, des tailles et d'autres paramètres dans une feuille de style CSS externe. Si vous souhaitez modifier la couleur d'un seul mot ou d'une phrase, le moyen le plus simple et le plus simple consiste à utiliser la balise en ligne. Le CSS en ligne est exactement comme ça sonne: il est ajouté dans le code HTML de la page, plutôt que dans une feuille de style externe.

Évitez d'utiliser la balise, qui a été dépréciée.

Voici comment changer la couleur d'un mot à l'aide de la balise:

  1. À l'aide de votre éditeur de texte ou HTML préféré en mode d'affichage du code, placez votre curseur avant la première lettre du mot ou du groupe de mots que vous souhaitez colorier.

  2. Laissez envelopper le texte dont nous voulons changer la couleur avec une balise, y compris un attribut de classe. L'intégralité du paragraphe peut ressembler à ceci: Il s'agit du texte sur lequel se concentre une phrase.

  3. Donnez à ce texte spécifique un « crochet » que nous pouvons utiliser en CSS. Notre prochaine étape consiste à accéder à notre fichier CSS externe pour ajouter une nouvelle règle.

    instagram viewer

    Dans notre fichier CSS, ajoutons:

    .focus-texte {

     couleur: #F00 ;

    }

    Cette règle définirait cet élément en ligne, le, pour qu'il s'affiche en rouge. Si nous avions un style précédent qui définissait le texte de notre document en noir, ce style en ligne entraînerait le focus sur le texte de la plage et se démarquerait avec la couleur différente. Nous pourrions également ajouter d'autres styles à cette règle, peut-être en mettant le texte en italique ou en gras pour le souligner encore plus?

  4. Enregistrez votre page.

    Testez la page dans votre navigateur Web préféré pour voir les changements en vigueur.

    A noter qu'en plus du, certains professionnels du web choisissent d'utiliser d'autres éléments comme les paires de balises ou. Ces balises étaient spécifiquement destinées au gras et à l'italique, mais ont été déprécié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 approche, mais si vous voulez éviter tout élément obsolète, nous vous suggérons de vous en tenir à la balise pour ce genre de besoins de style.

Conseils et choses à surveiller

Bien que cette approche fonctionne bien pour les petits besoins de style, comme si vous devez modifier un seul petit morceau de texte dans un document, elle peut rapidement devenir incontrôlable. Si vous trouvez que votre page est jonchée d'éléments en ligne, qui ont tous des classes uniques que vous utilisez dans votre fichier CSS, vous pouvez faire les choses mal, n'oubliez pas que plus il y a de balises dans votre page, plus il sera probablement difficile de maintenir cette page en marche avant. De plus, une bonne typographie Web a rarement autant de variantes de couleur, etc. tout au long de la page.

instagram story viewer