HTML y CSS desde fundamentos hasta uso real

1. Introduccion: Que es HTML

HTML (HyperText Markup Language) es el lenguaje que define la estructura semantica de una pagina web. Con HTML se organiza el contenido en titulos, parrafos, tablas, formularios y bloques con significado para navegadores, buscadores y tecnologias de asistencia.

No es un lenguaje de programacion; es un lenguaje de marcado. Su objetivo principal es describir que es cada parte del contenido, mientras que CSS define como se ve.

2. Tabla de etiquetas HTML (30)

Total documentado: 30 etiquetas HTML.

1. Que es CSS

CSS (Cascading Style Sheets) controla la presentacion visual de un documento HTML. Define color, espaciado, tipografia, alineacion y distribucion de elementos en pantalla. Se llama "en cascada" porque varias reglas pueden aplicar al mismo elemento y el navegador decide cual gana segun prioridad, especificidad y orden de declaracion.

2. Sintaxis y estructura de una regla CSS

Una regla CSS tiene un selector y un bloque de declaraciones. Cada declaracion combina una propiedad y un valor.

.card {
  border: 1px solid #222;
  padding: 1rem;
  background-color: #ffffff;
}

/* selector: .card */
/* propiedad: border | valor: 1px solid #222 */

3. Tipos de selectores

Selectores simples

Apuntan por nombre de etiqueta, clase, id o universal.

p { color: #222; }
.alerta { border-left: 4px solid #111; }
#menu { position: sticky; }
* { box-sizing: border-box; }

Selectores combinadores

Relacionan elementos por su posicion en el DOM.

nav a { text-decoration: none; }    /* descendiente */
ul > li { margin-bottom: .5rem; }   /* hijo directo */
h2 + p { margin-top: 0; }           /* hermano adyacente */
h2 ~ p { color: #444; }             /* hermano general */

Selectores de pseudoclase

Aplican segun estado o posicion del elemento.

a:hover { text-decoration: underline; }
tr:nth-child(even) { background: #f3f3f3; }
input:not([type="submit"]) { width: 100%; }
button:focus { outline: 2px solid #000; }

Selectores de pseudoelemento

Permiten estilizar partes especificas de un elemento.

h3::before { content: "# "; }
p::first-line { font-weight: 600; }
p::first-letter { font-size: 1.3em; }

Selectores de atributo

Seleccionan segun presencia o patron de valor en atributos.

[required] { border-color: #111; }
input[type="email"] { background: #fafafa; }
a[href^="https"] { font-weight: 600; }

4. Formas de insertar CSS

CSS externo (recomendado)

<link rel="stylesheet" href="assets/css/main.css" />

CSS interno / embebido

<style>
  h1 { color: #111; }
</style>

CSS en linea (inline)

<p style="color: #111; margin-top: 12px;">Texto</p>

5. Tabla de propiedades CSS mas utilizadas (30)

Total documentado: 30 propiedades CSS.

6. Seccion adicional

Especificidad CSS

Cuando dos reglas apuntan al mismo elemento, gana la de mayor especificidad. En forma simplificada: id > clase/atributo/pseudoclase > etiqueta.

p { color: gray; }          /* 0,0,1 */
.texto { color: green; }    /* 0,1,0 */
#intro { color: black; }    /* 1,0,0 */

Media queries para responsividad

Permiten ajustar el diseno segun el ancho de pantalla. Se recomienda enfoque mobile-first: definir primero estilo movil y ampliar para pantallas grandes.

@media (min-width: 768px) {
  .columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}