Colores, fondos y bordes en CSS

Colores en CSS

En CSS, el color se puede aplicar al texto, fondos, bordes, entre otros elementos.

Propiedad color (texto)

p {
  color: red; /* Nombre del color */
}

Formas de definir colores

• Nombre: red, blue, green, etc.

• Hexadecimal: #ff0000, #00ff00, #0000ff, etc.

• RGB: rgb(255, 0, 0)

• RGBA (con transparencia): rgba(255, 0, 0, 0.5) el 0.5 parametro final es el que le da la transparencia al color.

• HSL: hsl(0, 100%, 50%)

• HSLA (con transparencia): hsla(0, 100%, 50%, 0.5)

Fondos en CSS

div {
  background-color: lightblue; /* Color de fondo */
}

Fondos con imágenes

div {
  background-image: url('fondo.jpg');
  background-repeat: no-repeat; /* Evita que se repita */
  background-size: cover; /* Cubre todo el elemento */
  background-position: center; /* Centra la imagen */
}

Bordes en CSS

Los bordes rodean el contenido y el padding.

Propiedad border

div {
  border: 2px solid black;
}

• Ancho: 1px, 2px, 5px, etc.

• Estilo:

  • solid (sólido)

  • dashed (guiones)

  • dotted (punteado)

  • double (doble línea)

  • none (sin borde)

• Color: red, #333, rgba(0,0,0,0.5)

Bordes redondeados

div {
  border-radius: 10px; /* Esquinas redondeadas */
}

border-radius: 50% → círculo perfecto si el elemento es cuadrado.

Bordes individuales

Podemos dar estilos distintos a cada lado:

div {
  border-top: 3px solid red;
  border-right: 2px dashed blue;
  border-bottom: 4px dotted green;
  border-left: 5px double black;
}

Ejemplo completo

<style>
  .caja {
    color: white;
    background-color: teal;
    border: 3px solid yellow;
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
    background-image: url('pattern.png');
    background-size: cover;
  }
</style>

<div class="caja">
  Caja con color, fondo e imagen
</div>

Tendrás este resultado:

Buenas prácticas

✔ Usa variables CSS para manejar paletas de colores:

:root {
  --color-primario: #3498db;
}
button {
  background-color: var(--color-primario);
}

✔ Mantén contraste alto entre el texto y el fondo para mejorar la accesibilidad.
✔ Comprime imágenes de fondo para mejorar el rendimiento.
✔ Evita usar demasiados colores sin una paleta definida.

Resumen

Con colores, fondos y bordes podes darle personalidad y jerarquía visual a tus elementos.
En el próximo artículo veremos Flexbox, una de las herramientas más poderosas para crear layouts responsivos y adaptables a cualquier dispositivo.