Cambiar el color de la palabra con la etiqueta SPAN en CSS

Cambiar el color de la palabra con la etiqueta SPAN en CSS

Cambiar el color de la palabra con la etiqueta SPAN en CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Con CSS, es fácil establecer el color del texto en un documento. Si desea que los párrafos de su página se muestren en un color determinado, simplemente especifique que en su hoja de estilo externa y el navegador mostrará su texto en el color elegido. ¿Qué sucede entonces cuando se desea cambiar el color de una sola palabra (o tal vez sólo unas pocas palabras) dentro de un párrafo de texto? Para ello, necesitará utilizar un elemento en línea como la etiqueta.

En última instancia, cambiar el color de una sola palabra o un pequeño grupo de palabras dentro de una oración es fácil usando CSS, y las etiquetas son HTML válidas, así que no te preocupes de que esto sea algún tipo de hack. Con este enfoque, también evitará el uso de etiquetas y atributos obsoletos como «font», que es un producto de una era HTML pasada.

Esto es para los desarrolladores web principiantes que probablemente son nuevos en HTML y CSS. Le ayudará a aprender a usar la etiqueta HTML y CSS para cambiar el color del texto específico de sus páginas. Dicho esto, hay algunas desventajas de este método, que trataremos al final de este artículo. Por ahora, siga leyendo para aprender los pasos para cambiar este color de texto. Es muy fácil y debería durar unos dos minutos.

Instrucción paso a paso

  1. Abra la página web que desea actualizar en su editor de texto HTML favorito. Este podría ser un programa como Adobe Dreamweaver o un simple editor de texto como Notepad, Notepad++, TextEdit, etc.
  2. En el documento, busque las palabras que desea que se muestren en un color diferente en la página. Por el bien de este tutorial, usemos algunas palabras que están dentro de un párrafo más grande del texto. Ese texto estará contenido dentro del par de etiquetas. Busque una de las dos palabras cuyo color le gustaría editar.
  3. Coloque el cursor delante de la primera letra de la palabra o grupo de palabras que desea cambiar de color. Recuerde, si está usando un editor WYSIWYG como Dreamweaver, está trabajando en «vista de código» ahora mismo.
  4. Vamos a envolver el texto cuyo color queremos cambiar con una etiqueta, incluyendo un atributo de clase. Todo el párrafo puede parecerse a esto: Este es un texto que se enfoca en una oración.
  5. Acabamos de usar un elemento en línea, el , para darle a ese texto específico un «gancho» que podemos usar en CSS. Nuestro siguiente paso es saltar a nuestro archivo CSS externo para añadir una nueva regla.
  1. En nuestro archivo CSS, agreguemos:
  2. .focus-text {
  3. color: #F00;
  4.  }
  5. Esta regla establecería que el elemento en línea, el ,, se muestre en el color rojo. Si tuviéramos un estilo anterior que pusiera el texto de nuestro documento en negro, este estilo en línea haría que el texto extendido se enfocara y destacara con el color diferente. También podríamos añadir otros estilos a esta regla, tal vez poniendo el texto en cursiva o en negrita para enfatizarlo aún más?
  6. Guarde su página.
  7. Pruebe la página en su navegador web favorito para ver los cambios en efecto.
  8. Tenga en cuenta que, además de los ,, algunos profesionales de la web optan por utilizar otros elementos como los pares o etiquetas. Estas etiquetas solían ser para negrita y cursiva específicamente, pero fueron obsoletas y reemplazadas por y… Las etiquetas siguen funcionando en los navegadores modernos, sin embargo, muchos desarrolladores web las utilizan como ganchos de estilo en línea. Este no es el peor enfoque, pero si desea evitar elementos obsoletos, le sugerimos que se apegue a la etiqueta para este tipo de necesidades de estilo.

Consejos y cosas a tener en cuenta

Aunque este enfoque funciona bien para necesidades de estilo pequeñas, como si necesita cambiar sólo una pequeña parte del texto de un documento, puede salirse rápidamente de control. Si encuentra que su página está llena de elementos en línea, todos los cuales tienen clases únicas que está usando en su archivo CSS, puede estar haciéndolo mal, recuerde, mientras más de estas etiquetas estén en su página, más difícil será mantener esa página en el futuro. Además, una buena tipografía web raramente tiene tantas variantes de color, etc. a lo largo de la página.

TAMBIÉN TE INTERESA

foto-del-sol-creada-por-AI

Webs de inteligencia artificial para crear imágenes

Inteligencia artificial para crear imágenes, esa es una de las tendencias que ha popularizado la IA y el boom de ChatGPT y compañía. Hoy vamos a hablar de una serie de herramientas, páginas webs o soluciones que permiten crear imágenes de la nada para poder utilizar de forma libre. Hay muchas, pero nosotros recogemos en

dia-del-padre

Con estos 8 productos de LG seguro que aciertas en el Día del Padre

En lugar de rompernos la cabeza buscando productos de distintas marcas para regalar en el Día del Padre, nosotros hemos acudido a una firma como LG para recomendar artículos que podrían satisfacer a todos los que tienen hijos. Es su día y, siendo honestos, la tecnología es, posiblemente, el regalo que más aprecien. De modo

nuevo-diseño-de-Uber

Uber rediseña su app y añade interesantes funciones

La popular app de delivery y transporte, Uber, ha sido rediseñada con el objetivo de ser mucho más intuitiva y fácil de usar para los miles y miles de usuarios que tiene en España. Dado que son los mayores cambios que se han producido hasta la fecha en la historia de la aplicación, conviene detenerse

foto-Samsung-S23

Ya tenemos entre manos el nuevo Samsung S23…

Mientras cae el precio del Samgung S22 en plataformas como Amazon, la compañía surcoreana presenta la serie S23, su nuevo coloso. Como lo fue en su momento, la generación anterior y su variable Ultra, el nuevo buque insignia llega para competir en lo más alto en cuanto a prestaciones… y también precio. Sobra decir que

educación en ciencia

¿Se lo preguntamos a María?

Por Inés Bermejo – Directora general de HP Iberia — Un año más, la celebración del Día de la Mujer Trabajadora hace que muchas personas se pregunten ¿por qué no hay más mujeres en Ciencia? Permítanme que en este miércoles 8 de marzo de 2023 formule la pregunta de otra manera: “¿Cómo es posible que