1- Aquí tienes la documentación línea por línea del CSS:card

 Aquí tienes la documentación línea por línea del CSS:

css
/* Selector universal - aplica a TODOS los elementos de la página */
* {
    padding: 0;     /* Elimina cualquier relleno interno por defecto */
    margin: 0;      /* Elimina cualquier margen externo por defecto */
}

/* Estilos para el elemento <body> */
body {
    background-color: #f0f0f0;  /* Color de fondo gris claro para toda la página */
}

/* Clase para el contenedor principal */
.contenido1 {
    padding-top: 10px;           /* Espacio de 10px solo en la parte superior */
    border: 1px solid red;       /* Borde rojo de 1px (útil para debugging/ver el contenedor) */
    display: flex;               /* Activa Flexbox en este contenedor */
    justify-content: center;     /* Centra horizontalmente los elementos hijos (la tarjeta) */
}

/* Clase para la tarjeta principal */
.card {
    border: 5px solid green;     /* Borde verde de 5px (para visualizar los límites de la tarjeta) */
    background-color: white;     /* Fondo blanco para la tarjeta */
    display: flex;               /* Activa Flexbox para organizar header, body y footer */
    flex-direction: column;      /* Organiza los hijos en columna (verticalmente) */
    width: 500px;                /* Ancho fijo de 500 píxeles */
    border-radius: 8px;          /* Esquinas redondeadas de 8px */
}

/* Clase para el encabezado de la tarjeta */
.card-header {
    background-color: #f8f9fa;        /* Color gris muy claro de fondo */
    border-bottom: 1px solid #dee2e6; /* Línea divisoria gris en la parte inferior */
}

/* Estilo específico para los H1 dentro del header */
.card-header h1 {
    text-align: center;          /* Centra el texto "Sotelo" horizontalmente */
}

/* Clase para el cuerpo de la tarjeta */
.card-body {
    padding: 20px 20px 0 20px;   /* Padding: superior 20px, derecho 20px, inferior 0, izquierdo 20px */
}

/* Estilo específico para los párrafos dentro del cuerpo */
.card-body p {
    text-align: center;          /* Centra el texto del párrafo horizontalmente */
}

/* Estilo específico para los H2 dentro del cuerpo */
.card-body h2 {
    text-align: center;          /* Centra el título "Special title treatment" horizontalmente */
}

/* Clase para el pie de la tarjeta */
.card-footer {
    padding: 20px 20px 0 20px;   /* Padding: superior 20px, derecho 20px, inferior 0, izquierdo 20px */
}

Resumen de lo que logra este CSS:

  1. Reset inicial (*): Elimina márgenes y paddings por defecto

  2. Contenedor (.contenido1): Actúa como flexbox para centrar la tarjeta

  3. Tarjeta (.card): Contenedor flex en columna con ancho fijo

  4. Header: Fondo gris con borde inferior

  5. Body: Padding de 20px a todos lados excepto abajo

  6. Footer: Mismo padding que el body

  7. Textos centrados: Títulos y párrafos centrados horizontalmente

Los bordes rojo y verde son especialmente útiles durante el desarrollo para visualizar los contenedores, luego podrías quitarlos o cambiarlos a border: none.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más