Dar estilo a los elementos web con bordes y relleno en CSS

Introducción

En este laboratorio, aprenderá a dar estilo a los elementos web utilizando los bordes y el relleno de CSS, centrándose en mejorar la presentación visual de los elementos HTML. El laboratorio ofrece una guía paso a paso para crear un documento HTML y aplicar diversas técnicas de bordes y relleno para mejorar el diseño y la disposición del contenido web.

A través de ejercicios prácticos, explorará cómo agregar estilos de borde a los párrafos, personalizar las propiedades de los bordes, aplicar relleno y experimentar con diferentes combinaciones de estas técnicas de estilo CSS. Al final del laboratorio, habrá adquirido experiencia práctica en el uso de CSS para crear elementos web más atractivos visualmente y estructurados.

Crear documento HTML

En este paso, aprenderá a crear un documento HTML que servirá como base para dar estilo con los bordes y el relleno de CSS. HTML proporciona la estructura para el contenido web, y comenzaremos configurando un documento básico.

Abra el WebIDE y navegue hasta el directorio ~/project. Cree un nuevo archivo llamado styles.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Aquí está la estructura básica de un documento HTML5 que utilizará:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border and Padding Example</title>
    <style>
      /* CSS styles will be added here in later steps */
    </style>
  </head>
  <body>
    <p>Welcome to CSS Styling!</p>
  </body>
</html>

Analicemos los componentes principales:

<!DOCTYPE html> declara que este es un documento HTML5
<html lang="en"> es el elemento raíz con la especificación de idioma
<head> contiene metadatos sobre el documento
<meta charset="UTF-8"> asegura la codificación de caracteres adecuada
<title> establece el título de la página que se muestra en la pestaña del navegador
La etiqueta <style> es donde agregaremos nuestro CSS en los pasos siguientes
<body> contiene el contenido visible de la página

Copie este código en el archivo styles.html en el WebIDE. Guarde el archivo presionando Ctrl+S o utilizando el icono de guardar.

Salida de ejemplo:
Cuando abra este archivo en un navegador web, verá un párrafo simple que dice "¡Bienvenido al estilo CSS!". Este será nuestro punto de partida para agregar bordes y relleno en los siguientes pasos.

Agregar estilos de borde al párrafo

En este paso, aprenderá a agregar estilos de borde a un párrafo utilizando CSS. Los bordes son una forma fundamental de definir y separar visualmente los elementos en una página web.

Abra el archivo styles.html que creó en el paso anterior. Dentro de la etiqueta <style>, agregue el siguiente CSS para crear un borde para el párrafo:

<style>
  p {
    border: 2px solid blue;
  }
</style>

Analicemos la propiedad de borde:

border es una propiedad abreviada que combina tres sub-propiedades
2px establece el ancho del borde en 2 píxeles
solid define un estilo de línea continua e ininterrumpida
blue especifica el color del borde

Salida de ejemplo:
Cuando abra este archivo HTML en un navegador web, verá el párrafo rodeado de un borde azul sólido de 2 píxeles de ancho. Esto demuestra lo fácil que es agregar definición visual a los elementos HTML utilizando CSS.

Para ayudarlo a entender, aquí está una representación visual de lo que hace el borde:

+-------------------+
|                   |
| Welcome to CSS    |
| Styling!          |
|                   |
+-------------------+

El borde crea un límite claro alrededor del párrafo, haciéndolo destacar de otros contenidos de la página.

Personalizar propiedades de borde

En este paso, explorará técnicas de personalización de borde más avanzadas en CSS. Modificaremos las propiedades de borde individuales para crear diseños más complejos e interesantes.

Actualice la sección <style> en su archivo styles.html con el siguiente CSS:

<style>
  p {
    border-width: 4px;
    border-style: dashed;
    border-color: green;
    border-radius: 10px;
  }
</style>

Analicemos las nuevas propiedades de borde:

border-width: Establece el grosor del borde en 4 píxeles
border-style: Cambia el borde de sólido a discontinuo
border-color: Cambia el color del borde a verde
border-radius: Agrega esquinas redondeadas con una curva de 10 píxeles

También puede usar la propiedad abreviada border con todos los valores:

p {
  border: 4px dashed green;
}

Salida de ejemplo:
Cuando abra el archivo HTML, verá un párrafo con:

Un borde de 4 píxeles de grosor
Estilo de línea discontinua
Color verde
Esquinas redondeadas

Para demostrar más flexibilidad, pruebe estas variaciones adicionales:

p {
  /* Diferentes estilos de borde */
  border-top: 3px dotted red;
  border-bottom: 3px double blue;
  border-left: 3px groove purple;
  border-right: 3px ridge orange;
}

Aplicar relleno al párrafo

En este paso, aprenderá sobre el relleno, una propiedad de CSS que crea espacio entre el contenido de un elemento y su borde. El relleno ayuda a mejorar la legibilidad y el espaciado visual de los elementos.

Actualice la sección <style> en su archivo styles.html con el siguiente CSS:

<style>
  p {
    border: 4px dashed green;
    border-radius: 10px;
    padding: 20px;
  }
</style>

Explore diferentes maneras de aplicar relleno:

Relleno uniforme (todos los lados):

padding: 20px; /* 20px de relleno en todos los lados */

Relleno individual de lado:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Abreviatura con valores diferentes:

padding: 10px 20px 15px 25px;
/* Arriba: 10px, Derecha: 20px, Abajo: 15px, Izquierda: 25px */

Relleno horizontal y vertical:

padding: 15px 30px;
/* Arriba/Abajo: 15px, Izquierda/Derecha: 30px */

Salida de ejemplo:
Cuando abra el archivo HTML, verá el párrafo con:

Un borde discontinuo verde
Esquinas redondeadas
20 píxeles de relleno en todos los lados, creando espacio entre el texto y el borde

Visualización del relleno:

+---------------------------+
|                           |
|    [20px de relleno]       |
|    Welcome to CSS         |
|    Styling!               |
|    [20px de relleno]       |
|                           |
+---------------------------+

Experimentar con combinaciones de borde y relleno

En este último paso, explorará maneras creativas de combinar las propiedades de borde y relleno para crear diseños visualmente interesantes. Agregaremos múltiples párrafos para demostrar diferentes técnicas de estilo.

Actualice su archivo styles.html con el siguiente HTML y CSS:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Border and Padding Combinations</title>
    <style>
      .box1 {
        border: 3px solid purple;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 10px;
      }

      .box2 {
        border: 2px dashed orange;
        padding: 10px 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
      }

      .box3 {
        border: 4px double green;
        padding: 25px;
        border-radius: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p>First paragraph with purple solid border and 15px padding</p>
    </div>
    <div class="box2">
      <p>Second paragraph with orange dashed border and asymmetric radius</p>
    </div>
    <div class="box3">
      <p>Third paragraph with green double border and centered text</p>
    </div>
  </body>
</html>

Técnicas principales demostradas:

Diferentes estilos de borde (sólido, discontinuo, doble)
Configuraciones variadas de relleno
Radio de borde asimétrico
Márgenes para el espaciado entre elementos
Alineación de texto dentro de los elementos con relleno

Salida de ejemplo:
Cuando abra el archivo HTML, verá tres párrafos con combinaciones únicas de borde y relleno:

Borde sólido violeta con relleno uniforme
Borde discontinuo naranja con esquinas redondeadas asimétricas
Borde doble verde con relleno adicional y texto centrado

Visualización de las combinaciones:

+--- Box 1 ---+   +--- Box 2 ---+   +--- Box 3 ---+
|  Purple     |   |  Orange     |   |  Green      |
|  Solid      |   |  Dashed     |   |  Double     |
|  Border     |   |  Border     |   |  Border     |
+-------------+   +-------------+   +-------------+

Resumen

En este laboratorio, los participantes aprendieron a dar estilo a los elementos web utilizando bordes y relleno en CSS. El laboratorio comenzó creando una estructura básica de documento HTML5, lo que demostró la configuración fundamental para el estilo de páginas web. Los participantes exploraron cómo agregar estilos de borde a los párrafos, incluyendo la personalización de propiedades de borde como el ancho, el color y el estilo.

El laboratorio guió a los aprendices a través de técnicas prácticas de CSS, incluyendo la aplicación de bordes sólidos, la experimentación con diferentes configuraciones de borde y la comprensión de cómo el relleno puede modificar el espaciado y la apariencia de los elementos. Al trabajar a través de ejemplos prácticos, los participantes adquirieron habilidades prácticas en el uso de CSS para mejorar la presentación visual de los elementos de una página web, aprendiendo cómo crear diseños web más atractivos visualmente y estructurados.