¿Qué es CSS? (10 minutos)
Explicación:
CSS (Cascading Style Sheets) es el lenguaje que controla el aspecto visual de una página HTML: colores, tamaños, espaciado, disposición, etc. Mientras HTML define la estructura (como el esqueleto), CSS es la ropa y el maquillaje, haciendo que la página sea atractiva y funcional.
Cómo funciona:
- CSS usa reglas que conectan un selector (qué elemento estilizar) con propiedades y valores (cómo estilizarlo).
- Ejemplo de regla:
p { color: blue; font-size: 16px; }- p: Selector (apunta a todos los <p>).
- color: blue;: Propiedad y valor (texto azul).
- font-size: 16px;: Propiedad y valor (tamaño de fuente).
Formas de añadir CSS:
- Interno: Dentro de <style> en <head>.
<head> <style> h1 { color: red; } </style> </head> - Externo: En un archivo .css vinculado con <link>.
<link rel="stylesheet" href="estilos.css"> - Inline: Directamente en un elemento con el atributo style (menos recomendado).
<p style="color: green;">Texto</p>
Por qué es importante: En Laravel, usarás CSS para estilizar vistas Blade, haciendo que formularios, tablas y layouts sean visualmente coherentes y profesionales.
Punto clave: CSS permite personalizar la experiencia del usuario, y dominarlo es esencial para cualquier desarrollador web.
Actividad rápida (2 minutos):
Piensa en una página web que te guste (por ejemplo, un blog). Escribe en papel 2 cosas que CSS podría controlar. Ejemplo:
- Color del fondo.
- Tamaño del texto.
Selectores y propiedades básicas (15 minutos)
Explicación:
Selectores indican qué elementos HTML se estilizan. Propiedades definen el estilo aplicado.
Selectores básicos:
- Por etiqueta: Aplica a todos los elementos de un tipo.
h1 { color: navy; } /* Todos los <h1> */ - Por clase: Aplica a elementos con class="nombre". Usa un punto (.).
.destacado { background-color: yellow; } /* Elementos con class="destacado" */ -
Por ID: Aplica a un elemento único con id="nombre". Usa un numeral (#).
#intro { font-size: 20px; } /* Elemento con id="intro" */
Propiedades comunes:
- Texto:
- color: Color del texto (por ejemplo, red, #FF0000, rgb(255, 0, 0)).
- font-size: Tamaño de fuente (por ejemplo, 16px, 1em).
- font-family: Tipo de fuente (por ejemplo, Arial, sans-serif).
- Fondo:
- background-color: Color de fondo (por ejemplo, lightblue).
- Bordes:
- border: Define borde (por ejemplo, 1px solid black).
Ejemplo simple:
<p class="destacado">Este es un párrafo.</p>
<style>
.destacado {
color: darkblue;
font-size: 18px;
background-color: lightyellow;
}
</style>
Punto clave: Los selectores y propiedades son la base para estilizar elementos en vistas Blade, como botones o formularios.
Actividad rápida (3 minutos):
Escribe en papel una regla CSS para hacer que todos los <h2> sean verdes. Solución sugerida:
h2 {
color: green;
}
El box model (15 minutos)
Explicación:
El box model es el modelo que define cómo los elementos HTML ocupan espacio en una página. Cada elemento es una "caja" con las siguientes capas:
- Content: El contenido (texto, imágenes). Controlado por width y height.
- Padding: Espacio interno entre el contenido y el borde. Usa padding (por ejemplo, 10px).
- Border: Línea alrededor del padding. Usa border (por ejemplo, 2px solid black).
- Margin: Espacio externo fuera del borde. Usa margin (por ejemplo, 20px).
Cómo se calcula el tamaño total:
- Ancho total = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right.
- Ejemplo: Un <div> con width: 100px, padding: 10px, border: 2px, margin: 5px ocupa:
- 100 + 10 + 10 + 2 + 2 + 5 + 5 = 134px de ancho.
Propiedades clave:
- margin: 10px;: Margen en todos los lados.
- padding: 15px;: Relleno en todos los lados.
- border: 1px solid gray;: Borde continuo.
- box-sizing: border-box;: Hace que width incluya padding y border (muy útil).
Ejemplo práctico (como pide la lección):
Estilizar un párrafo con fondo y bordes:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Párrafo Estilizado</title>
<style>
p {
background-color: #e6f3ff; /* Fondo azul claro */
border: 2px solid navy; /* Borde azul oscuro */
padding: 15px; /* Espacio interno */
margin: 20px; /* Espacio externo */
font-size: 16px;
color: #333;
width: 300px; /* Ancho fijo */
box-sizing: border-box; /* Evita desbordes */
}
</style>
</head>
<body>
<p>Este es un párrafo estilizado con CSS.</p>
</body>
</html>
Cómo funciona:
- background-color: Fondo azul claro.
- border: Borde sólido de 2px.
- padding: 15px de espacio interno.
- margin: 20px de espacio externo.
- width y box-sizing: Controlan el tamaño total.
Cómo probarlo:
- Crea un archivo parrafo.html en VS Code.
- Copia el código y guárdalo.
- Ábrelo en un navegador.
- Usa "Inspeccionar" (F12) para ver el box model (pestaña "Computed" o "Layout").
- Alternativa: Pega en CodePen (pestaña HTML/CSS) y revisa la vista previa.
Resultado esperado:
- Un párrafo con fondo azul claro, borde navy, texto gris oscuro, y espaciado claro, ocupando un ancho fijo de 300px (incluyendo padding y borde).
Punto clave: El box model es fundamental para controlar el diseño en Laravel, donde estilizarás formularios y layouts con precisión.
Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para cambiar el fondo a gris claro (#f0f0f0) y el borde a 3px rojo. Solución sugerida:
p {
background-color: #f0f0f0;
border: 3px solid red;
padding: 15px;
margin: 20px;
font-size: 16px;
color: #333;
width: 300px;
box-sizing: border-box;
}
4. Resumen y preparación para la tarea (20 minutos)
Resumen:
- CSS: Estiliza HTML con selectores (etiqueta, clase, ID) y propiedades (color, font-size).
- Box model: Define el espacio de los elementos (margin, padding, border, width, height).
- Ejemplo práctico: Estilizamos un párrafo con fondo, borde, y espaciado controlado.
- Estos conceptos son esenciales para hacer que las vistas de Laravel sean visualmente atractivas.
Preparación para la tarea:
La tarea pide aplicar estilos al formulario de registro de la Lección 2 (con 4 campos: nombre, email, contraseña, edad). Recordemos el formulario base:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario de Registro</title>
</head>
<body>
<h1>Regístrate</h1>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</body>
</html>
Objetivo de la tarea:
- Usar CSS para estilizar el formulario, aplicando:
- Selectores (por etiqueta, clase, o ID).
- Propiedades como color, font-size, background-color.
- Box model (margin, padding, border) para espaciado y bordes.
- Hacer que el formulario sea visualmente claro y atractivo.
Estrategia sugerida:
- Usar padding y margin para espaciar los campos.
- Aplicar border a los <input> y <button> para definición.
- Usar background-color para destacar el formulario o botón.
- Asegurar que los <label> y <input> sean legibles con font-size adecuado.
Tarea práctica: Aplica estilos al formulario del ejercicio anterior
Instrucciones:
- Toma el formulario de la Lección 2 (registro.html) con 4 campos (nombre, email, contraseña, edad).
- Añade CSS para estilizarlo, asegurando que:
- Los campos tengan bordes claros (usa border).
- Haya espaciado adecuado (usa margin y padding).
- El texto sea legible (usa font-size, color).
- El botón destaque visualmente (usa background-color).
- Opcional: Usa clases (por ejemplo, .formulario) para estilizar el <form>.
- Usa el siguiente código como guía:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario Estilizado</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: navy;
font-size: 24px;
margin-bottom: 20px;
}
.formulario {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #f0f8ff; /* Fondo azul claro */
border: 1px solid #ccc;
border-radius: 5px;
}
label {
font-size: 16px;
margin-bottom: 5px;
display: block; /* Apila etiquetas */
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 2px solid #4682b4;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
button {
background-color: navy;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #4169e1;
}
</style>
</head>
<body>
<h1>Regístrate</h1>
<form class="formulario" action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</body>
</html>
- Prueba el archivo:
- Guarda como registro_estilizado.html.
- Ábrelo en un navegador para verificar que el formulario sea atractivo y claro.
- Usa "Inspeccionar" (F12) para revisar el box model de los <input> y <button>.
- Alternativa: Pega en CodePen y revisa la vista previa.
Ejemplo de solución esperada:
El código anterior es funcional. En el navegador:
- Un título navy, centrado.
- Un formulario con fondo azul claro, bordes redondeados, y campos apilados.
- Campos con bordes azul acero, espaciado uniforme, y un botón navy que cambia al pasar el ratón.
Tiempo estimado: 20-30 minutos (puedes hacerlo después de la lección).
Entregable: Archivo registro_estilizado.html con un formulario estilizado. Puedes compartir el código o describirlo para que lo revise.
Consejo: Experimenta con colores (usa códigos como #4682b4 o nombres como coral) y ajusta padding/margin en las herramientas de desarrollo para encontrar el espaciado perfecto.