Con CSS, es fácil establecer el color del texto en un documento. Si desea que los párrafos de su página se representen en un color determinado, simplemente especifique eso en su hoja de estilos externa y el navegador mostrará el texto en ese color elegido. ¿Qué sucede entonces cuando desea cambiar el color de una sola palabra (o quizás solo unas pocas palabras) dentro de un párrafo del texto? Para eso, necesitarás usar 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, por lo que no se preocupe si se trata de algún tipo de pirateo. Con este enfoque, también evita usar etiquetas y atributos en desuso como "fuente", que es un producto de una era HTML pasada.
Este artículo es para desarrolladores web principiantes que probablemente sean nuevos en HTML y CSS. Le ayudará a aprender cómo usar la etiqueta HTML y CSS para cambiar el color del texto específico en sus páginas. Dicho esto, hay algunos inconvenientes de este método, que cubriremos al final de este artículo. Por ahora, sigue leyendo para aprender los pasos para cambiar este color de texto. Es muy fácil y debe tomar unos dos minutos.
Instrucciones paso a paso
- Abra la página web que desea actualizar en su editor de HTML de texto favorito. Esto podría ser un programa como Adobe Dreamweaver o un editor de texto simple como Notepad, Notepad ++, TextEdit, etc.
- En el documento, ubique 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 de texto. Ese texto estará contenido dentro del par de etiquetas. Encuentra una de las dos palabras cuyo color te gustaría editar.
- Coloque el cursor antes de la primera letra en la palabra o grupo de palabras que desea cambiar de color. Recuerde, si está utilizando un editor WYSIWYG como Dreamweaver, está trabajando en "vista de código" en este momento.
- Vamos a envolver el texto cuyo color queremos cambiar con una etiqueta, incluido un atributo de clase. El párrafo completo puede verse así:
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 "enlace" que podemos usar en CSS. Nuestro siguiente paso es saltar a nuestro archivo CSS externo para agregar una nueva regla.
- En nuestro archivo CSS, vamos a añadir:
-
.focus-text {
-
color: # F00;
-
}
- Esta regla establecería ese elemento en línea, el, para mostrar en el color rojo. Si tuviéramos un estilo anterior que configurara el texto de nuestro documento en negro, este estilo en línea causaría que el texto de separación se enfocara y destacara con el color diferente. También podríamos agregar otros estilos a esta regla, ¿quizás el texto en cursiva o en negrita para enfatizarlo aún más?
- Guarda tu página.
- Pruebe la página en su navegador web favorito para ver los cambios vigentes.
- Tenga en cuenta que además de los, algunos profesionales de la web optan por utilizar otros elementos como los pares de etiquetas o. Estas etiquetas solían ser para negrita y cursiva específicamente, pero fueron desaprobadas y reemplazadas con y. Sin embargo, las etiquetas todavía funcionan en los navegadores modernos, por lo que muchos desarrolladores web las utilizan como ganchos de estilo en línea. Este no es el peor enfoque, pero si desea evitar cualquier elemento en desuso, le sugerimos que se quede con la etiqueta para este tipo de necesidades de estilo.
Consejos y cosas a tener en cuenta
Si bien este enfoque funciona bien para pequeñas necesidades de estilo, como si necesita cambiar solo una pequeña porción de texto en un documento, puede salirse de control rápidamente. Si encuentra que su página está llena de elementos en línea, todos los cuales tienen clases únicas que está utilizando en su archivo CSS, es posible que lo esté haciendo mal, recuerde que cuantas más etiquetas estén en su página, más difícil será. Es probable que se mantenga esa página en el futuro. Además, una buena tipografía web rara vez tiene tantas variantes de color, etc. en toda la página.
