Fundamentos de CSS: Sintaxis, Reglas y Estilos desde Cero

HTML: La Estructura del Contenido

HTML define la estructura y el significado del contenido de una página web. Indica qué elementos existen (títulos, párrafos, listas), pero no cómo se ven visualmente. Sin CSS, el navegador aplica estilos básicos por defecto.

Documento HTML sin estilos CSS personalizados — HTML define la estructura y el contenido, no el diseño visual.

CSS: El Lenguaje del Diseño Web

CSS (Cascading Style Sheets) es el lenguaje que controla cómo se ve el contenido HTML. Permite definir colores, tipografías, tamaños, espacios y distribución sin alterar la estructura del documento.

Comparación visual entre estructura HTML y diseño CSS — HTML construye la estructura, CSS se encarga del diseño.

Crear un Archivo CSS Externo

En proyectos reales, los estilos se escriben en archivos CSS externos. Esto permite reutilizar estilos, mantener el código ordenado y separar claramente el contenido (HTML) del diseño (CSS).

Estructura básica de carpetas del proyecto

/proyecto-web
  /css
    style.css
  index.html

El archivo style.css contiene SOLO código CSS
No se escriben etiquetas HTML dentro del archivo CSS

Estructura básica de carpetas del proyecto

/proyecto-web
  /css
    style.css
  index.html

El archivo style.css contiene SOLO código CSS
No se escriben etiquetas HTML dentro del archivo CSS

htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

Vincular el Archivo CSS al HTML

Para que el navegador aplique los estilos definidos en un archivo CSS externo, debemos enlazarlo desde el HTML usando la etiqueta <link>, siempre dentro del <head> del documento.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Declaramos el tipo de documento: HTML5 -->
<!DOCTYPE html>

<!-- Idioma principal del contenido -->
<html lang="es">
<head>

  <!-- Codificación de caracteres -->
  <meta charset="UTF-8">

  <!-- Título que aparece en la pestaña del navegador -->
  <title>Mi primer sitio con CSS</title>

  <!-- Enlazamos el archivo CSS externo -->
  <!-- rel indica que es una hoja de estilos -->
  <!-- href define la ruta al archivo CSS -->
  <link rel="stylesheet" href="./css/style.css">

</head>
<body>

  <!-- Contenido HTML que será estilizado con CSS -->
  <h1>Bienvenidos</h1>
  <p>Este contenido será estilizado desde style.css</p>

</body>
</html>

<!-- Declaramos el tipo de documento: HTML5 -->
<!DOCTYPE html>

<!-- Idioma principal del contenido -->
<html lang="es">
<head>

  <!-- Codificación de caracteres -->
  <meta charset="UTF-8">

  <!-- Título que aparece en la pestaña del navegador -->
  <title>Mi primer sitio con CSS</title>

  <!-- Enlazamos el archivo CSS externo -->
  <!-- rel indica que es una hoja de estilos -->
  <!-- href define la ruta al archivo CSS -->
  <link rel="stylesheet" href="./css/style.css">

</head>
<body>

  <!-- Contenido HTML que será estilizado con CSS -->
  <h1>Bienvenidos</h1>
  <p>Este contenido será estilizado desde style.css</p>

</body>
</html>

Estructura Clave–Valor en CSS

Dentro de una regla CSS, cada línea sigue una estructura clave–valor. La propiedad (clave) indica qué aspecto se modifica y el valor define cómo se verá ese aspecto.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Seleccionamos todos los párrafos de la página */
p {

  /* PROPIEDAD: define qué aspecto visual modificamos */
  /* VALOR: define cómo se verá ese aspecto */

  color: red;
  /* Cambia el color del texto */

  font-size: 16px;
  /* Define el tamaño del texto (siempre con unidad) */

  background-color: #f2f2f2;
  /* Define el color de fondo del elemento */

}

/* Cada propiedad termina con punto y coma */

/* Seleccionamos todos los párrafos de la página */
p {

  /* PROPIEDAD: define qué aspecto visual modificamos */
  /* VALOR: define cómo se verá ese aspecto */

  color: red;
  /* Cambia el color del texto */

  font-size: 16px;
  /* Define el tamaño del texto (siempre con unidad) */

  background-color: #f2f2f2;
  /* Define el color de fondo del elemento */

}

/* Cada propiedad termina con punto y coma */

Etiquetas HTML como Selectores CSS

Uno de los selectores más básicos en CSS son las propias etiquetas HTML. Al usar una etiqueta como selector, el estilo se aplica a todos los elementos de ese tipo en la página.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Selector por etiqueta */
/* Afecta a TODOS los <p> del documento */
p {
  color: green;
}

/* Selector por etiqueta para títulos h2 */
/* Todos los <h2> tendrán este estilo */
h2 {
  text-transform: uppercase;
  /* Convierte el texto a mayúsculas */
}

/* Este tipo de selector es global */
/* Más adelante veremos selectores más específicos */

/* Selector por etiqueta */
/* Afecta a TODOS los <p> del documento */
p {
  color: green;
}

/* Selector por etiqueta para títulos h2 */
/* Todos los <h2> tendrán este estilo */
h2 {
  text-transform: uppercase;
  /* Convierte el texto a mayúsculas */
}

/* Este tipo de selector es global */
/* Más adelante veremos selectores más específicos */

Ejemplo de etiquetas HTML usadas como selectores CSS — Los selectores por etiqueta afectan a todos los elementos de ese tipo.

Errores Comunes de Sintaxis en CSS

Pequeños errores de sintaxis pueden hacer que una regla CSS no funcione. Es fundamental respetar unidades, puntos y comas para que el navegador interprete correctamente los estilos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* EJEMPLO CORRECTO */
h2 {
  font-size: 24px;
  /* La unidad 'px' es obligatoria */

  color: #333;
  /* Cada línea termina con punto y coma */
}

/* EJEMPLO INCORRECTO */
h3 {
  font-size: 24;
  /* ERROR: falta la unidad (px, em, rem, etc.) */

  color: red
  /* ERROR: falta el punto y coma */
}

/* Un solo error puede hacer que la regla no funcione */

/* EJEMPLO CORRECTO */
h2 {
  font-size: 24px;
  /* La unidad 'px' es obligatoria */

  color: #333;
  /* Cada línea termina con punto y coma */
}

/* EJEMPLO INCORRECTO */
h3 {
  font-size: 24;
  /* ERROR: falta la unidad (px, em, rem, etc.) */

  color: red
  /* ERROR: falta el punto y coma */
}

/* Un solo error puede hacer que la regla no funcione */

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

Leccion Anterior

Tablas en HTML: Estructura y Semántica Profesional

Cómo representar datos correctamente sin romper accesibilidad ni SEO

Comenzar Lección

Leccion Actual

Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML

Fundamentos de CSS

En esta lección aprendés cómo funciona CSS desde la base: qué es una regla de estilo, cómo se escribe la sintaxis correcta, qué son los selectores y cómo aplicar estilos visuales profesionales sobre cualquier estructura HTML.

Comenzar Lección

Lecciones Siguiente

Selectores CSS

Los selectores son la base del CSS. En esta lección aprendés cómo decirle al navegador exactamente **qué elementos HTML deben recibir estilos**, entendiendo cuándo usar etiquetas, clases o IDs y cómo impactan en la especificidad y el mantenimiento del código.

Comenzar Lección

¿Qué pasa si olvido poner el punto y coma (;) al final de una línea?

El navegador no sabrá dónde termina esa instrucción y dónde empieza la siguiente, por lo que interpretará todo como una sola línea errónea. Generalmente, esto anula tanto la regla actual como la que le sigue inmediatamente.

¿Es CSS sensible a mayúsculas y minúsculas (Case Sensitive)?

La mayoría de las propiedades y valores de CSS NO son sensibles (puedes escribir `COLOR: RED`), pero es una mala práctica. Sin embargo, los nombres de clases y IDs (`.miClase`) SÍ son sensibles a mayúsculas en el HTML, por lo que se recomienda escribir todo en minúsculas (kebab-case) para evitar confusiones.

¿Puedo inventar nombres de propiedades?

No. Las propiedades (como `background`, `border`, `display`) son palabras reservadas del estándar web. Si inventas una (ej: `text-color: red`), el navegador simplemente la ignorará.

¿Por qué el valor '0' no necesita unidad?

Porque cero es cero en cualquier sistema de medida. 0 píxeles es igual a 0 centímetros o 0 pulgadas. Es el único caso donde la unidad es opcional y se suele omitir por limpieza de código.

¿Dónde debo escribir mi código CSS?

Existen tres formas: 1) En un archivo externo `.css` vinculado (La mejor opción profesional), 2) En la etiqueta `<style>` dentro del `<head>`, o 3) En línea con el atributo `style` dentro de la etiqueta HTML (Desaconsejado).

¿Qué significa que el estilo sea 'en cascada'?

Significa que las reglas se aplican de arriba a abajo y pueden sobrescribirse. Si defines `color: red` al inicio y luego `color: blue` para el mismo elemento más abajo, el color final será azul debido a la cascada.

¿Cómo hago comentarios en CSS?

A diferencia de HTML (``), en CSS se usa `/* comentario */`. Todo lo que esté entre esos símbolos será ignorado por el navegador.

¿Qué es un selector de tipo?

Es cuando seleccionas directamente por el nombre de la etiqueta HTML, como `p`, `h1`, `div` o `body`. Aplicará el estilo a TODOS los elementos de ese tipo en la página.

¿Puedo agrupar selectores para aplicar el mismo estilo?

Sí, separándolos por comas. Ejemplo: `h1, h2, p { color: black; }` aplicará el color negro a esos tres tipos de elementos simultáneamente, ahorrando líneas de código.

¿Qué diferencia hay entre `color` y `background-color`?

La propiedad `color` afecta exclusivamente al primer plano (generalmente el texto), mientras que `background-color` afecta al fondo de la caja del elemento.