Configurando una página CSS en HTML
Aprende a configurar una página CSS en HTML, incluyendo la estructura de un archivo CSS, selectores, propiedades y valores.
Cristian Escalante
Última actualización: 6 de abril de 2025
Configurando una página CSS en HTML
Vamos a crear una página CSS bastante básica, para esto vamos a crear una carpeta llamada ejercicio_1 y luego vamos a abrir esta carpeta con nuestro editor de código de preferencia.
Estructura de un archivo CSS
Un archivo CSS es un archivo que contiene las reglas de estilo para un documento HTML. Para este ejercicio vamos a crear un archivo CSS que se llame styles.css y dentro de este vamos a aplicar los siguientes estilos:
body {
background-color: #f0f0f0;
}
p {
color: #333;
}
h1 {
color: #333;
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
}
Ahora vamos a crear un archivo HTML que se llame index.html y que se encargue de aplicar los estilos a un documento HTML. Para esto vamos a usar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Mi página CSS</h1>
<p>Este es un párrafo de ejemplo</p>
</body>
</html>
Ahora vamos a abrir el archivo index.html en nuestro navegador y vamos a ver el resultado.