Introducción a CSS: Una Guía Completa

El Cascading Style Sheets (CSS) es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML o XML. CSS se utiliza para definir estilos visuales, como colores, fuentes y distribución de elementos en una página web, permitiendo así una separación entre el contenido y la presentación.

Historia de CSS

CSS fue propuesto por primera vez por Håkon Wium Lie en 1994 mientras trabajaba con Tim Berners-Lee en el CERN. La primera versión de CSS, conocida como CSS1, fue publicada en diciembre de 1996. Desde entonces, CSS ha evolucionado significativamente, con CSS2 publicado en 1998 y CSS3 dividido en varios módulos que se desarrollaron a lo largo de los años 2000 y 2010.

Sintaxis Básica de CSS

Un archivo CSS está compuesto por reglas. Cada regla tiene un selector y una declaración. El selector apunta al elemento HTML que se desea estilizar, y la declaración contiene una o más propiedades y valores.

Ejemplo de Sintaxis CSS

/* Esto es un comentario en CSS */
selector {
  propiedad: valor;
  propiedad: valor;
}

Ejemplo Práctico

body {
  background-color: #f0f0f0;
  color: #333333;
  font-family: Arial, sans-serif;
}

h1 {
  color: #0056b3;
  text-align: center;
}

p {
  line-height: 1.6;
  margin-bottom: 10px;
}

Selectores en CSS

Los selectores son una parte fundamental de CSS. Permiten apuntar a elementos HTML específicos para aplicarles estilos. Algunos de los selectores más comunes son:

• Selector de tipo: Selecciona todos los elementos de un tipo específico, como p o h1.
• Selector de clase: Selecciona elementos con una clase específica usando un punto (.) seguido del nombre de la clase. Ejemplo: .clase.
• Selector de ID: Selecciona un elemento con un ID específico usando una almohadilla (#) seguida del nombre del ID. Ejemplo: #id.
• Selector de atributo: Selecciona elementos con un atributo específico. Ejemplo: [type="text"].
• Selectores combinados: Permiten seleccionar elementos basados en una combinación de condiciones. Ejemplo: div p selecciona todos los p dentro de div.

Ejemplo de Selectores

/* Selector de tipo */
h2 {
  color: #ff6347;
}

/* Selector de clase */
.introduccion {
  font-style: italic;
}

/* Selector de ID */
#titulo-principal {
  font-size: 2em;
}

/* Selector de atributo */
input[type="text"] {
  border: 1px solid #ccc;
}

/* Selectores combinados */
div p {
  margin-top: 10px;
}

Propiedades y Valores en CSS

Las propiedades en CSS definen aspectos específicos del estilo de un elemento, como el color, la fuente, el margen, el relleno, entre otros. Cada propiedad tiene uno o más valores que determinan cómo se aplicará el estilo.

Propiedades Comunes

• Color: Define el color del texto de un elemento. Ejemplo: color: #333;.
• Background-color: Define el color de fondo de un elemento. Ejemplo: background-color: #f0f0f0;.
• Font-family: Especifica la fuente del texto. Ejemplo: font-family: Arial, sans-serif;.
• Font-size: Define el tamaño de la fuente. Ejemplo: font-size: 16px;.
• Margin: Define el espacio exterior alrededor de un elemento. Ejemplo: margin: 20px;.
• Padding: Define el espacio interior dentro de un elemento. Ejemplo: padding: 10px;.

Ejemplo de Propiedades y Valores

h3 {
  color: #ff4500;
  font-size: 24px;
}

.container {
  background-color: #e0e0e0;
  padding: 20px;
  margin: 10px auto;
}

Modelo de Caja en CSS

El modelo de caja es un concepto fundamental en CSS que describe cómo se disponen y se dimensionan los elementos en una página web. Cada elemento de bloque se representa como una caja rectangular que consta de:

• Contenido: El área donde se muestra el contenido (texto, imágenes, etc.).
• Padding: El espacio entre el contenido y el borde.
• Borde: El borde que rodea el padding y el contenido.
• Margen: El espacio exterior entre el borde y otros elementos.

Visualización del Modelo de Caja

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #ccc;
  margin: 10px;
  background-color: #fafafa;
}

Diseño Responsivo

El diseño responsivo es una técnica que permite que una página web se adapte a diferentes tamaños de pantalla y dispositivos. Esto se logra mediante el uso de consultas de medios (media queries) y técnicas flexibles de diseño.

Consultas de Medios

Las consultas de medios permiten aplicar estilos específicos basados en las características del dispositivo, como el ancho de la pantalla.

/* Estilos para dispositivos con un ancho de pantalla menor o igual a 600px */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }

  h1 {
    font-size: 1.5em;
  }
}

CSS Grid y Flexbox

CSS Grid y Flexbox son dos sistemas de diseño poderosos y flexibles que permiten crear layouts complejos de manera sencilla.

Flexbox

Flexbox es un modelo de diseño unidimensional que facilita la distribución y alineación de elementos dentro de un contenedor flexible.

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  flex: 1;
  margin: 5px;
}

CSS Grid

CSS Grid es un modelo de diseño bidimensional que permite crear layouts complejos mediante una cuadrícula de filas y columnas.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

Conclusión

CSS es una herramienta esencial para cualquier desarrollador web. Permite diseñar páginas web visualmente atractivas y responsivas, separando el contenido de la presentación y proporcionando una mayor flexibilidad y control sobre el diseño. Con una comprensión sólida de CSS y sus capacidades, se pueden crear experiencias web impresionantes y accesibles para todos los usuarios.