Unidad 3: CSS Básico – Estilizando la Página Web
Introducción al Desarrollo Web con HTML y CSS
¡Bienvenido a la sesión 8! Hoy vamos a aprender a organizar y decorar los elementos de tu página web utilizando bordes, márgenes, y padding (espaciado interno), así como crear estructuras de diseño usando cajas o divisiones de contenido. Con estos conocimientos, podrás crear páginas con un aspecto organizado y profesional. ¡Empecemos!
1. Uso de Bordes para Resaltar Elementos
Los bordes te ayudan a separar o resaltar los elementos en tu página. Puedes controlar el estilo, grosor y color del borde de cualquier elemento HTML.
Crear un borde simple
Para añadir un borde a un elemento, usa la propiedad border. Por ejemplo, si quieres darle un borde negro de 2 píxeles a un párrafo:
p {
border: 2px solid black;
}
Personalizar los bordes
- Color: Puedes usar cualquier color para el borde.
- Grosor: Usa valores en píxeles (
px) para cambiar el grosor. - Estilo: Hay varios estilos como
solid(sólido),dashed(línea discontinua) ydotted(punteado).
2. Ajustando Espaciado con Márgenes y Padding
Márgenes (espacio externo)
Los márgenes controlan el espacio alrededor de un elemento, empujando el elemento lejos de otros elementos en la página.
div {
margin: 20px;
}
Este ejemplo añade un margen de 20 píxeles alrededor del elemento <div>.
Padding (espacio interno)
El padding añade espacio dentro de un elemento, entre el contenido y el borde. Esto es útil para que el texto o las imágenes no se vean pegados a los bordes.
div {
padding: 10px;
}
Con esto, el contenido dentro del <div> tendrá un pequeño espacio de 10 píxeles alrededor, lo que hará que luzca más claro y organizado.
Ejemplo combinando márgenes y padding
.box {
margin: 15px;
padding: 20px;
border: 2px dashed blue;
}
3. Introducción a Layouts con Cajas (Divisiones de Contenido)
Las cajas (<div>) son como contenedores para organizar y agrupar elementos. Vamos a usarlas para crear secciones en nuestra página.
Crear una caja simple
Un elemento <div> te permite agrupar contenido y aplicar estilos específicos.
<div class="info-box">
<h2>Acerca de Mí</h2>
<p>Me gusta el desarrollo web y estoy aprendiendo a crear sitios web increíbles.</p>
</div>
Estilizar la caja con CSS
Podemos hacer que esta caja tenga un borde, margen y padding para que se vea bien.
.info-box {
border: 2px solid green;
padding: 15px;
margin: 10px;
background-color: #f0f8ff;
}
Proyecto: Crear una Página con “Cajas de Información” Organizadas con Bordes y Espaciado
Para este proyecto, vamos a crear una página que muestre varias secciones (o «cajas de información») usando bordes, márgenes, y padding. Esto es útil para organizar el contenido de forma clara y ordenada.
Paso a Paso
Paso 1: Crea una estructura HTML básica con varias cajas <div>.
<div class="info-box">
<h2>Acerca de Mí</h2>
<p>Texto sobre tus intereses o hobbies.</p>
</div>
<div class="info-box">
<h2>Proyectos</h2>
<p>Descripción de proyectos que hayas realizado o que te gustaría hacer.</p>
</div>Paso 2: En tu archivo CSS, aplica bordes, márgenes y padding a cada caja.
.info-box {
border: 2px solid #3b5998;
padding: 20px;
margin: 15px;
background-color: #e6f2ff;
border-radius: 10px;
}Paso 3: Usa colores de fondo y bordes distintos para hacer cada caja más llamativa. Ajusta el padding y el margin hasta que encuentres un diseño que te guste.
Paso 4: Guarda y visualiza el diseño en tu navegador.
¡A Revisar!
Revisa cómo se ven los espacios entre las cajas y asegúrate de que el contenido esté bien organizado. Si necesitas más separación entre las cajas, ajusta los márgenes; si quieres que el contenido esté más alejado de los bordes, ajusta el padding.
¡Excelente trabajo hoy! Ahora tienes las herramientas para crear un diseño de página con cajas y espaciado organizado. En la próxima sesión, aprenderemos más sobre cómo organizar el contenido en columnas para diseños aún más avanzados. ¡Sigue practicando y divirtiéndote en el proceso!