Guía de Estudio CSS

Conceptos de presentación, cascada y diseño responsivo.

1. Historia y Origen

Ante la falta de estándares a mediados de los 90, surgieron dos propuestas principales en la W3C:

  • CHSS (Cascading HTML Style Sheets): de Håkon Wium Lie.
  • SSP (Stream-based Style Sheet Proposal): de Bert Bos.
  • Hito: Lie y Bos se unieron y en 1996 se publicó "CSS nivel 1".
  • Actualidad: El estándar vigente es CSS 3.
2. Definición y Ventajas

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada).

  • Mantenimiento: Un solo cambio en un archivo .css afecta a todo el sitio.
  • Accesibilidad: Permite que navegadores o usuarios apliquen estilos locales.
  • Rendimiento: Reduce drásticamente el peso de los archivos HTML al extraer el diseño.
3. Reglas y Sintaxis

Una regla se compone de un selector y un bloque de declaraciones: 

selector {
  propiedad: valor;
}
  • Selector: Apunta al elemento HTML (ej. p).
  • Declaración: Todo lo contenido entre llaves {}.
  • Propiedad: El atributo visual (ej. color).
  • Valor: El dato asignado (ej. blue).
4. Tipos de Selectores
  • Universal *: Aplica a todos los elementos.
  • De tipo: Usa el nombre de la etiqueta (ej. h1).
  • Descendente (espacio): Elementos dentro de otros (ej. div p).
  • Hijo directo >: Solo al nivel inmediato (ej. ul > li).
  • Clase .clase: Reutilizable en varios elementos.
  • ID #identificador: Único por página, alta prioridad.

Tip: Se pueden agrupar con comas h1, h2 { color: red; }.

5. Métodos de Inserción y Prioridades

Orden de prioridad de menor (1) a mayor (3):

  1. Externa: Mediante la etiqueta <link>. Recomendado.
  2. Interna: Mediante <style> dentro del <head>.
  3. En línea: Atributo style="...". Gana sobre los demás.

Nota: Si dos reglas tienen la misma prioridad, se aplica la última escrita en el código.

6. Unidades de Medida

Relativas (Recomendadas):

  • em: Respecto al tamaño de letra actual.
  • ex: Respecto a la altura de la letra 'x'.
  • px: Respecto a la pantalla del usuario (píxel).
  • %: Porcentaje del contenedor padre.

Absolutas: Medidas físicas fijas (cm, mm, in, pt, pc).

7. El Modelo de Cajas (Box Model)
MARGEN
BORDE
PADDING (Relleno)
CONTENIDO
  • Width/Height: Definen las dimensiones del contenido.
  • Lados: -top, -right, -bottom, -left (orden horario).
8. Diseño Web Responsive

Regla de oro: Adaptar, no omitir información.

  • Viewport: Etiqueta Meta esencial en HTML para configurar el área visible.
  • Media Queries: Bloques condicionales basados en el tamaño de pantalla. 
@media screen and (max-width: 600px) {
  body { background: white; }
}