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. 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

CSS en acción

En la última tarea, cambiaste el código en el editor HTML y te aseguraste de que el contenido de la página cambiara.

En esta tarea, trabajarás con el editor CSS y verás cómo puedes cambiar el diseño de una página con unas pocas líneas de código.

No vamos a entrar ahora en el significado de cada propiedad CSS. Nos limitaremos a ver CSS en acción. Para activar el código CSS, deberá eliminar los caracteres de comentario que "lo desactivan".

  • 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 aún más sencillo que HTML. Consiste en un montón de reglas, como estas:</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>muchas</em> propiedades.</p> <p>La mayor parte del curso se centrará específicamente en CSS.</p> <p>Ahora trabaja con el editor inferior.</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. Elimine los caracteres /* de la primera línea del editor CSS y vea cómo se transforma el texto de la página.

    © 2023-2025, codigoheroe.com