Puede especificar colores de fuente, tamaños y otros parámetros en una hoja de estilo CSS externa. Sin embargo, si desea cambiar el color de una sola palabra o frase, la forma más fácil y sencilla es utilizar la etiqueta en línea. CSS en línea es como suena: se agrega en el HTML de la página, en lugar de una hoja de estilo externa.
Evite el uso de la etiqueta, que ha quedado obsoleta.
A continuación, se explica cómo cambiar el color de una palabra con la etiqueta:
Con su editor de texto o HTML preferido en el modo de vista de código, coloque el cursor antes de la primera letra de la palabra o grupo de palabras que desea colorear.
Envuelva el texto cuyo color queremos cambiar con una etiqueta, incluido un atributo de clase. El párrafo completo puede verse así: Este es el texto que se enfoca en una oración.
-
Dale a ese texto específico un "gancho" que podamos usar en CSS. Nuestro siguiente paso es saltar a nuestro archivo CSS externo para agregar una nueva regla.
En nuestro archivo CSS, agreguemos:
.focus-text {
color: # F00;
}
Esta regla establecería ese elemento en línea, el, para que se muestre en color rojo. Si tuviéramos un estilo anterior que estableciera el texto de nuestro documento en negro, este estilo en línea haría que el texto del espacio se enfocara y resaltara con el color diferente. También podríamos agregar otros estilos a esta regla, quizás poniendo el texto en cursiva o 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 vigor.
Tenga en cuenta que, además de, 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 obsoletas y reemplazadas por y. Las etiquetas todavía funcionan en los navegadores modernos, sin embargo, muchos desarrolladores web las usan como ganchos de estilo en línea. Este no es el peor enfoque, pero si desea evitar elementos obsoletos, le sugerimos que se ciña a la etiqueta para este tipo de necesidades de estilo.
Consejos y cosas a tener en cuenta
Si bien este enfoque funciona bien para necesidades de estilo pequeñas, como si necesita cambiar solo una pequeña parte 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, puede lo esté haciendo mal. Recuerde, cuantas más etiquetas haya en su página, más difícil será mantener esa página activa hacia adelante. Además, una buena tipografía web rara vez tiene tantas variantes de color, etc. a lo largo de la página.