Tarea anterior
Introducción a HTML y CSS12/13
A la lista de tareas
  1. 1. ¡Vamos!
  2. 2. CSS en acción
  3. 3. Consolidación
  4. 4. Conceptos básicos de HTML
  5. 5. Etiquetas HTML individuales
  6. 6. Atributos de etiquetas HTML
  7. 7. Buscar errores en HTML
  8. 8. Conceptos básicos de CSS
  9. 9. Otras formas de conectar CSS
  10. 10. Selectores CSS
  11. 11. Clases en CSS
  12. 12. Propiedades y valores CSS
  13. 13. Buscar errores en CSS
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Propiedades y valores CSS

Así pues, el lenguaje CSS se compone de selectores y propiedades. Los selectores especifican a qué elementos aplicar estilos, y las propiedades especifican cómo mostrar los elementos.

Existe un gran número de propiedades CSS que afectan a casi todos los aspectos de la visualización de los elementos. Cada propiedad tiene un conjunto específico de valores.

Algunos valores se establecen mediante constantes de texto, por ejemplo, red, bold, otros mediante valores numéricos: 12px, 120%, etc.

El poder de los estilos radica en que puedes cambiar de forma rápida y flexible la apariencia de los elementos que desees, especialmente cuando utilizas clases. Por ejemplo, para tachar el texto de todos los puntos estudiados en un esquema, basta con añadir una línea en CSS:

.completed {
    color: green;
    text-decoration: line-through;
}

Y todas las etiquetas con la clase .completed se mostrarán con el texto tachado. Ahora imagina cuánto se tarda en hacer lo mismo mediante estilos en línea cuando hay más de cien párrafos en un esquema.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Clases en CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Esquema del curso</h1> <p class="completed">Etiquetas de emparejamiento.</p> <p class="completed">Etiquetas individuales.</p> <p class="completed">Atributos de la etiqueta.</p> <p class="completed">Estilos en línea (incorporados).</p> <p class="in-progress">Estilos exteriores.</p> <p class="new">Estilización por clases.</p> </body> </html>
CSS
body { font-family: "Tahoma", serif; } h1 { color: #999999; } .completed { color: green; } .in-progress { color: orange; } .new { color: red; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Añada una propiedad text-decoration a la regla .completed con un valor line-through,
    2. en la regla .in-progress con una propiedad padding-left con un valor de 15px,
    3. en la regla .new la propiedad background-color con el valor #fff0f0.
    4. Por último, marque los dos últimos párrafos del esquema como aprobados, sustituyendo su clase por completed.

    © 2023-2025, codigoheroe.com