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

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
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.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio