Unidad 3: CSS Básico – Estilizando la Página Web
Introducción al Desarrollo Web con HTML y CSS
¡Bienvenido a la emocionante sesión en la que comenzaremos a darle estilo a tus páginas web! Hoy aprenderás sobre CSS (Cascading Style Sheets), una herramienta que nos permite mejorar la apariencia de nuestras páginas HTML. Con CSS, podrás cambiar colores, fuentes, tamaños de texto y mucho más. ¡Vamos a descubrir cómo!
1. Crear un Archivo CSS y Enlazarlo con HTML
¿Qué es un archivo CSS?
Un archivo CSS contiene las instrucciones para darle estilo a los elementos de tu página web. Es como el “vestuario” de tu página: HTML estructura los contenidos, y CSS los “viste” para que se vean mejor.
Cómo crear y enlazar un archivo CSS en tu proyecto:
- Abre Visual Studio Code y crea un nuevo archivo. Nómbralo
estilos.css. - Guarda el archivo CSS en la misma carpeta donde tienes tus archivos HTML.
- Abre un archivo HTML (como
index.htmlomis-hobbies.html) y escribe el siguiente código en la sección<head>, justo después de<title>:<link rel="stylesheet" href="estilos.css">
Este código le indica al archivo HTML que use las instrucciones de estilo que has escrito en estilos.css.
2. Concepto de Selectores, Propiedades y Valores en CSS
En CSS, usamos selectores, propiedades, y valores para definir estilos.
- Selector: indica a qué parte de tu HTML quieres aplicar el estilo. Por ejemplo,
bodyes el selector para todo el cuerpo de la página. - Propiedad: es el aspecto que quieres cambiar, como el color de fondo o el tamaño de la letra.
- Valor: define cómo cambiarás la propiedad, como poner color rojo o cambiar el tamaño a 20px.
Ejemplo de código CSS básico:
En tu archivo estilos.css, escribe:
body {
background-color: lightblue;
}
Este código usa body como selector y le da un color de fondo (background-color) de azul claro a toda la página.
3. Cambiar Colores de Fondo, Fuentes y Tamaño de Texto
Cambiar el color de fondo de un elemento
Puedes cambiar el color de fondo de diferentes elementos usando la propiedad background-color. Prueba esto en estilos.css:
h1 {
background-color: yellow;
}
Esto le dará al fondo de todos tus encabezados <h1> un color amarillo.
Cambiar el color de la fuente
Si quieres que el texto tenga un color diferente, usa la propiedad color. Por ejemplo:
p {
color: darkgreen;
}
Este estilo cambiará el color del texto de todos los párrafos <p> a verde oscuro.
Cambiar el tamaño del texto
Para ajustar el tamaño de la fuente, usa la propiedad font-size. A continuación, tienes un ejemplo para cambiar el tamaño del texto en los títulos <h1>:
h1 {
font-size: 30px;
}
Aquí estamos configurando el tamaño de los encabezados <h1> a 30 píxeles.
¡Práctica! Dale Estilo a Tu Página de “Mis Hobbies”
Usa el archivo estilos.css para darle vida a la página que creaste en la sesión anterior. Aquí tienes algunos ejemplos para probar:
- Cambia el color de fondo de toda la página:
body { background-color: #f0f8ff; } - Haz que el texto del título sea más grande y de otro color:
h1 { color: #4a90e2; font-size: 36px; } - Cambia el color y el tamaño de los elementos de la lista:
li { color: #ff6347; font-size: 20px; } - Personaliza el fondo y el borde de la tabla:
table { background-color: #fffacd; border: 2px solid #ffa07a; }
Visualiza tus Cambios
- Guarda todos los cambios en
estilos.css. - Abre el archivo HTML en tu navegador para ver los estilos aplicados.
¡Felicidades! Acabas de aprender los fundamentos básicos de CSS y a personalizar el aspecto de tu página. En la próxima sesión, aprenderemos más sobre CSS para que puedas darle un estilo aún más profesional. ¡Sigue practicando y diviértete con los colores y estilos!