Caso práctico

CSS

Vamos a darle un toque de magia a nuestras páginas web.

Imagina que el HTML es el esqueleto de una casa, pero sin pintura ni decoración.

Ahí es donde entra el CSS, con sus hojas de estilo.

Con cada línea de código que escribas, verás cómo cambian los colores, se ordenan los elementos y hacemos que todo se vea increíble.

Crea una página web con la siguiente estructura y aplícale estilos usando CSS externo (utiliza el bloc de notas y no olvides de guardar el archivo con la extensión .HTML en su nombre):

Página web base:

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CSS Básico</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Este es mi primer texto con estilos en CSS.</p>
</body>
</html>

Realizar en otro archivo la siguiente hoja de estilo:

styles.css

/* Cambia el color de fondo de la página */
body {
    background-color: lightblue;
}

/* Cambia el color y tamaño del título */
h1 {
    color: darkblue;
    font-size: 40px;
}

/* Cambia el color y tamaño del párrafo */
p {
    color: darkred;
    font-size: 20px;
}

Actividad en CSS

Caso práctico

Retroalimentación