Guía Documental de HTML y CSS

¿Qué es HTML?

HTML es el acrónimo de HyperText Markup Language, que en español se traduce como Lenguaje de Marcado de Hipertexto. Cada una de estas palabras significa:

HTML permite organizar texto, imágenes, enlaces, formularios, tablas y contenido multimedia.

Tabla de Etiquetas HTML

Las tablas siguientes resumen las etiquetas definidas en la norma HTML Living Standard.
Preambulo y elemento raiz
Nombre del tag Descripción Ejemplo Video
<!DOCTYPE> Define el tipo de documento y la versión de HTML. <!DOCTYPE html> Ver video
<html> Representa la raíz de un documento HTML. <html lang="es"> Ver video
Metadatos
Nombre del tag Descripción Ejemplo Video
<head> Contenedor de metadatos (título, scripts, estilos). <head>...</head> No disponible
<title> Define el título que se muestra en la pestaña. <title>Mi Guía</title> Ver video
<meta> Define metainformación como el charset o autor. <meta charset="UTF-8"> Ver video
<link> Relaciona el documento con archivos externos (CSS). <link rel="stylesheet"> Ver video
<style> Contiene reglas CSS internas del documento. <style> body { } </style> No disponible
Secciones
Nombre del tag Descripción Ejemplo Video
<body> Contiene todo el contenido visible de la web. <body>...</body> Ver video
<header> Cabecera de la página o de una sección. <header>...</header> Ver video
<nav> Sección destinada a los enlaces de navegación. <nav>...</nav> Ver video
<section> Representa una sección genérica autónoma. <section>...</section> No disponible
<footer> Pie de página o cierre de una sección. <footer>...</footer> Ver video
<h1> - <h6> Encabezados organizados por niveles de importancia. <h1>Título principal</h1> Ver video
Bloques de contenido
Nombre del tag Descripción Ejemplo Video
<p> Define un párrafo de texto. <p>Texto del párrafo</p> No disponible
<div> Contenedor genérico de bloque para agrupar elementos. <div>...</div> Ver video
<hr> Representa una ruptura temática o línea horizontal. <hr> Ver video
<main> Engloba el contenido principal único del body. <main>...</main> Ver video
<blockquote> Indica que el contenido es una cita larga. <blockquote>...</blockquote> Ver video
Texto y enlaces
Nombre del tag Descripción Ejemplo Video
<a> Crea hipervínculos hacia otros destinos. <a href="#">Enlace</a> Ver video
<span> Contenedor genérico en línea para estilos. <span>Texto</span> Ver video
<strong> Indica que el texto tiene una importancia fuerte. <strong>Importante</strong> No disponible
<br> Produce un salto de línea en el texto. Línea 1<br>Línea 2 Ver video
<code> Muestra un fragmento de código fuente. <code>print()</code> Ver video
Contenido incrustado
Nombre del tag Descripción Ejemplo Video
<img> Representa una imagen en el documento. <img src="img.jpg"> Ver video
<iframe> Inserta un contexto de navegación anidado. <iframe src="..."> Ver video
<video> Reproduce contenido de video en la página. <video src="..."> No disponible
Listas (bloque de contenido)
Nombre del tag Descripción Ejemplo Video
<ul> Lista de elementos sin orden específico (viñetas). <ul>...</ul> Ver video
<ol> Lista de elementos con orden secuencial (números). <ol>...</ol> Ver video
<li> Representa un elemento dentro de cualquier lista. <li>Elemento</li> No disponible
Tablas
Nombre del tag Descripción Ejemplo Video
<table> Contenedor principal para datos tabulares. <table>...</table> Ver video
<tr> Define una fila de celdas en una tabla. <tr>...</tr> Ver video
<td> Define una celda de datos estándar. <td>Dato</td> No disponible

HTML no es un lenguaje de programación, sino un lenguaje de estructura que trabaja junto con CSS y JavaScript para desarrollar sitios web modernos.

¿Qué es CSS?

CSS es el acrónimo de "Cascading Style Sheets" (Hojas de Estilo en Cascada), una herramienta muy importante en el diseño web. La hoja de estilos es justo lo que su nombre indica. Mientras que HTML proporciona la estructura básica de un documento, CSS se encarga de darle estilo y presentación visual.

CSS permite manipular elementos HTML de diversas maneras, como tamaño, forma, color e incluso interacciones con los usuarios finales.

Sintaxis de una regla CSS

La sintaxis de CSS es el conjunto de reglas que definen cómo escribir código correctamente. Estas reglas indican cómo combinar selectores, propiedades y valores para producir un diseño coherente en una página web. 

p {
    color: blue;
    font-size: 16px;
}

Partes del ejemplo de la regla CSS:

  • Selector: p → Indica qué elemento HTML será modificado.
  • Bloque de declaración: Todo lo que está dentro de las llaves { }.
  • Propiedad: color y font-size → Característica que se modifica.
  • Valor: blue y 16px → Valor asignado a cada propiedad.

Tipos de Selectores

Los selectores en CSS permiten aplicar estilos a elementos específicos del documento HTML. Dependiendo del tipo de selector, podemos seleccionar elementos por su nombre, clase, estado, atributos o relación con otros elementos.

1. Selectores Simples

Se utilizan para seleccionar elementos de forma directa y básica.

Selector de elemento

Selecciona todos los elementos de un tipo específico. Sirve para aplicar estilos generales a una etiqueta. 

p {
    color: blue;
}
Selector de clase

Selecciona elementos que tengan una clase específica. Sirve para aplicar estilos reutilizables a varios elementos. 

.texto {
    font-size: 18px;
}
Selector de id

Selecciona un elemento único mediante su atributo id. Sirve para aplicar un estilo exclusivo. 

#titulo {
    color: red;
}
Selector universal

Selecciona todos los elementos del documento. Sirve para aplicar estilos globales. 

* {
    margin: 0;
}

2. Selectores Combinadores

Permiten seleccionar elementos según su relación con otros elementos, lo que da mayor precisión en el diseño.

Descendiente

Selecciona elementos que estén dentro de otro elemento, sin importar el nivel de profundidad. 

div p {
    color: green;
}
Hijo directo

Selecciona solo los elementos que sean hijos inmediatos. Sirve para mayor precisión. 

div > p {
    font-weight: bold;
}
Hermano adyacente

Selecciona el elemento que está inmediatamente después de otro. 

h1 + p {
    color: orange;
}
Hermano general

Selecciona todos los hermanos que estén después de un elemento. 

h1 ~ p {
    background-color: lightgray;
}

3. Selectores de Pseudoclase

Se utilizan para definir estados especiales de un elemento.

:hover

Aplica estilos cuando el usuario pasa el cursor sobre un elemento. Sirve para efectos interactivos. 

button:hover {
    background-color: blue;
    color: white;
}
:nth-child()

Selecciona un elemento según su posición dentro de su contenedor. 

li:nth-child(2) {
    color: red;
}
:not()

Selecciona todos los elementos excepto los que cumplan cierta condición. 

p:not(.especial) {
    color: gray;
}

4. Selectores de Pseudoelementos

Permiten seleccionar partes específicas de un elemento para aplicar estilos especiales.

::before

Inserta contenido antes del contenido del elemento. 

p::before {
    content: "★ ";
}
::after

Inserta contenido después del elemento. 

p::after {
    content: " ✔";
}
::first-line

Selecciona únicamente la primera línea de un texto. 

p::first-line {
    font-weight: bold;
}

5. Selectores de Atributos

Seleccionan elementos según la presencia o el valor de sus atributos.

[atributo]

Selecciona elementos que tengan un atributo específico. 

input[type] {
    border: 1px solid black;
}
[atributo="valor"]

Selecciona elementos cuyo atributo tenga un valor exacto. 

input[type="text"] {
    background-color: lightyellow;
}
[atributo^="valor"]

Selecciona elementos cuyo atributo comience con cierto valor. 

a[href^="https"] {
    color: green;
}

Formas de insertar CSS

Existen tres maneras principales de agregar estilos CSS a una página web: externo, interno e inline.

1. CSS Externo (link)

Se escribe en un archivo separado con extensión .css y se conecta al HTML mediante la etiqueta link. Es la forma más recomendada. 

<head>
    <link rel="stylesheet" href="estilos.css">
</head>

2. CSS Interno (style)

Se escribe dentro del mismo archivo HTML utilizando la etiqueta style dentro del head. 

<style>
p {
    color: green;
}
</style>

3. CSS en Línea (Inline)

Se aplica directamente dentro de una etiqueta HTML usando el atributo style. Se recomienda solo para casos específicos. 

<p style="color: red;">
Texto en línea
</p>

Propiedades CSS Más Utilizadas

Texto y Fuente
Propiedad Descripción Ejemplo de uso Video
color Define el color del texto. color: red; Ver video
font-family Define la fuente del texto. font-family: Arial; Ver video
font-size Tamaño de la letra. font-size: 16px; Ver video
text-align Alineación del texto. text-align: center; Ver video
font-weight Grosor de la fuente (negrita). font-weight: bold; No disponible
text-decoration Decoración (subrayado, tachado). text-decoration: underline; Ver video
line-height Espacio entre líneas (interlineado). line-height: 1.5; Ver video
letter-spacing Espacio entre caracteres. letter-spacing: 2px; Ver video
Fondo y Color
Propiedad Descripción Ejemplo de uso Video
background-color Color de fondo. background-color: blue; Ver video
background-image Imagen de fondo. background-image: url(); Ver video
opacity Transparencia del elemento. opacity: 0.5; Ver video
background-size Tamaño de la imagen de fondo. background-size: cover; No disponible
background-repeat Repetición de la imagen de fondo. background-repeat: no-repeat; Ver video
background-position Posición de la imagen de fondo. background-position: center; Ver video
Modelo de Caja
Propiedad Descripción Ejemplo de uso Video
width Ancho del elemento. width: 100px; Ver video
height Alto del elemento. height: 100px; Ver video
margin Margen exterior. margin: 10px; Ver video
padding Espacio interior. padding: 10px; Ver video
border Borde del elemento. border: 1px solid; Ver video
border-radius Esquinas redondeadas. border-radius: 5px; Ver video
box-shadow Sombra de la caja. box-shadow: 2px 2px 5px; Ver video
box-sizing Cálculo del tamaño de la caja. box-sizing: border-box; No disponible
Posicionamiento y Layout
Propiedad Descripción Ejemplo de uso Video
display Comportamiento de la caja. display: flex; Ver video
position Tipo de posición. position: relative; Ver video
z-index Orden de capas. z-index: 1; Ver video
float Flotación a los lados. float: left; Ver video
top / bottom Posicionamiento vertical. top: 0; No disponible
left / right Posicionamiento horizontal. left: 0; Ver video
overflow Control de contenido excedente. overflow: hidden; Ver video
visibility Visibilidad del elemento. visibility: hidden; Ver video

Sección Adicional: Conceptos Importantes en CSS

Además de los selectores y formas de insertar CSS, existen conceptos fundamentales que ayudan a crear diseños más organizados, adaptables y profesionales.

1. Especificidad en CSS

La especificidad determina qué regla se aplica cuando varias afectan al mismo elemento. El navegador prioriza los selectores más específicos.

  • Elemento (p) → baja prioridad
  • Clase (.clase) → prioridad media
  • ID (#id) → prioridad alta
  • Inline (style="") → prioridad máxima
p { color: blue; }
.texto { color: green; }
#parrafo { color: red; }

Si un elemento tiene id y clase, se aplicará el estilo del id porque tiene mayor especificidad.

2. Unidades de Medida

CSS utiliza diferentes unidades para definir tamaños y espacios. Algunas son absolutas y otras relativas.

  • px: Unidad fija en píxeles.
  • em: Relativa al tamaño del elemento padre.
  • rem: Relativa al tamaño raíz (html).
  • %: Relativa al tamaño del contenedor.
p {
    font-size: 16px;
    width: 50%;
}

h1 {
    font-size: 2rem;
}

3. Flexbox (Conceptos Básicos)

Flexbox es un modelo de diseño que permite organizar elementos en filas o columnas de manera flexible y alineada.

  • display: flex; Activa Flexbox
  • justify-content: Alineación horizontal
  • align-items: Alineación vertical
.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
}

Se usa principalmente para centrar elementos o distribuirlos de manera uniforme.

4. Media Queries (Responsividad)

Las media queries permiten adaptar el diseño a diferentes tamaños de pantalla, como celulares, tablets o computadoras. 

@media (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

Se utilizan para hacer que una página sea responsive y se vea bien en cualquier dispositivo.