Guía complementaria Clase 5

CSS: colores, tipografías, box model, márgenes, bordes y espaciado

Introducción

En esta clase empezamos a trabajar CSS desde una mirada más visual y práctica. Ya no alcanza con saber escribir una regla CSS o conectar una hoja de estilos con un archivo HTML. Ahora empezamos a usar CSS para resolver problemas concretos de presentación.

Una página web puede tener una estructura HTML correcta y aun así verse desordenada, difícil de leer o poco profesional. Eso ocurre porque HTML define principalmente la estructura del contenido, pero CSS define cómo se presenta ese contenido en pantalla.

En esta guía vamos a profundizar los temas trabajados en clase:

colores;
tipografías;
tamaños de texto;
interlineado;
alineación;
box model;
width y height;
padding;
margin;
border;
border-radius;
box-sizing;
transformación de HTML crudo en una tarjeta visual.

La idea principal es que empiecen a mirar cada elemento HTML como una caja que puede tener tamaño, color, fondo, borde, espacio interno y espacio externo.

1. Repaso: ¿qué hace CSS?

CSS significa Cascading Style Sheets, es decir, hojas de estilo en cascada.

CSS permite modificar la apariencia visual de los elementos HTML. Por ejemplo, podemos cambiar:

el color del texto;
el color de fondo;
el tamaño de la letra;
la tipografía;
el espacio entre elementos;
los bordes;
el ancho y alto de los bloques;
la forma de los botones;
la distribución visual de una página.

Ejemplo simple:

<h1>Hola mundo</h1>
<p>Estoy aprendiendo CSS.</p>

Sin CSS, el navegador muestra esos elementos con estilos por defecto.

Con CSS:

h1 {
  color: blue;
  font-size: 36px;
}

p {
  color: gray;
  font-size: 18px;
}

El contenido sigue siendo el mismo, pero la presentación cambia.

2. Estructura básica de una regla CSS

Una regla CSS tiene esta forma:

selector {
  propiedad: valor;
}

Ejemplo:

p {
  color: red;
}

En este caso:

p es el selector;
color es la propiedad;
red es el valor;
la regla completa significa: “todos los párrafos van a tener texto rojo”.

Otro ejemplo:

h1 {
  font-size: 40px;
  color: #1e40af;
}

Acá le indicamos al navegador que todos los h1 tengan un tamaño de fuente de 40px y un color azul específico.

3. CSS no es solo decoración

Un error bastante común es pensar que CSS sirve solamente para “hacer linda” una página. Esa mirada es incompleta.

CSS también sirve para mejorar:

la lectura;
la jerarquía visual;
la separación entre contenidos;
la comprensión de la información;
la experiencia del usuario;
la accesibilidad;
la prolijidad general del sitio.

Por ejemplo, esta estructura HTML es correcta:

<h1>Curso de Front-End</h1>
<p>Aprendé HTML, CSS y JavaScript desde cero.</p>
<a href="#">Inscribirme</a>

Pero visualmente puede quedar pobre si no tiene estilos.

Con CSS podemos mejorarla:

h1 {
  color: #1e3a8a;
  font-size: 36px;
}

p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

a {
  display: inline-block;
  padding: 12px 20px;
  background-color: #1e3a8a;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}

El HTML sigue siendo simple, pero ahora se ve más claro y ordenado.

4. Colores en CSS

Los colores son una de las primeras propiedades que se suelen aprender en CSS. Sirven para modificar texto, fondos, bordes, botones, enlaces y otros elementos visuales.

Las propiedades más comunes son:

color
background-color
border-color

4.1. Color del texto

La propiedad color cambia el color del texto.

h1 {
  color: blue;
}

Ejemplo completo:

<h1>Bienvenidos</h1>
<p>Esta es mi primera página con estilos.</p>

h1 {
  color: blue;
}

p {
  color: gray;
}

Resultado esperado:

el título se ve azul;
el párrafo se ve gris.

4.2. Color de fondo

La propiedad background-color cambia el fondo de un elemento.

body {
  background-color: #f3f4f6;
}

También se puede aplicar a una sección:

section {
  background-color: white;
}

Ejemplo:

<section>
  <h2>Sobre mí</h2>
  <p>Estoy aprendiendo desarrollo web.</p>
</section>

section {
  background-color: #ffffff;
}

4.3. Color de borde

La propiedad border-color define el color del borde, aunque muchas veces se usa junto con border.

.card {
  border: 1px solid #d1d5db;
}

Esto significa:

borde de 1px;
estilo solid;
color #d1d5db.

5. Formas de escribir colores

CSS permite escribir colores de distintas maneras.

5.1. Colores por nombre

Ejemplo:

h1 {
  color: red;
}

Otros valores posibles:

color: blue;
color: green;
color: black;
color: white;
color: gray;

Son fáciles de recordar, pero tienen una limitación: son poco precisos.

En diseño web real, normalmente se usan colores más específicos.

5.2. Colores HEX

El formato HEX usa números y letras.

h1 {
  color: #1e40af;
}

Ejemplos básicos:

#000000 /* negro */
#ffffff /* blanco */
#ff0000 /* rojo */
#00ff00 /* verde */
#0000ff /* azul */

El formato HEX es muy común porque permite trabajar con colores precisos.

Ejemplo:

body {
  background-color: #f3f4f6;
}

h1 {
  color: #1e40af;
}

p {
  color: #4b5563;
}

5.3. RGB

RGB significa:

Red;
Green;
Blue.

Ejemplo:

p {
  color: rgb(40, 40, 40);
}

Cada número va de 0 a 255.

Ejemplo:

color: rgb(255, 0, 0);

Eso genera rojo, porque hay máximo rojo y nada de verde ni azul.

5.4. RGBA

RGBA es parecido a RGB, pero agrega transparencia.

background-color: rgba(0, 0, 0, 0.5);

El último valor representa la opacidad:

1 significa totalmente opaco;
0.5 significa 50% transparente;
0 significa totalmente transparente.

Ejemplo:

.caja {
  background-color: rgba(30, 64, 175, 0.15);
}

Esto crea un fondo azul suave, con transparencia.

6. Contraste y legibilidad

No alcanza con elegir colores que “queden lindos”. El texto tiene que leerse bien.

Mal ejemplo:

p {
  color: #cccccc;
  background-color: #ffffff;
}

El texto gris claro sobre fondo blanco tiene poco contraste. Puede verse estético, pero se lee mal.

Mejor ejemplo:

p {
  color: #333333;
  background-color: #ffffff;
}

Regla práctica:

El texto importante debe poder leerse sin esfuerzo.

Especialmente en títulos, botones, formularios y textos principales.

7. Jerarquía visual con colores

Los colores también ayudan a ordenar la información.

Ejemplo:

h1 {
  color: #111827;
}

h2 {
  color: #1e40af;
}

p {
  color: #4b5563;
}

.destacado {
  color: #dc2626;
}

Esto permite distinguir:

título principal;
subtítulos;
texto normal;
mensajes destacados.

No conviene usar demasiados colores distintos. Si todo tiene un color fuerte, nada se destaca realmente.

8. Tipografías en CSS

La tipografía define cómo se ve el texto.

La propiedad principal es:

font-family

Ejemplo:

body {
  font-family: Arial, sans-serif;
}

Esto indica que el sitio va a usar Arial. Si Arial no está disponible, el navegador usará una fuente genérica sin serif.

8.1. Familias tipográficas

Existen varias familias generales.

Serif

font-family: Georgia, serif;

Son letras con pequeños remates. Se usan mucho en libros, diarios o textos editoriales.

Sans-serif

font-family: Arial, sans-serif;

Son letras sin remates. Se usan mucho en interfaces digitales porque suelen verse limpias y modernas.

Monospace

font-family: "Courier New", monospace;

Cada letra ocupa el mismo ancho. Se usa mucho para código.

Ejemplo:

code {
  font-family: "Courier New", monospace;
}

9. Tamaño de fuente

La propiedad font-size modifica el tamaño del texto.

h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
}

Una buena página no usa el mismo tamaño para todo. Tiene jerarquía.

Ejemplo:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 28px;
}

p {
  font-size: 18px;
}

small {
  font-size: 14px;
}

Esto ayuda a que el usuario entienda qué información es más importante.

10. Unidades de tamaño

En CSS existen varias unidades.

10.1. Pixeles

font-size: 16px;

px es una unidad fácil de entender. Para empezar, es muy práctica.

10.2. REM

font-size: 1rem;

rem toma como referencia el tamaño base del documento.

Ejemplo:

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

Si 1rem equivale a 16px, entonces 2rem equivale a 32px.

11. Peso de la fuente

La propiedad font-weight controla el grosor del texto.

h1 {
  font-weight: 700;
}

Valores frecuentes:

font-weight: normal;
font-weight: bold;
font-weight: 300;
font-weight: 400;
font-weight: 700;

Ejemplo:

h1 {
  font-weight: 700;
}

p {
  font-weight: 400;
}

.destacado {
  font-weight: bold;
}

Cuidado: no conviene poner todo en negrita. Si todo está destacado, nada está realmente destacado.

12. Estilo de texto

La propiedad font-style permite aplicar itálica.

em {
  font-style: italic;
}

También se puede aplicar a una clase:

.frase {
  font-style: italic;
}

Ejemplo:

<p class="frase">Esta frase aparece en cursiva.</p>

.frase {
  font-style: italic;
}

13. Interlineado

La propiedad line-height controla el espacio vertical entre líneas.

p {
  line-height: 1.6;
}

Esto es muy importante para textos largos.

Mal ejemplo:

p {
  line-height: 1;
}

El texto queda apretado.

Mejor ejemplo:

p {
  line-height: 1.6;
}

El texto respira más y se lee mejor.

Ejemplo completo:

<p>
  CSS permite modificar la presentación visual de una página web.
  Con buenas decisiones de tamaño, color y espaciado, una página puede
  ser mucho más clara y fácil de leer.
</p>

p {
  font-size: 18px;
  line-height: 1.6;
  color: #4b5563;
}

14. Alineación de texto

La propiedad text-align controla la alineación horizontal del texto.

h1 {
  text-align: center;
}

Valores comunes:

text-align: left;
text-align: center;
text-align: right;
text-align: justify;

Para títulos breves, el centrado puede funcionar bien.

Para textos largos, normalmente conviene usar alineación izquierda:

p {
  text-align: left;
}

Un error común es centrar párrafos largos. Puede quedar visualmente atractivo al principio, pero suele dificultar la lectura.

15. Decoración del texto

La propiedad text-decoration se usa mucho con enlaces.

Por defecto, los enlaces suelen aparecer subrayados.

a {
  text-decoration: none;
}

Esto quita el subrayado.

Pero cuidado: si quitamos el subrayado, el enlace debe seguir pareciendo clickeable.

Ejemplo:

a {
  color: #1e40af;
  text-decoration: none;
  font-weight: bold;
}

También podemos convertir un enlace en algo parecido a un botón:

a {
  display: inline-block;
  padding: 12px 20px;
  background-color: #1e40af;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}

16. Transformación de texto

La propiedad text-transform permite modificar cómo se muestra el texto.

h2 {
  text-transform: uppercase;
}

Valores comunes:

uppercase
lowercase
capitalize
none

Ejemplo:

.categoria {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
}

Esto puede servir para pequeñas etiquetas o categorías visuales.

17. Espaciado entre letras

La propiedad letter-spacing modifica la distancia entre letras.

h1 {
  letter-spacing: 1px;
}

Ejemplo:

.etiqueta {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: #1e40af;
}

Conviene usarla con moderación. Mucho espaciado entre letras puede dificultar la lectura.

18. El problema del espacio en diseño web

Muchas páginas hechas por principiantes no se ven mal por el contenido, sino por el espacio.

Errores comunes:

elementos pegados entre sí;
textos demasiado cerca del borde;
botones muy chicos;
títulos sin separación;
formularios apretados;
tarjetas sin margen;
bloques sin respiración visual.

CSS permite resolver esto con dos propiedades fundamentales:

padding
margin

Pero para entenderlas bien primero necesitamos entender el box model.

19. Box model

En CSS, cada elemento HTML se puede pensar como una caja.

Un h1 es una caja.
Un p es una caja.
Un a es una caja.
Un section es una caja.
Un div es una caja.
Una imagen también ocupa una caja.

El modelo de caja tiene cuatro partes:

Margin
  Border
    Padding
      Content

O sea:

Content: el contenido real.
Padding: espacio interno.
Border: borde de la caja.
Margin: espacio externo.

20. Content

El content es el contenido del elemento.

Ejemplo:

<p>Estoy aprendiendo CSS.</p>

El contenido es:

Estoy aprendiendo CSS.

Otro ejemplo:

<a href="#">Ver más</a>

El contenido es:

Ver más

En una imagen:

<img src="foto.jpg" alt="Foto de perfil">

El contenido visual es la imagen.

21. Width y height

Las propiedades width y height controlan el ancho y el alto.

.card {
  width: 400px;
  height: 200px;
}

Pero hay que tener cuidado con height.

Si fijamos una altura y el contenido crece, puede desbordarse.

Ejemplo problemático:

.card {
  width: 400px;
  height: 100px;
}

Si el texto es largo, puede quedar fuera de la caja.

Muchas veces conviene definir solo el ancho:

.card {
  width: 400px;
}

Y dejar que el alto se adapte al contenido.

22. Padding

El padding es el espacio interno de la caja.

Ejemplo:

.card {
  padding: 20px;
}

Esto genera espacio entre el contenido y el borde de la caja.

HTML:

<section class="card">
  <h2>Curso de Front-End</h2>
  <p>Aprendé HTML, CSS y JavaScript.</p>
</section>

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
}

Resultado conceptual:

Borde de la caja
  Espacio interno
    Título y párrafo

Sin padding, el texto queda pegado al borde.
Con padding, el contenido respira.

23. Padding por lados

Podemos aplicar padding a todos los lados:

.card {
  padding: 20px;
}

También podemos aplicarlo por lado:

.card {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

O usar la forma abreviada:

.card {
  padding: 20px 30px;
}

Esto significa:

20px arriba y abajo;
30px izquierda y derecha.

También existe esta forma:

.card {
  padding: 10px 20px 30px 40px;
}

El orden es:

arriba derecha abajo izquierda

24. Margin

El margin es el espacio externo de la caja.

Ejemplo:

.card {
  margin: 30px;
}

Sirve para separar un elemento de otros elementos.

HTML:

<section class="card">
  <h2>Tarjeta</h2>
  <p>Contenido de la tarjeta.</p>
</section>

<section class="card">
  <h2>Otra tarjeta</h2>
  <p>Otro contenido.</p>
</section>

CSS:

.card {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}

El margin separa una tarjeta de la otra.

25. Margin por lados

Igual que con padding, podemos definir margin por lado.

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 10px;
}

Forma abreviada:

.box {
  margin: 20px 10px 30px 10px;
}

Orden:

arriba derecha abajo izquierda

Otra forma común:

.box {
  margin: 20px 0;
}

Esto significa:

20px arriba y abajo;
0 izquierda y derecha.

26. Centrar una caja con margin auto

Una técnica muy usada es centrar un bloque horizontalmente.

.card {
  width: 400px;
  margin: 0 auto;
}

Esto funciona si el elemento tiene un ancho definido.

Ejemplo:

.presentacion {
  width: 400px;
  margin: 60px auto;
}

Significa:

60px arriba y abajo;
automático a izquierda y derecha.

El navegador reparte el espacio sobrante a ambos lados y la caja queda centrada.

27. Diferencia entre padding y margin

Esta diferencia es fundamental.

.card {
  padding: 20px;
  margin: 30px;
}

Padding

Es espacio hacia adentro.

Sirve para separar el contenido del borde.

Margin

Es espacio hacia afuera.

Sirve para separar un elemento de otros elementos.

Ejemplo práctico:

Si el texto está pegado al borde de la tarjeta, falta padding.

Si la tarjeta está pegada a otra tarjeta o al borde de la pantalla, falta margin.

28. Border

La propiedad border permite agregar borde a un elemento.

.card {
  border: 1px solid #d1d5db;
}

Tiene tres partes:

border: grosor estilo color;

Ejemplos:

border: 1px solid black;
border: 2px dashed gray;
border: 3px dotted blue;

Los estilos más comunes son:

solid;
dashed;
dotted;
none.

29. Bordes por lado

También podemos aplicar borde solamente a un lado.

.alerta {
  border-left: 5px solid red;
}

Ejemplo completo:

<div class="alerta">
  Recordá entregar la actividad antes de la próxima clase.
</div>

.alerta {
  padding: 16px;
  background-color: #fee2e2;
  border-left: 5px solid #dc2626;
}

Esto genera una caja de alerta con una línea roja a la izquierda.

30. Border radius

La propiedad border-radius redondea las esquinas.

.card {
  border-radius: 16px;
}

Ejemplo:

button {
  border-radius: 8px;
}

Para una imagen circular:

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

Cuanto mayor sea el valor, más redondeadas serán las esquinas.

31. Box sizing

Por defecto, CSS puede calcular los tamaños de una manera que al principio resulta confusa.

Ejemplo:

.card {
  width: 400px;
  padding: 20px;
  border: 2px solid black;
}

Uno podría pensar que la caja mide 400px de ancho. Pero en el modelo por defecto, el padding y el border pueden sumarse al ancho total.

Para evitar confusiones, se suele usar:

* {
  box-sizing: border-box;
}

Esto hace que el ancho declarado incluya el contenido, el padding y el borde.

Es una práctica muy recomendable.

32. Reset básico recomendado

Muchas veces conviene empezar el CSS con una base simple:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

¿Qué hace esto?

* {
  box-sizing: border-box;
}

Hace más predecible el tamaño de todos los elementos.

body {
  margin: 0;
}

Quita el margen por defecto que agrega el navegador.

font-family: Arial, sans-serif;

Define una tipografía general para toda la página.

background-color: #f3f4f6;

Agrega un fondo gris claro.

color: #111827;

Define el color general del texto.

33. Ejemplo completo: tarjeta de presentación

Partimos de este HTML:

<section class="presentacion">
  <h1>Hola, soy Eduardo</h1>

  <p>
    Soy estudiante de Desarrollo de Sistemas Web. Estoy aprendiendo a crear páginas
    con HTML y CSS, y en esta actividad transformé un bloque simple en una tarjeta visual.
  </p>

  <a href="#">Ver mi trabajo</a>
</section>

Ahora aplicamos CSS.

.presentacion {
  width: 400px;
  margin: 60px auto;
  padding: 30px;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  text-align: center;
}

¿Qué hace cada propiedad?

width: 400px;

Define el ancho de la tarjeta.

margin: 60px auto;

Separa la tarjeta desde arriba y la centra horizontalmente.

padding: 30px;

Agrega espacio interno.

background-color: white;

Hace que la tarjeta tenga fondo blanco.

border: 1px solid #d1d5db;

Agrega un borde gris claro.

border-radius: 16px;

Redondea las esquinas.

text-align: center;

Centra el contenido textual dentro de la tarjeta.

34. Mejorando el título

CSS:

.presentacion h1 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #1e40af;
  font-size: 32px;
}

Explicación:

margin-top: 0;

Quita el espacio superior del título, para que no empuje innecesariamente dentro de la tarjeta.

margin-bottom: 16px;

Separa el título del párrafo.

color: #1e40af;

Le da un color azul al título.

font-size: 32px;

Aumenta el tamaño del título.

35. Mejorando el párrafo

CSS:

.presentacion p {
  margin-bottom: 24px;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.6;
}

Explicación:

margin-bottom: 24px;

Separa el párrafo del enlace.

color: #4b5563;

Usa un gris oscuro, más suave que el negro puro.

font-size: 17px;

Define un tamaño cómodo de lectura.

line-height: 1.6;

Mejora el espacio entre líneas.

36. Mejorando el enlace

HTML:

<a href="#">Ver mi trabajo</a>

Por defecto, un enlace se ve como texto azul subrayado.

Con CSS podemos convertirlo visualmente en un botón:

.presentacion a {
  display: inline-block;
  padding: 12px 20px;
  background-color: #1e40af;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

Explicación:

display: inline-block;

Permite que el enlace acepte mejor padding y se comporte como una caja.

padding: 12px 20px;

Agrega espacio interno al botón.

background-color: #1e40af;

Define el fondo azul.

color: white;

Define texto blanco.

border-radius: 8px;

Redondea las esquinas.

text-decoration: none;

Quita el subrayado.

font-weight: bold;

Hace que el texto se vea más fuerte.

37. Hover en enlaces

Podemos cambiar el estilo cuando el usuario pasa el mouse por encima.

.presentacion a:hover {
  background-color: #1d4ed8;
}

Esto significa: cuando el enlace esté en estado hover, cambia el fondo.

El hover ayuda a que el usuario perciba que el elemento es interactivo.

38. Código completo del ejemplo resuelto

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tarjeta de presentación</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f3f4f6;
      color: #111827;
    }

    .presentacion {
      width: 400px;
      margin: 60px auto;
      padding: 30px;
      background-color: white;
      border: 1px solid #d1d5db;
      border-radius: 16px;
      text-align: center;
    }

    .presentacion h1 {
      margin-top: 0;
      margin-bottom: 16px;
      color: #1e40af;
      font-size: 32px;
    }

    .presentacion p {
      margin-bottom: 24px;
      color: #4b5563;
      font-size: 17px;
      line-height: 1.6;
    }

    .presentacion a {
      display: inline-block;
      padding: 12px 20px;
      background-color: #1e40af;
      color: white;
      border-radius: 8px;
      text-decoration: none;
      font-weight: bold;
    }

    .presentacion a:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>

  <section class="presentacion">
    <h1>Hola, soy Eduardo</h1>

    <p>
      Soy estudiante de Desarrollo de Sistemas Web. Estoy aprendiendo a crear páginas
      con HTML y CSS, y en esta actividad transformé un bloque simple en una tarjeta visual.
    </p>

    <a href="#">Ver mi trabajo</a>
  </section>

</body>
</html>

39. ¿Por qué usamos una clase?

En el ejemplo usamos:

<section class="presentacion">

Y después en CSS:

.presentacion {
  ...
}

Esto permite aplicar estilos solamente a esa sección.

Si escribiéramos:

section {
  ...
}

estaríamos aplicando esos estilos a todas las secciones de la página.

Usar clases permite tener más control.

Ejemplo:

<section class="presentacion">
  ...
</section>

<section class="noticias">
  ...
</section>

CSS:

.presentacion {
  background-color: white;
}

.noticias {
  background-color: #eef2ff;
}

Cada sección puede tener estilos diferentes.

40. Buenas prácticas con nombres de clases

Los nombres de clase deberían ser claros.

Malos ejemplos:

<section class="caja1">
<section class="azul">
<section class="cosita">

Mejores ejemplos:

<section class="presentacion">
<section class="tarjeta">
<section class="perfil">
<section class="contenido-principal">

Un buen nombre de clase ayuda a entender para qué sirve ese bloque.

41. Errores comunes en esta etapa

Error 1: olvidar el punto en la clase

HTML:

<section class="presentacion">

CSS incorrecto:

presentacion {
  background-color: white;
}

CSS correcto:

.presentacion {
  background-color: white;
}

Cuando seleccionamos una clase en CSS, usamos punto.

Error 2: confundir margin y padding

CSS:

.card {
  padding: 20px;
  margin: 30px;
}

Recordatorio:

padding: espacio interno;
margin: espacio externo.

Error 3: poner colores con poco contraste

Mal:

p {
  color: #dddddd;
  background-color: #ffffff;
}

Mejor:

p {
  color: #4b5563;
  background-color: #ffffff;
}

Error 4: no cerrar llaves

Incorrecto:

.card {
  padding: 20px;
  background-color: white;

Correcto:

.card {
  padding: 20px;
  background-color: white;
}

Error 5: olvidar punto y coma

Incorrecto:

.card {
  padding: 20px
  background-color: white;
}

Correcto:

.card {
  padding: 20px;
  background-color: white;
}

42. Cómo pensar una tarjeta visual

Para construir una tarjeta, podemos pensar en capas.

Primero, el contenedor:

.presentacion {
  width: 400px;
  margin: 60px auto;
  padding: 30px;
}

Después, la apariencia:

.presentacion {
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 16px;
}

Después, el texto:

.presentacion h1 {
  color: #1e40af;
  font-size: 32px;
}

.presentacion p {
  color: #4b5563;
  line-height: 1.6;
}

Finalmente, el botón:

.presentacion a {
  display: inline-block;
  padding: 12px 20px;
  background-color: #1e40af;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}

Este orden ayuda a trabajar de manera más clara.

43. Mini ejercicio guiado

Partir de este HTML:

<section class="perfil">
  <h1>Hola, soy Martina</h1>
  <p>Estoy aprendiendo a diseñar páginas web con HTML y CSS.</p>
  <a href="#">Contactarme</a>
</section>

Resolver:

Darle ancho a la tarjeta.
Centrarla en la pantalla.
Agregar padding.
Agregar fondo blanco.
Agregar borde.
Redondear esquinas.
Mejorar el título.
Mejorar el párrafo.
Convertir el enlace en botón.

Posible solución:

.perfil {
  width: 420px;
  margin: 50px auto;
  padding: 28px;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  text-align: center;
}

.perfil h1 {
  color: #0f172a;
  font-size: 30px;
}

.perfil p {
  color: #475569;
  font-size: 17px;
  line-height: 1.6;
}

.perfil a {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 18px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

44. Actividad sugerida

Transformar un bloque HTML crudo en una presentación visual.

HTML inicial

<section>
  <h1>Hola, soy Eduardo</h1>

  <p>
    Soy estudiante de Desarrollo de Sistemas Web. Estoy aprendiendo HTML y CSS.
  </p>

  <a href="#">Ver mi trabajo</a>
</section>

Tareas

Agregar una clase a la sección principal.
Aplicar width, margin y padding.
Agregar color de fondo.
Agregar borde.
Agregar border-radius.
Mejorar el título.
Mejorar el párrafo.
Convertir el enlace en botón.

45. Criterios de revisión

Al revisar el trabajo, conviene observar:

si la estructura HTML se mantiene clara;
si se usó una clase correctamente;
si el CSS está bien escrito;
si se aplicó width;
si se aplicó margin;
si se aplicó padding;
si hay color de fondo;
si hay borde;
si se usó border-radius;
si el texto se lee bien;
si el enlace parece una acción clickeable;
si no hay errores de sintaxis.

No se busca una tarjeta perfecta. Se busca que puedan explicar qué hace cada propiedad.

46. Checklist para el alumno

Antes de entregar o mostrar el trabajo, revisar:

¿La sección tiene una clase?
¿El CSS usa el punto para seleccionar la clase?
¿La tarjeta tiene ancho definido?
¿La tarjeta está centrada?
¿Tiene padding?
¿Tiene margen?
¿Tiene color de fondo?
¿Tiene borde?
¿Tiene bordes redondeados?
¿El título se diferencia del párrafo?
¿El párrafo se lee bien?
¿El enlace parece botón?
¿El código está prolijo?

47. Conclusión

En esta clase empezamos a transformar HTML simple en componentes visuales más claros.

Los conceptos centrales fueron:

los colores ayudan a comunicar jerarquía;
las tipografías mejoran la lectura;
el tamaño de texto organiza la información;
el interlineado hace más cómoda la lectura;
el box model explica cómo ocupa espacio cada elemento;
el padding separa hacia adentro;
el margin separa hacia afuera;
el border delimita una caja;
el border-radius suaviza la forma;
el box-sizing ayuda a controlar mejor los tamaños.

La idea más importante es esta:

En CSS, cada elemento puede pensarse como una caja. Si entendemos esa caja, podemos controlar mejor el diseño de una página.

Última modificación: jueves, 7 de mayo de 2026, 18:37