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
- 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.
- 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.
- 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.
- 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.
- 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.
- En nuestro archivo CSS, agreguemos:
- .focus-text {
- color: #F00;
-
}
- 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?
- Guarde su página.
- Pruebe la página en su navegador web favorito para ver los cambios en efecto.
- 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.
