Tarea anterior
Introducción a HTML y CSS2/13
A la lista de tareas
  1. 1. ¡Vamos!
  2. 2. CSS en acción
  3. 3. Repaso
  4. 4. Fundamentos de HTML
  5. 5. Etiquetas HTML individuales
  6. 6. Atributos de las etiquetas HTML
  7. 7. Busquemos errores en HTML
  8. 8. Fundamentos de CSS
  9. 9. Otras formas de incluir CSS
  10. 10. Selectores en CSS
  11. 11. Clases en CSS
  12. 12. Propiedades y valores de CSS
  13. 13. Busquemos errores en CSS
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

CSS en acción

En el ejercicio anterior cambiaron código en el editor HTML y comprobaron que, al hacerlo, cambia el contenido de la página.

En este ejercicio trabajarán con el editor CSS y verán cómo unas pocas líneas de código pueden cambiar por completo la apariencia de la página.

Por ahora no vamos a profundizar en el significado de cada propiedad CSS. Primero veamos CSS en acción. Para activar ese código CSS, tendrán que borrar los símbolos de comentario que lo mantienen «apagado».

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>CSS en acción</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>CSS</h1> <p>CSS es todavía más sencillo que HTML. Se compone de muchas reglas, más o menos así:</p> <pre><code> selector { propiedad1: <em>valor1</em>; propiedad2: <em>valor2</em>; }</code></pre> <p>Las reglas son muy sencillas. Pero hay un problema: hay <em>muchísimas</em> propiedades.</p> <p>Gran parte del curso estará dedicada precisamente a CSS.</p> <p>Ahora trabajen con el editor de abajo.</p> </body> </html>
CSS
/* body { padding: 0 20px; font-size: 16px; font-family: "Arial", sans-serif; } h1 { color: #618ad2; text-shadow: 2px 2px 0 #cccccc; } pre { padding: 10px; font-size: 14px; line-height: 20px; background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 3px; } em { color: #618ad2; } */

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. Borren los símbolos /* de la primera línea del editor CSS y vean cómo cambia el texto de la página.

    © 2023-2026, codigoheroe.com