DISEÑO WEB

Fundamentos de CSS

Sintaxis, reglas y estilos para dar diseño a tus sitios web

Aprende CSS desde la base: domina la sintaxis, reglas de estilo y selectores. Descubre cómo transformar código HTML en interfaces visuales profesionales con estilos correctos.

1

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.
2

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.
3

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
Publicidad
html-css-online-course-responsive-web-design-from-scratch
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 especial
Ver próximas fechas
4

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.

<!-- 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>
5

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.

/* 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 */
6

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.

/* 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.
7

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.

/* 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 */
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 especial
Ver próximas fechas

Lección anterior

Estructura de tabla HTML moderna
Ilustración de una cuadrícula de datos estructurada semánticamente.

Tablas en HTML: Estructura y Semántica Profesional

Crea tablas HTML semánticas y accesibles. Aprende a usar thead, tbody, combinar celdas y estructurar datos correctamente para evitar errores comunes de maquetación.

Comenzar Lección

Lección actual

Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML
CSS es el lenguaje que transforma la estructura HTML en interfaces visuales atractivas.

Fundamentos de CSS

Aprende CSS desde la base: domina la sintaxis, reglas de estilo y selectores. Descubre cómo transformar código HTML en interfaces visuales profesionales con estilos correctos.

Lección actual

Lección siguiente

Diagrama visual de selectores CSS aplicándose sobre elementos HTML
Los selectores CSS permiten conectar reglas de estilo con elementos HTML específicos.

Selectores CSS

Domina los selectores CSS para aplicar estilos con precisión. Aprende a usar etiquetas, clases e IDs correctamente, optimizando la especificidad y mantenibilidad de tu 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.