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.

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo