Fundamentos de CSS3

Introducción a CSS

• Qué es CSS: Es el lenguaje que define el aspecto visual del HTML. Permite cambiar colores, tipografías, tamaños, espacios y la disposición de los elementos sin tocar el contenido.
• Separación de responsabilidades: HTML describe la estructura, CSS describe el diseño. Esta separación facilita mantenimiento, reutilización y escalabilidad de un proyecto.
• Formas de incluir CSS: Inline (solo para casos puntuales), interno (para prototipos rápidos) y externo (recomendado para proyectos reales). El externo permite cacheo y orden.
• Sintaxis básica: Un selector apunta a elementos y se le asignan propiedades con valores. Los comentarios ayudan a documentar bloques complejos.
• Cascada y herencia: Cuando varias reglas aplican a un elemento, la cascada decide cuál gana. Algunas propiedades se heredan (color, font-family), otras no (margin, padding).

Selectores y Especificidad

css
Copiar
1/* Selector de elemento */
2p { color: black; }
3
4/* Clase */
5.destacado { font-weight: bold; }
6
7/* ID */
8#header { background-color: navy; }
9
10/* Descendiente e hijo directo */
11nav a { text-decoration: none; }
12ul > li { list-style: square; }
13
14/* Atributo */
15a[target="_blank"] { color: orange; }
16
17/* Pseudo-clases y pseudo-elementos */
18a:hover { color: red; }
19li:nth-child(odd) { background: #f0f0f0; }
20p::first-line { font-variant: small-caps; }

• Tipos de selectores (elemento, clase, ID, atributo, combinadores, pseudo-clases, pseudo-elementos).
• Especificidad: importancia de ID > clase > elemento; uso de !important solo como último recurso.
• Cascada y orden de carga de estilos.

Box Model

css
Copiar
1.card {
2  width: 320px;
3  padding: 16px 20px;
4  border: 2px solid #222;
5  border-radius: 10px;
6  margin: 20px auto;
7  box-sizing: border-box; /* width incluye padding y borde */
8}

• Contenido, padding, borde y margen; cómo afectan al tamaño total.
• box-sizing: border-box para layouts predecibles.
• Colapso de márgenes y cómo evitarlo (padding o overflow: hidden en contenedores).

Colores y Tipografía

css
Copiar
1body {
2  color: #333;
3  background: linear-gradient(to right, #667eea, #764ba2);
4  font-family: "Inter", "Helvetica", sans-serif;
5  font-size: 16px; /* px, rem, em, % */
6  line-height: 1.6;
7  letter-spacing: 0.3px;
8  text-align: left;
9}

• Formatos de color: HEX, RGB/RGBA, HSL/HSLA y gradientes.
• Tipografías seguras vs Google Fonts; pesos (font-weight) y line-height.
• Unidades relativas vs absolutas para texto.