Unidad 3: CSS Básico – Estilizando la Página Web
Introducción al Desarrollo Web con HTML y CSS
¡Bienvenido a una nueva sesión de CSS! Hoy aprenderemos a personalizar aún más nuestra página usando estilos especiales para los textos y fondos. Con estos conocimientos, tu sitio web podrá tener fuentes únicas, colores llamativos y fondos personalizados que harán que luzca genial. ¡Empecemos!
1. Aplicar Estilos a los Textos: Fuentes, Colores y Alineación
Cambiar el tipo de fuente
Para hacer que tu texto se vea diferente, puedes cambiar la fuente usando la propiedad font-family. Por ejemplo, vamos a usar una fuente clásica llamada Arial:
p {
font-family: Arial, sans-serif;
}
Este código aplicará la fuente Arial a todos los párrafos <p> de tu página.
Cambiar el color del texto
Si quieres que el texto tenga un color específico, usa la propiedad color. Puedes elegir colores con nombres como red o blue, o puedes utilizar códigos de color hexadecimales. Aquí te dejo un ejemplo:
h2 {
color: #ff4500;
}
Este estilo hará que el texto de todos los encabezados <h2> tenga un tono naranja fuerte.
Alinear el texto
Para alinear el texto, usa la propiedad text-align. Aquí te muestro algunos ejemplos de alineación común:
h1 {
text-align: center;
}
Este código centrará todo el texto dentro de los encabezados <h1>. Puedes también usar left (izquierda) o right (derecha) para otras alineaciones.
2. Agregar Fondos: Colores e Imágenes de Fondo
Colores de fondo
Puedes cambiar el color de fondo de cualquier elemento de la página. Por ejemplo, si quieres que todos los párrafos tengan un fondo claro, prueba esto:
p {
background-color: #f5f5f5;
}
Este estilo hará que los párrafos tengan un fondo de color gris claro.
Imágenes de fondo
Si prefieres una imagen de fondo en lugar de un color, usa la propiedad background-image. Solo tienes que incluir la URL de la imagen que deseas:
body {
background-image: url('fondo.jpg');
background-size: cover;
background-attachment: fixed;
}
En este ejemplo, estamos aplicando una imagen de fondo a toda la página (body). La propiedad background-size: cover; hace que la imagen cubra toda la pantalla, y background-attachment: fixed; asegura que la imagen no se mueva al hacer scroll.
Tip: Si no tienes una imagen a mano, busca una imagen gratuita en Internet o intenta usar algún color de fondo para comenzar.
Proyecto: Diseñar una Página Personalizada Usando Distintos Estilos
¡Ahora es momento de poner en práctica todo lo que aprendiste! Vamos a diseñar una página personalizada.
- Paso 1: Cambia el tipo de fuente y el color del texto.
body { font-family: Georgia, serif; color: #333; } - Paso 2: Dale un color o imagen de fondo.
body { background-color: #e0f7fa; } - Paso 3: Estiliza los encabezados y centra el título de la página.
h1 { color: #00796b; text-align: center; } - Paso 4: Agrega estilos únicos a otros elementos.
p { font-size: 18px; line-height: 1.6; } - Paso 5: Añade una imagen como fondo si te gusta.
body { background-image: url('nature.jpg'); background-size: cover; background-position: center; }
¡A Revisar!
Guarda todos los cambios y visualiza la página en tu navegador. Ajusta los colores, alineaciones y estilos para personalizarla aún más. ¡Experimenta hasta que logres el estilo que deseas! Con el tiempo, te volverás más rápido y creativo aplicando estos detalles.
¡Buen trabajo hoy! Ahora sabes cómo hacer que tus páginas web luzcan increíbles con texto estilizado y fondos personalizados. En la próxima sesión, aprenderemos más sobre el diseño de páginas web. ¡Sigue practicando y divirtiéndote!