Cómo hacer un asterisco rojo en CSS

Escrito por sara williams | Traducido por jesica denisse tschiffely
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un asterisco rojo en CSS
Realiza asteriscos rojos. (Comstock Images/Comstock/Getty Images)

Los formularios en la Web a veces utilizan asteriscos rojos para indicar que un campo es requerido, por ejemplo "nombre" o "correo electrónico". Para cambiar el formato a una pieza de texto pequeña en la página Web, coloca rótulos "<span>" alrededor del texto y agrega un nombre de clase para que puedas seleccionarlo en el código de la hoja de estilo. Una clase como "rojo" puede hacer que el código cambie el color del texto, incluyendo el asterisco. Una vez que escribas el código CSS para la clase "rojo", puedes volver a utilizar el mismo código de abarcamiento varias veces, según sea necesario.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu archivo HTML en Notepad o un editor de código. Encuentra tu asterisco en el código de página. Si el asterisco es parte de un formulario Web, lo encontrarás probablemente junto al rótulo "<input>", a menudo entre los rótulos "<label>".

  2. 2

    Coloca rótulos “<span>” a ambos lados de tu asterisco. Añade el nombre de clase "red" (rojo) a los rótulos:

    <span class=”red”>*</span>

    Puedes realizar esto para todos los asteriscos que necesites que sean rojos.

  3. 3

    Encuentra el rótulo "<style>" en el encabezado de tu código HTML o agrégalo:

    <style type=”text/css”> </style>

  4. 4

    Escribe una regla de estilo para la clase "red". Dentro de la misma, configura el "color" adecuado a "red" (rojo):

    <style type=”text/css”> .red { color: red; } </style>

    También puedes utilizar “#ff0000” en lugar de "red" si prefieres códigos de colores hexadecimales.

Consejos y advertencias

  • Guarda una copia de tus páginas Web antes de editarlas en caso de que cometas un error y no puedas solucionarlo.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles